前臺(tái)Array To Json與后臺(tái)Json To List

ID:83710 · 發(fā)表于 2015-6-25 16:59

糾結(jié)了一天的兩個(gè)問(wèn)題、上午在糾結(jié)如何在動(dòng)態(tài)的"td"中獲取對(duì)應(yīng)的“input text”，經(jīng)過(guò)“昔陌初莧”前輩的指點(diǎn)，沒(méi)有遇到太大的問(wèn)題就解決了。而下午是想把前臺(tái)的數(shù)據(jù)傳給后臺(tái)進(jìn)行處理，這個(gè)可難壞我了，幸虧有尚哥（“E不小心”）前輩的幫忙。雖然用時(shí)比較長(zhǎng)但還是得到了想要的效果。感謝兩位IT大神指點(diǎn)、感謝！

下面對(duì)今天遇到的問(wèn)題進(jìn)行簡(jiǎn)略的記錄：

首先說(shuō)明下上午動(dòng)態(tài)獲取“text” 控件"value"值并標(biāo)記儲(chǔ)存起來(lái)以備后臺(tái)調(diào)用。

雖然說(shuō)td是動(dòng)態(tài)的導(dǎo)致"text"控件的個(gè)數(shù)也不固定，但是可以把每一行tr看作一個(gè)單元，并對(duì)單元中的“text”元素用JQuery的find查找。簡(jiǎn)單的代碼大約如下（注：此為前臺(tái)JQuery代碼）：

var arrayList = new Array(); // 存儲(chǔ)數(shù)據(jù)

$("#t_Content tr").each(function () { // #t_Content tr 在Id為t_Content元素下查找tr元素，t_Content為tbody

var arrayKeys = new Array(); // 聲明一個(gè)Array數(shù)組用來(lái)存儲(chǔ)keys

var arrayValues = new Array(); // 聲明一個(gè)Array數(shù)組用來(lái)存儲(chǔ)Values

var saveDate = { // 這里聲明一個(gè)對(duì)象，注意值類(lèi)型與引用類(lèi)型的區(qū)別，否則會(huì)導(dǎo)致這個(gè)Array中的數(shù)據(jù)均為最后的值

InputKeys: [], // 存儲(chǔ)keys屬性

InputValues: [] // 存儲(chǔ)Values屬性

};

var t = $(this); // 注：需要把本次的tr保存到一個(gè)變量中，否則下次$(this)調(diào)用是this已經(jīng)改變了會(huì)導(dǎo)致錯(cuò)誤

t.find(":input[type='text']").each(function (index, element) { // 在tr下find標(biāo)簽是input并“type='text'”元素，分別保存id與values

arrayKeys.push($(this).attr("id"));

arrayValues.push($(this).val());

});

if (arrayKeys.length > 0) { // 如果數(shù)組中有數(shù)據(jù)則保存到arrayList中直接push進(jìn)去就好

saveDate.InputKeys = arrayKeys;

saveDate.InputValues = arrayValues;

arrayList.push(saveDate);

}

});

最終形成的數(shù)據(jù)模型大約是：
數(shù)組[“數(shù)組”，“數(shù)組”]

以上就是上午的問(wèn)題，相對(duì)來(lái)說(shuō)運(yùn)氣不錯(cuò)，感謝“昔陌初莧”前輩在引用類(lèi)型處的指點(diǎn)。

下午的問(wèn)題其實(shí)也不是太難，只是自己對(duì)Json掌握的不是很熟悉，所以走了很多的彎路。感謝尚哥幾個(gè)小時(shí)的幫助、感謝！其實(shí)上午的問(wèn)題與下午的問(wèn)題是有一定的聯(lián)系的，需要把上午生成的數(shù)據(jù)類(lèi)型轉(zhuǎn)換成JSON字符串通過(guò)Ajax傳到后臺(tái)，后臺(tái)在反序列化成實(shí)體對(duì)象
剛開(kāi)始的時(shí)候問(wèn)了幾位群友，他們都對(duì)我那奇葩的Array沒(méi)有辦法生成JSON，后來(lái)只有通過(guò)手動(dòng)拼接，還好很順利，但是后臺(tái)如何解析成對(duì)應(yīng)的實(shí)體類(lèi)就難壞我了。后來(lái)尚哥的提示，下載了一個(gè)JQuery.json.js類(lèi)庫(kù)，調(diào)用其中的$.toJson();就可以序列化了。其實(shí)剛開(kāi)始沒(méi)有研究出來(lái)也是這個(gè)原因，開(kāi)始的JSON就錯(cuò)誤了，怎么可能得到想要的效果！
由于數(shù)據(jù)中有兩個(gè)Array元素，所以尚哥提示用下面這個(gè)對(duì)象接收：

public class SaveDate

{

public List<string> InputKeys { get; set; }

public List<string> InputValues { get; set; }

}
而解析JSON用的是微軟家的方法，引入Newtonsoft.Json.dll文件，利用var trDate = JsonConvert.DeserializeObject<List<SaveDate>>(strJSON);就可以接收數(shù)據(jù)了，比且反序列成了List對(duì)象。

今天下午躺著都中槍?zhuān)蟾艑?xiě)了以上的內(nèi)容、簡(jiǎn)記結(jié)束！

帳號(hào)		自動(dòng)登錄	找回密碼
密碼			立即注冊(cè)

前臺(tái)Array To Json與后臺(tái)Json To List

相關(guān)帖子