ASP.NET MVC5网站开发之用户资料的修改和删除3（七(2)

此方法有两个参数id 和FormCollection form，不用User直接做模型的原因是因为user会把前台所有数据都接收过来，这里我并不想允许修改用户名，所以在方法中使用TryUpdateModel绑定允许用户修改的属性。TryUpdateModel在绑定失败时同样会在在ModelState中记录错误，可以利用自定义方法GetModelErrorString获取到错误信息并反馈给视图。

2、前台显示和处理

打开Index视图找到表格初始化方法，格式化列“Username”使其显示一个连接，代码红线部分。

使其看起来这个样子，当用户点击连接的时候可以显示修改对话框

弹出窗口和发送到服务器的js代码写到表格的onLoadSuccess方法里

onLoadSuccess: function () { //修改 $("a[data-method='Modify']").click(function () { var id = $(this).attr("data-value"); var modifyDialog = new BootstrapDialog({ title: "<span></span>修改用户", message: function (dialog) { var $message = $('<div></div>'); var pageToLoad = dialog.getData('pageToLoad'); $message.load(pageToLoad); return $message; }, data: { 'pageToLoad': '@Url.Action("Modify")/' + id }, buttons: [{ icon: "glyphicon glyphicon-plus", label: "保存", action: function (dialogItself) { $.post($("form").attr("action"), $("form").serializeArray(), function (data) { if (data.Code == 1) { BootstrapDialog.show({ message: data.Message, buttons: [{ icon: "glyphicon glyphicon-ok", label: "确定", action: function (dialogItself) { $table.bootstrapTable("refresh"); dialogItself.close(); modifyDialog.close(); } }] }); } else BootstrapDialog.alert(data.Message); }, "json"); $("form").validate(); } }, { icon: "glyphicon glyphicon-remove", label: "关闭", action: function (dialogItself) { dialogItself.close(); } }] }); modifyDialog.open(); }); //修改结束 }

显示效果如下图

二、删除用户

UserController中添加删除方法

/// <summary> /// 删除 /// </summary> /// <param>用户ID</param> /// <returns></returns> [HttpPost] public ActionResult Delete(int id) { return Json(userManager.Delete(id)); }

打开Index视图找到表格初始化方法，添加“操作”列格式化列使其显示一个删除按钮，代码红框部分。

前台显示效果

然后在表格的onLoadSuccess方法里刚写的修改用户信息的js代码后面写删除用户的js代码

//修改结束 //删除按钮 $("a[data-method='Delete']").click(function () { var id = $(this).attr("data-value"); BootstrapDialog.confirm("你确定要删除" + $(this).parent().parent().find("td").eq(3).text() + "吗？\n 建议尽可能不要删除用户。", function (result) { if (result) { $.post("@Url.Action("Delete", "User")", { id: id }, function (data) { if (data.Code == 1) { BootstrapDialog.show({ message: "删除用户成功", buttons: [{ icon: "glyphicon glyphicon-ok", label: "确定", action: function (dialogItself) { $table.bootstrapTable("refresh"); dialogItself.close(); } }] }); } else BootstrapDialog.alert(data.Message); }, "json"); } }); }); //删除按钮结束 } }); //表格结束

前台显示效果

==========================================