背景描述：

本文参考资料：https://blog.csdn.net/honantic/article/details/45913403

阅读了上述博文后对我产生了启发，在ASP.NET MVC 5中如何将大批量的数据比如说表格中的数据传到后台，是否可以像HTML辅助类一样强类型绑定实体类属性并将数据传到后台？通过上述博文，我们知道了，默认的绑定器会从input标签里面获得name特性的值，绑定到C#对象属性，也就是说只要name属性正确的映射到属性名称一样的对象属性上，MVC的默认的模型绑定器会自动处理剩下的工作。

我们就基于这点做下测试，采用ASP.NET MVC 5技术：

前端页面的HTML代码如下所示：

@using (Ajax.BeginForm("Save", "Home", new AjaxOptions() { HttpMethod = "POST", OnBegin = "", OnComplete = "", OnFailure = "", OnSuccess = "" }, new { @class = "form-horizontal", area = "", id = "MyForm" }))
{<input id="Users_0_UserID" name="Users[0].UserID" type="text" value="10000" /><input id="Users_0_UserPwd" name="Users[0].UserPwd" type="text" value="1234567" /><input id="Users_0_UserName" name="Users[0].UserName" type="text" value="张三" /><input id="Users_1_UserID" name="Users[1].UserID" type="text" value="20000" /><input id="Users_1_UserPwd" name="Users[1].UserPwd" type="text" value="1234" /><input id="Users_1_UserName" name="Users[1].UserName" type="text" value="李四" /><button class="btn btn-primary" id="btn_confirm" type="button"><i class="fa fa-save"></i>&nbsp;保存</button>
}<script type="text/javascript">$("#btn_confirm").click(function () {$("#MyForm").submit();
});
</script>

在Model中定义了一个List<TabUser>类型的 属性Users，用来接收前台页面传输过来的数据，Save方法无需关注，只是为了防止报错而已，Model代码如下图所示：

  public class TextDataTableViewModel{public List<TabUser> Users { get; set; }public string Save(){return "";}}public class TabUser{public string UserName { get; set; }public string UserPwd { get; set; }public long UserID { get; set; }}

        在Control中我绑定了TextDataTableViewModel，只要在Control中能看到数据，则说明数据绑定传输成功，Control中代码如下图所示：

        public ActionResult Save(TextDataTableViewModel vm){return Content(vm.Save());}

此时前台界面是这样的：

 

我们在Control中打断点，并点击保存，可以看到，数据已经传递过来了，如下3图所示：

接下去我们要利用这一点功能，将Jquery datatable中的数据绑定到实体类属性中。首先需要编写一个JS全局方法，只要前端页面调用这个方法，就可以实现数据绑定。此方法代码如下图所示：

(function ($)
{$.extend($, {//将datatables表格中数据转换为可提交数据setPostDataTablesData: function (formID, tableObj, vmListProperty){var dts_p_d_c = $("#" + vmListProperty + "_dataTables_Post_Data_Container");if (dts_p_d_c.length > 0){dts_p_d_c.remove();}var s = '<div id="' + vmListProperty + '_dataTables_Post_Data_Container" style="display:none">';tableObj.rows().every(function (index, tableLoop, rowLoop){var rowData = tableObj.row(index).data();tableObj.columns().every(function (){s += '<input type="hidden" name="' + vmListProperty + '[' + index + '].' + this.dataSrc() + '" value="' + eval("rowData." + this.dataSrc()) + '"/>';});})s = s + '</div>';$("#" + formID).append(s);}})$.extend($, {//将datatables表格中选择的数据转换为可提交数据setSelectPostDataTablesData: function (formID, tableObj, vmListProperty, str){var dts_p_d_c = $("#" + vmListProperty + "_dataTables_Post_Data_Container");if (dts_p_d_c.length > 0){dts_p_d_c.remove();}var rowData_sel = tableObj.rows('.selected').data();var columns = tableObj.columns().dataSrc();var s = '<div id="' + vmListProperty + '_dataTables_Post_Data_Container" style="display:none">';rowData_sel.each(function (rowdata, index){for (var i = str; i < columns.length; i++){s += '<input type="hidden" name="' + vmListProperty + '[' + index + '].' + columns[i] + '" value="' + eval("rowdata." + columns[i]) + '"/>';}});s = s + '</div>';$("#" + formID).append(s);}})
}(jQuery))

以上文件有两个方法，第一个方法是将datatable中的数据全部绑定到到后台，第一个参数是form id 第二个参数是datatable的变量名，第三个参数是需要绑定的属性名。第二个是将datatable中选择的数据绑定到后台，前三个参数和第一个方法一样，第四个参数是是列索引，默认赋值0即可。

前台代码如下图所示：

@using (Ajax.BeginForm("Save", "Home", new AjaxOptions() { HttpMethod = "POST", OnBegin = "", OnComplete = "", OnFailure = "", OnSuccess = "" }, new { @class = "form-horizontal", area = "", id = "MyForm" }))
{<div class="tab-content" style="margin-top:100px;margin-bottom:10px;"><table id="xszh_table" class="table table-bordered hover" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0"></table></div><button class="btn btn-primary" id="btn_confirm" type="button"><i class="fa fa-save"></i>&nbsp;保存</button>
}<script type="text/javascript">table = $('#xszh_table').DataTable({ajax: {url: "/Home/ShowData",type: "Post",dataType:"json",dataSrc: function (json) {return json;}},dom: 'Bfrtip',select: true,columns: [{ title: "编号", data: "UserID" },{ title: "姓名", data: "UserName" },{ title: "密码", data: "UserPwd" },],"language": {url: dtsLanguage}});$("#btn_confirm").click(function () {$.setPostDataTablesData("MyForm", table, "Users");$("#MyForm").submit();});
</script>

要实现的效果是这样的：当程序运行时，datatable会自动加载数据，点击保存按钮后会将datatable中的24条数据绑定到后台指定属性，前台页面效果如下图所示：

        点击保存按钮后，可以在control中看到，数据已经全部绑定了，如下图所示：

至此，大功告成，希望能帮到更多的人，如果有更好的方法也请指点。