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

方法一：利用ajax

1) 客户端js代码：

//获取对象数组
function GetQAS() {
    var stuAnswerList = [];
    var stuAnswer = { 'answerID': 1, 'answerType': 1, 'answerContent': 'one', 'answerSingle': 1, 'answerMultiple': '1,2', 'answerTOF': true };
    var stuAnswer1 = { 'answerID': 1, 'answerType': 1, 'answerContent': 'two', 'answerSingle': 1, 'answerMultiple': '1,2', 'answerTOF': true };
    stuAnswerList.push(stuAnswer);
    stuAnswerList.push(stuAnswer);
　　　　return stuAnswerList;
}
//ajax提交数据
function SubmitStuAnswersAjax(stuAnswerArr) {
    $.ajax({
        url: "../../Paper/SubmitStuAnswers",
        type: "post",
        data: { stuAnswerArr: stuAnswerArr },
        async: false,
        cache: false,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            if (XMLHttpRequest.status == 1001) {
                eval(XMLHttpRequest.ResponseText);
            } else {
                alert("GetPaper error");
            }
        },
        success: function (data) {
            alert(data);
        }
    });
}
//按钮点击方法
function SubmitStuAnswersBtn() {
    var stuAnswerArr = GetQAS();
    SubmitStuAnswersAjax(stuAnswerArr);
}

2) 服务端C#代码：

//stuAnswerEntity
public class stuAnswerEntity
        {
            public int answerID { set; get; }
            public int answerType { set; get; }
            public int answerSingle { set; get; }
            public string answerMultiple { set; get; }
            public bool answerTOF { set; get; }
            public string answerContent { set; get; }
        }
//stuAnswerArr 注意前后台变量名称一定要相同
public ActionResult SubmitStuAnswers(List<stuAnswerEntity> stuAnswerArr)
{
    bool re = false;
    List<stuAnswerEntity> stuAnswerEntityList = new List<stuAnswerEntity>();
    stuAnswerEntityList = stuAnswerArr;
    //此时stuAnswerArr中就存有前台stuAnswerArr中的数据；
    return Content(re.ToString());
}

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

1) 客户端js代码：

function REV_SubmitStuAnswersBtn() {
    var stuAnswerArr=JSON.stringify(GetQAS());//转成json字符串
    //JS模拟post提交
    var REVQForm = document.createElement("form");
    REVQForm.setAttribute("method", 'POST');
    REVQForm.setAttribute("action", '../Paper/GetREVPaper');
    REVQForm.innerHTML = "";
    var stuAnswerInput = document.createElement("input");
    stuAnswerInput.setAttribute("type", "hidden");
    stuAnswerInput.setAttribute("name", 'REVQ');//'REVQ'
    stuAnswerInput.setAttribute("value", stuAnswerArr);
    REVQForm.appendChild(stuAnswerInput);
    document.body.appendChild(REVQForm);
    REVQForm.submit();
}

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

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

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

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

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

完整解决方案：

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 文件.

2.引用命名空间

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索c#
， 数组
， 字符串
， 数据
， 对象
this
js提交对象数组、ajax提交对象数组、form表单提交对象数组、ajax提交json数组对象、jquery 提交对象数组，以便于您获取更多的相关知识。