背景描述：

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

閱讀了上述博文后對我產(chǎn)生了啟發(fā)，在ASP.NET MVC 5中如何將大批量的數(shù)據(jù)比如說表格中的數(shù)據(jù)傳到后臺，是否可以像HTML輔助類一樣強類型綁定實體類屬性并將數(shù)據(jù)傳到后臺？通過上述博文，我們知道了，默認的綁定器會從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，用來接收前臺頁面?zhèn)鬏斶^來的數(shù)據(jù)，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中能看到數(shù)據(jù)，則說明數(shù)據(jù)綁定傳輸成功，Control中代碼如下圖所示：

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

此時前臺界面是這樣的：

?

我們在Control中打斷點，并點擊保存，可以看到，數(shù)據(jù)已經(jīng)傳遞過來了，如下3圖所示：

接下去我們要利用這一點功能，將Jquery datatable中的數(shù)據(jù)綁定到實體類屬性中。首先需要編寫一個JS全局方法，只要前端頁面調用這個方法，就可以實現(xiàn)數(shù)據(jù)綁定。此方法代碼如下圖所示：

(function ($) {$.extend($, {//將datatables表格中數(shù)據(jù)轉換為可提交數(shù)據(jù)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表格中選擇的數(shù)據(jù)轉換為可提交數(shù)據(jù)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中的數(shù)據(jù)全部綁定到到后臺，第一個參數(shù)是form id 第二個參數(shù)是datatable的變量名，第三個參數(shù)是需要綁定的屬性名。第二個是將datatable中選擇的數(shù)據(jù)綁定到后臺，前三個參數(shù)和第一個方法一樣，第四個參數(shù)是是列索引，默認賦值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>

要實現(xiàn)的效果是這樣的：當程序運行時，datatable會自動加載數(shù)據(jù)，點擊保存按鈕后會將datatable中的24條數(shù)據(jù)綁定到后臺指定屬性，前臺頁面效果如下圖所示：

? ? ? ? 點擊保存按鈕后，可以在control中看到，數(shù)據(jù)已經(jīng)全部綁定了，如下圖所示：

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

總結

以上是生活随笔為你收集整理的利用ASP.NET MVC 的默认类型绑定器---将Jquery datatables中的数据强类型绑定到实体类中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。