當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

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

發布時間：2025/3/11 asp.net 16 豆豆

生活随笔收集整理的這篇文章主要介紹了利用ASP.NET MVC 的默认类型绑定器---将Jquery datatables中的数据强类型绑定到实体类中小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

背景描述：

本文參考資料：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> 保存</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全局方法，只要前端頁面調用這個方法，就可以實現數據綁定。此方法代碼如下圖所示：

以上文件有兩個方法，第一個方法是將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> 保存</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中看到，數據已經全部綁定了，如下圖所示：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：从零搭建nginx服务器
下一篇：八皇后问题和八数码问题的最陡上升爬山法、