今天在项目中,实现一个工作经历列表功能,动态添加,数据需要传递到后台。

这里考虑到用户体验:该界面交互较多,多次添加和删除都是用js实现的。

所以,最后传递数据到后台,我也是采用了jquery的ajax方法,读取js的缓存数据(array),传递到ashx中。

这里有个问题就是:jquery传递对象/数组,无法传递,并且服务端无法获取数据。

google了一下有一些解决方案:

参考资料:

再谈jquery ajax方法传递到action - 一只博客 - 51CTO技术博客

ajax传递给后台数组参数方式 - lingxyd_0的专栏 - 博客频道 - CSDN.NET

完整解决方案:

1、js对象创建:因为需要把对象json序列化后,才能传递到后台,后台根据json字符串进行反序列化。

所以要求,在js中创建一个对象,与后台C#的实体对象一致。1

2

3

4

5

6

7

8

9

10

11function 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序列化,不然无法传递到服务端。1data: {  Wl: JSON.stringify(WorkList) }

3)完整代码:1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25var 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)反序列化:

1

2List listwork =new List();

listwork = Newtonsoft.Json.JsonConvert.DeserializeObject>(worklist);

Newtonsoft.Json.JsonConvert是一个微软的免费json转换工具。

Newtonsoft.Json 是.NET 下开源的json格式序列号和反序列化的类库.

使用方法比较简单

1.首先下载你需要的版本,然后在应用程序中引用Newtonsoft.Json.dll 文件.

44306924_1

2.引用命名空间

44306924_2

这样就可以直接转换成后台的实体了。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐