今天在项目中,实现一个工作经历列表功能,动态添加,数据需要传递到后台。
这里考虑到用户体验:该界面交互较多,多次添加和删除都是用js实现的。
所以,最后传递数据到后台,我也是采用了jquery的ajax方法,读取js的缓存数据(array),传递到ashx中。
这里有个问题就是:jquery传递对象/数组,无法传递,并且服务端无法获取数据。
google了一下有一些解决方案:
参考资料:
再谈jquery ajax方法传递到action - 一只博客 - 51CTO技术博客
http://cnn237111.blog.51cto.com/2359144/984466
ajax传递给后台数组参数方式 - lingxyd_0的专栏 - 博客频道 - CSDN.NET
http://blog.csdn.net/lingxyd_0/article/details/10428785
完整解决方案:
1、js对象创建:因为需要把对象json序列化后,才能传递到后台,后台根据json字符串进行反序列化。
所以要求,在js中创建一个对象,与后台C#的实体对象一致。
function WorkEx(depart, title, begintime, endtime) {
this.SuId = 0;
this.Id = 0;
this.DepartmentName = depart;
this.Title = title;
this.BeginTime = begintime;
this.EndTime = endtime;
this.Description = "";
this.Enable = 0;
return this;
}
WorkEx对象,与C#对象完全一致。
2、Jquery $.ajax方法的配置
针对$.ajax方法的配置参数需要进行修改:
1)dataType: "json", traditional:true:数据类型必须是json。默认的话,traditional为false,即jquery会深度序列化参数对象,以适应如PHP和Ruby on Rails框架,
但servelt api无法处理,我们可以通过设置traditional 为true阻止深度序列化
2)这个是重点!需要把js对象进行json序列化,不然无法传递到服务端。
data: { Wl: JSON.stringify(WorkList) }
3)完整代码:
var AjaxUrl = "../../Service/sp.ashx";
$.ajax({
type: "post",
dataType: "json", traditional:true,
data: { Wl: JSON.stringify(WorkList) },
url: AjaxUrl,
success: function (data, textStatus) {
if (data != null) {
if (data) {
alert("添加成功,系统将会跳转到详情界面。");
window.location.href = "SuspectList.html";
}
else {
$("#btnAdd").attr("disabled", false); $("#btnAdd").text("再次提交");
}
}
},
complete: function (XMLHttpRequest, textStatus) {
},
error: function (e) {
$("#btnAdd").attr("disabled", false); $("#btnAdd").text("再次尝试提交");
}
});
3、在服务器端进行反序列化:
1) 获取到post过来的数据: string worklist = CustomResponse.GetResponse("Wl");
2)反序列化:
List<SuspectWorkExperience> listwork = new List<SuspectWorkExperience>();
listwork = Newtonsoft.Json.JsonConvert.DeserializeObject<List<SuspectWorkExperience>>(worklist);
Newtonsoft.Json.JsonConvert是一个微软的免费json转换工具。
Newtonsoft.Json 是.NET 下开源的json格式序列号和反序列化的类库.
官方网站: http://json.codeplex.com/
使用方法比较简单
1.首先下载你需要的版本,然后在应用程序中引用Newtonsoft.Json.dll 文件.
IT分享Newtonsoft.Json <wbr>使用 <wbr>C#序列号json,反序列化对象
2.引用命名空间
IT分享Newtonsoft.Json <wbr>使用 <wbr>C#序列号json,反序列化对象
这样就可以直接转换成后台的实体了。