利用ASP.NET MVC 的默认类型绑定器---将Jquery datatables中的数据强类型绑定到实体类中

背景描述：

本文参考资料：https://blog.youkuaiyun.com/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中看到，数据已经全部绑定了，如下图所示：

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