BootstrapTable+KnockoutJS相结合实现增删改查解决方案(4)

(function ($) { ko.bindingEditViewModel = function (data, validatorFields) { var that = {}; that.editModel = ko.mapping.fromJS(data.editModel); that.default = { message: '验证不通过', fields: { }, submitHandler: function (validator, form, submitButton) { var arrselectedData = ko.toJS(that.editModel); $.ajax({ url: data.urls.submit, type: "post", contentType: 'application/json', data: JSON.stringify(arrselectedData), success: function (data, status) { alert(status); } }); $("#myModal").modal("hide"); } }; that.params = $.extend({}, that.default, {fields: validatorFields} || {}); $('#formEdit').bootstrapValidator(that.params); ko.applyBindings(that, document.getElementById("formEdit")); }; })(jQuery);

代码释疑：这个js主要封装了编辑模型的属性和提交的事件绑定。由于用到了bootstrapValidator验证组件，所以需要表单提交。其实公共js里面是不应该出现页面id的，比如上面的“formEdit”和“myModal”，可以将此作为参数传过来，这点有待优化。参数validatorFields表示验证组件的验证字段，如果表单不需要验证，则传一个空的Json或者不传都行。上文我们没有做字段验证，其实一般来说，基础表都会有一个或者几个非空字段，比如我们可以加上部门名称的非空验证。在Edit.cshtml页面的代码改成这样：

<form> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4>操作</h4> </div> <div> <div> <label for="txt_departmentname">部门名称</label> <input type="text" data-bind="value:editModel.Name" placeholder="部门名称"> </div> <div> <label for="txt_departmentlevel">部门级别</label> <input type="text" data-bind="value:editModel.Level" placeholder="部门级别"> </div> <div> <label for="txt_des">描述</label> <input type="text" data-bind="value:editModel.Des" placeholder="描述"> </div> </div> <div> <button type="button" data-dismiss="modal"><span aria-hidden="true"></span>关闭</button> <button type="submit"><span aria-hidden="true"></span>保存</button> </div> </div> </div> </form> <link href="https://www.jb51.net/~/Content/bootstrapValidator/css/bootstrapValidator.css" /> <script src="https://www.jb51.net/~/Content/bootstrapValidator/js/bootstrapValidator.js"></script> <script src="https://www.jb51.net/~/scripts/extensions/knockout.edit.js"></script> <script type="text/javascript"> $(function () { 　　　　 var editData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); ko.bindingEditViewModel(editData, { Name: { validators: { notEmpty: { message: '名称不能为空！' } } } }); }); </script>

那么就会在提交的时候自动进行验证：

注意：验证属性Name对应的是input标签的name属性，所以要做验证，这个name属性必须设置正确。

最好附上增删改的后台方法：

[HttpPost] public JsonResult Add(Department oData) { DepartmentModel.Add(oData); return Json(new { }, JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult Update(Department oData) { DepartmentModel.Update(oData); return Json(new { }, JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult Delete(List<Department> oData) { DepartmentModel.Delete(oData); return Json(new { }, JsonRequestBehavior.AllowGet); }

至此，我们整个页面的增删改查效果就OK了，简单看下效果：

三、总结

以上简单封装了bootstrapTable+ko的增删改查业务，只是一个最初级的封装。如果你需要将这些运用都你的项目中，可能还需要一些简单的优化措施，比如：

1、如果单纯是一个页面的viewmodel，是否可以不用从后台的ActionResult里面返回，直接写在View页面里面感觉更好，省去了序列化和参数传递的问题。这点有待优化。

2、公共js里面不应该出现页面元素的id，可以通过参数将页面元素传递进来。

3、新增和编辑事件方法里面弹出框的部分有很多重复代码，这部分的最好做法是将弹出框封装成一个单独的组件去调用，可以减少大部分的js代码。