夏日博客

A-A+

JS提交对象数组到C#服务端的两个方法

2016年01月12日 前端设计 暂无评论 阅读 6 views 次

本文我们分享两个Jquery提交对象数组到C#服务端的的方法，后面还分享了另外一篇Jquery ajax传递对象（数组）到后台并解析的实现方案。

方法一:利用ajax

1) 客户端js代码：

  1. //获取对象数组  
  2. function GetQAS() {  
  3.     var stuAnswerList = [];  
  4.     var stuAnswer = { 'answerID': 1, 'answerType': 1, 'answerContent': 'one', 'answerSingle': 1, 'answerMultiple': '1,2', 'answerTOF': true };  
  5.     var stuAnswer1 = { 'answerID': 1, 'answerType': 1, 'answerContent': 'two', 'answerSingle': 1, 'answerMultiple': '1,2', 'answerTOF': true };  
  6.     stuAnswerList.push(stuAnswer);  
  7.     stuAnswerList.push(stuAnswer);  
  8. 　　　　return stuAnswerList;  
  9. }  
  10. //ajax提交数据  
  11. function SubmitStuAnswersAjax(stuAnswerArr) {  
  12.     $.ajax({  
  13.         url: "../../Paper/SubmitStuAnswers",  
  14.         type: "post",  
  15.         data: { stuAnswerArr: stuAnswerArr },  
  16.         async: false,  
  17.         cache: false,  
  18.         error: function (XMLHttpRequest, textStatus, errorThrown) {  
  19.             if (XMLHttpRequest.status == 1001) {  
  20.                 eval(XMLHttpRequest.ResponseText);  
  21.             } else {  
  22.                 alert("GetPaper error");  
  23.             }  
  24.         },  
  25.         success: function (data) {  
  26.             alert(data);  
  27.         }  
  28.     });  
  29. }  
  30. //按钮点击方法  
  31. function SubmitStuAnswersBtn() {  
  32.     var stuAnswerArr = GetQAS();  
  33.     SubmitStuAnswersAjax(stuAnswerArr);  
  34. }  

2) 服务端C#代码：

  1. //stuAnswerEntity  
  2. public class stuAnswerEntity  
  3.         {  
  4.             public int answerID { set; get; }  
  5.             public int answerType { set; get; }  
  6.             public int answerSingle { set; get; }  
  7.             public string answerMultiple { set; get; }  
  8.             public bool answerTOF { set; get; }  
  9.             public string answerContent { set; get; }  
  10.         }  
  11. //stuAnswerArr 注意前后台变量名称一定要相同  
  12. public ActionResult SubmitStuAnswers(List<stuAnswerEntity> stuAnswerArr)  
  13. {  
  14.     bool re = false;  
  15.     List<stuAnswerEntity> stuAnswerEntityList = new List<stuAnswerEntity>();  
  16.     stuAnswerEntityList = stuAnswerArr;  
  17.     //此时stuAnswerArr中就存有前台stuAnswerArr中的数据；  
  18.     return Content(re.ToString());  
  19. }  

方法二:js模拟form 进行post提交

1) 客户端js代码：

  1. function REV_SubmitStuAnswersBtn() {  
  2.     var stuAnswerArr=JSON.stringify(GetQAS());//转成json字符串  
  3.     //JS模拟post提交  
  4.     var REVQForm = document.createElement("form");  
  5.     REVQForm.setAttribute("method", 'POST');  
  6.     REVQForm.setAttribute("action", '../Paper/GetREVPaper');  
  7.     REVQForm.innerHTML = "";  
  8.     var stuAnswerInput = document.createElement("input");  
  9.     stuAnswerInput.setAttribute("type", "hidden");  
  10.     stuAnswerInput.setAttribute("name", 'REVQ');//'REVQ'  
  11.     stuAnswerInput.setAttribute("value", stuAnswerArr);  
  12.     REVQForm.appendChild(stuAnswerInput);  
  13.     document.body.appendChild(REVQForm);  
  14.     REVQForm.submit();  
  15. }  

2) 服务端C#代码：以json字符串的方式传输

  1. public ActionResult GetREVPaper()  
  2. {  
  3.     bool re = false;  
  4.     string stuAnswerJson = Request["REVQ"] == null ? "" : Request["REVQ"];//'REVQ'  
  5.     //将json字符串反序列化  
  6.     List<stuAnswerEntity> studentAnswerList = JsonConvert.DeserializeObject<List<stuAnswerEntity>>(stuAnswerJson);  
  7.     return Content(re.ToString());  
  8. }  

Jquery ajax传递对象（数组）到后台并解析的实现

项目中实现一个工作经历列表功能，动态添加，数据需要传递到后台。这里考虑到用户体验：该界面交互较多，多次添加和删除都是用js实现的。所以，最后传递数据到后台，我也是采用了jquery的ajax方法，读取js的缓存数据（array）,传递到ashx中。

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

完整解决方案:

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

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

  1. function WorkEx(depart, title, begintime, endtime) {  
  2.     this.SuId = 0;  
  3.     this.Id = 0;  
  4.     this.DepartmentName = depart;  
  5.     this.Title = title;  
  6.     this.BeginTime = begintime;  
  7.     this.EndTime = endtime;  
  8.     this.Description = "";  
  9.     this.Enable = 0;  
  10.     return this;  
  11. }  

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）完整代码：

  1. var AjaxUrl = "../../Service/sp.ashx";  
  2. $.ajax({   
  3.     type: "post",  
  4.     dataType: "json", traditional:true,  
  5.     data: { Wl: JSON.stringify(WorkList) },  
  6.     url: AjaxUrl,  
  7.     success: function (data, textStatus) {  
  8.         if (data != null) {  
  9.                  
  10.             if (data) {  
  11.                 alert("添加成功，系统将会跳转到详情界面。");  
  12.                 window.location.href = "SuspectList.html";  
  13.             }  
  14.             else {   
  15.                 $("#btnAdd").attr("disabled", false); $("#btnAdd").text("再次提交");  
  16.             }  
  17.         }  
  18.     },  
  19.     complete: function (XMLHttpRequest, textStatus) {  
  20.     },  
  21.     error: function (e) {  
  22.              
  23.         $("#btnAdd").attr("disabled", false); $("#btnAdd").text("再次尝试提交");  
  24.     }  
  25. });  

3、在服务器端进行反序列化：

1） 获取到post过来的数据:string worklist = CustomResponse.GetResponse("Wl");

2）反序列化：

  1. List<SuspectWorkExperience> listwork = new List<SuspectWorkExperience>();  
  2. listwork = Newtonsoft.Json.JsonConvert.DeserializeObject<List<SuspectWorkExperience>>(worklist);  

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

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

官方网站:http://json.codeplex.com/

使用方法比较简单

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

2.引用命名空间

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

标签：

给我留言