前台Array To Json与后台Json To List

ID:83710 · 发表于 2015-6-25 16:59

纠结了一天的两个问题、上午在纠结如何在动态的"td"中获取对应的“input text”，经过“昔陌初苋”前辈的指点，没有遇到太大的问题就解决了。而下午是想把前台的数据传给后台进行处理，这个可难坏我了，幸亏有尚哥（“E不小心”）前辈的帮忙。虽然用时比较长但还是得到了想要的效果。感谢两位IT大神指点、感谢！

下面对今天遇到的问题进行简略的记录：

首先说明下上午动态获取“text” 控件"value"值并标记储存起来以备后台调用。

虽然说td是动态的导致"text"控件的个数也不固定，但是可以把每一行tr看作一个单元，并对单元中的“text”元素用JQuery的find查找。简单的代码大约如下（注：此为前台JQuery代码）：

var arrayList = new Array(); // 存储数据

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

var arrayKeys = new Array(); // 声明一个Array数组用来存储keys

var arrayValues = new Array(); // 声明一个Array数组用来存储Values

var saveDate = { // 这里声明一个对象，注意值类型与引用类型的区别，否则会导致这个Array中的数据均为最后的值

InputKeys: [], // 存储keys属性

InputValues: [] // 存储Values属性

};

var t = $(this); // 注：需要把本次的tr保存到一个变量中，否则下次$(this)调用是this已经改变了会导致错误

t.find(":input[type='text']").each(function (index, element) { // 在tr下find标签是input并“type='text'”元素，分别保存id与values

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

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

});

if (arrayKeys.length > 0) { // 如果数组中有数据则保存到arrayList中直接push进去就好

saveDate.InputKeys = arrayKeys;

saveDate.InputValues = arrayValues;

arrayList.push(saveDate);

}

});

最终形成的数据模型大约是：
数组[“数组”，“数组”]

以上就是上午的问题，相对来说运气不错，感谢“昔陌初苋”前辈在引用类型处的指点。

下午的问题其实也不是太难，只是自己对Json掌握的不是很熟悉，所以走了很多的弯路。感谢尚哥几个小时的帮助、感谢！其实上午的问题与下午的问题是有一定的联系的，需要把上午生成的数据类型转换成JSON字符串通过Ajax传到后台，后台在反序列化成实体对象
刚开始的时候问了几位群友，他们都对我那奇葩的Array没有办法生成JSON，后来只有通过手动拼接，还好很顺利，但是后台如何解析成对应的实体类就难坏我了。后来尚哥的提示，下载了一个JQuery.json.js类库，调用其中的$.toJson();就可以序列化了。其实刚开始没有研究出来也是这个原因，开始的JSON就错误了，怎么可能得到想要的效果！
由于数据中有两个Array元素，所以尚哥提示用下面这个对象接收：

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);就可以接收数据了，比且反序列成了List对象。

今天下午躺着都中枪，大概写了以上的内容、简记结束！

帐号		自动登录	找回密码
密码			立即注册

前台Array To Json与后台Json To List

相关帖子