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

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

时间：2022-06-06 02:32:42

背景描述：

本文参考资料：/honantic/article/details/45913403

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

我们就基于这点做下测试，采用 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中看到，数据已经全部绑定了，如下图所示：

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。