ASP.NET MVC 5：构建你的第一个 Web 应用程序 - 第三部分
4.96/5 (12投票s)
本文将介绍如何在我们的 ASP.NET MVC 5 应用程序中执行获取、编辑、更新和删除（FEUD）操作。
引言
这是关于在 ASP.NET MVC 5 中构建 Web 应用程序系列的第 3 部分。在第 1 部分中，我们学习了如何使用 Microsoft SQL Server 从头开始创建一个简单的数据库，简要概述了 ASP.NET MVC 的通用知识，使用 Entity Framework 数据库优先方法创建了一个简单的数据访问层，以及在 MVC 中实现了一个简单的注册页面。本系列的第 2 部分介绍了在我们的 MVC 5 应用程序中创建基本登录页面和实现简单的基于角色的页面授权的分步过程。如果您还没有阅读我之前的文章，可以参考以下链接：
在本文中，我们将学习如何在我们的 MVC 5 应用程序中执行获取、编辑、更新和删除（FEUD）操作。我们的目标是创建一个简单的维护页面，管理员用户可以在其中修改用户配置文件。根据您的业务需求，在 MVC 中实现 FEUD 操作有许多可能的方法。对于这个特定的演示，我们将使用 jQuery 和 jQuery AJAX 来在我们的页面中执行异步操作。
让我们开始吧！
如果您准备好了，那就开始吧！
获取和显示数据
在此示例中，我们将创建一个部分视图来显示数据库中的用户列表。部分视图允许您定义一个将在主视图中呈现的视图。如果您之前使用过 WebForms，那么您可以将部分视图视为用户控件 (.ascx)，它允许您自定义和重用组件。
添加视图模型
首先，我们需要为我们的视图创建视图模型。在“UserModel”类中添加以下代码：
public class UserProfileView
{
[Key]
public int SYSUserID { get; set; }
public int LOOKUPRoleID { get; set; }
public string RoleName { get; set; }
public bool? IsRoleActive { get; set; }
[Required(ErrorMessage = "*")]
[Display(Name = "Login ID")]
public string LoginName { get; set; }
[Required(ErrorMessage = "*")]
[Display(Name = "Password")]
public string Password { get; set; }
[Required(ErrorMessage = "*")]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required(ErrorMessage = "*")]
[Display(Name = "Last Name")]
public string LastName { get; set; }
public string Gender { get; set; }
}
public class LOOKUPAvailableRole
{
[Key]
public int LOOKUPRoleID { get; set; }
public string RoleName { get; set; }
public string RoleDescription { get; set; }
}
public class Gender
{
public string Text { get; set; }
public string Value { get; set; }
}
public class UserRoles
{
public int? SelectedRoleID { get; set; }
public IEnumerable<LOOKUPAvailableRole> UserRoleList { get; set; }
}
public class UserGender
{
public string SelectedGender { get; set; }
public IEnumerable<Gender> Gender { get; set; }
}
public class UserDataView
{
public IEnumerable<UserProfileView> UserProfile { get; set; }
public UserRoles UserRoles { get; set; }
public UserGender UserGender { get; set; }
}
上面的代码只是包含我们需要的某些属性的类。如果您还记得，视图模型是用于保存视图或页面所需属性的类。
添加 ManageUserPartial 视图
打开“UserManager”类并声明下面的命名空间：
using System.Collections.Generic;
上面的命名空间包含接口和类，它们定义了通用集合，使我们能够创建强类型集合。现在，将以下代码添加到“UserManager”类中：
public List < LOOKUPAvailableRole > GetAllRoles() {
using(DemoDBEntities db = new DemoDBEntities()) {
var roles = db.LOOKUPRoles.Select(o = > new LOOKUPAvailableRole {
LOOKUPRoleID = o.LOOKUPRoleID,
RoleName = o.RoleName,
RoleDescription = o.RoleDescription
}).ToList();
return roles;
}
}
public int GetUserID(string loginName) {
using(DemoDBEntities db = new DemoDBEntities()) {
var user = db.SYSUsers.Where(o = > o.LoginName.Equals(loginName));
if (user.Any()) return user.FirstOrDefault().SYSUserID;
}
return 0;
}
public List<UserProfileView> GetAllUserProfiles() {
List <UserProfileView> profiles = new List <UserProfileView>();
using(DemoDBEntities db = new DemoDBEntities()) {
UserProfileView UPV;
var users = db.SYSUsers.ToList();
foreach(SYSUser u in db.SYSUsers) {
UPV = new UserProfileView();
UPV.SYSUserID = u.SYSUserID;
UPV.LoginName = u.LoginName;
UPV.Password = u.PasswordEncryptedText;
var SUP = db.SYSUserProfiles.Find(u.SYSUserID);
if (SUP != null) {
UPV.FirstName = SUP.FirstName;
UPV.LastName = SUP.LastName;
UPV.Gender = SUP.Gender;
}
var SUR = db.SYSUserRoles.Where(o = > o.SYSUserID.Equals(u.SYSUserID));
if (SUR.Any()) {
var userRole = SUR.FirstOrDefault();
UPV.LOOKUPRoleID = userRole.LOOKUPRoleID;
UPV.RoleName = userRole.LOOKUPRole.RoleName;
UPV.IsRoleActive = userRole.IsActive;
}
profiles.Add(UPV);
}
}
return profiles;
}
public UserDataView GetUserDataView(string loginName) {
UserDataView UDV = new UserDataView();
List<UserProfileView> profiles = GetAllUserProfiles();
List<LOOKUPAvailableRole> roles = GetAllRoles();
int? userAssignedRoleID = 0, userID = 0;
string userGender = string.Empty;
userID = GetUserID(loginName);
using(DemoDBEntities db = new DemoDBEntities()) {
userAssignedRoleID = db.SYSUserRoles.Where(o = > o.SYSUserID == userID)?.FirstOrDefault().LOOKUPRoleID;
userGender = db.SYSUserProfiles.Where(o = > o.SYSUserID == userID)?.FirstOrDefault().Gender;
}
List<Gender> genders = new List<Gender>();
genders.Add(new Gender {
Text = "Male", Value = "M"
});
genders.Add(new Gender {
Text = "Female", Value = "F"
});
UDV.UserProfile = profiles;
UDV.UserRoles = new UserRoles {
SelectedRoleID = userAssignedRoleID, UserRoleList = roles
};
UDV.UserGender = new UserGender {
SelectedGender = userGender, Gender = genders
};
return UDV;
}
上面代码中的方法与其方法名称所示基本都是自explanatory 的。其中主要的方法是 GetUserDataView()，它的作用是从数据库获取所有用户配置文件和角色。UserProfile 属性保存用户数据。最后，UserRoles 和 UserGender 属性将在编辑和更新用户数据时使用。我们将使用这些值来填充角色和性别的下拉列表。
添加 ManageUserPartial 操作方法
打开“HomeController”类并添加以下命名空间：
using System.Web.Security;
using MVC5RealWorld.Models.ViewModel;
using MVC5RealWorld.Models.EntityManager;
然后，在下方添加以下操作方法：
[AuthorizeRoles("Admin")]
public ActionResult ManageUserPartial() {
if (User.Identity.IsAuthenticated) {
string loginName = User.Identity.Name;
UserManager UM = new UserManager();
UserDataView UDV = UM.GetUserDataView(loginName);
return PartialView(UDV);
}
return View();
}
上面的代码装饰了我们在第 2 部分创建的自定义 AuthorizeRoles 属性，以便只有管理员用户可以调用该方法。它的作用是通过将 loginName 作为参数传递来调用 GetUserDataView() 方法，然后将结果返回到 部分视图。
添加 ManageUserPartial 部分视图
现在让我们创建部分视图。右键单击 ManageUserPartial() 方法，然后选择“添加新”视图。这将弹出以下对话框：
图 1：添加视图对话框
由于我们将创建一个自定义视图来管理用户，因此只需选择“Empty”模板，并确保选中“Create as a partial view”选项。单击“Add”，然后复制下面的 HTML 标记：
@model MVC5RealWorld.Models.ViewModel.UserDataView
<div>
<h1>List of Users</h1>
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>ID</th>
<th>Login ID</th>
<th>Password</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th colspan="2">Role</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var i in Model.UserProfile) {
<tr>
<td> @Html.DisplayFor(m => i.SYSUserID)</td>
<td> @Html.DisplayFor(m => i.LoginName)</td>
<td> @Html.DisplayFor(m => i.Password)</td>
<td> @Html.DisplayFor(m => i.FirstName)</td>
<td> @Html.DisplayFor(m => i.LastName)</td>
<td> @Html.DisplayFor(m => i.Gender)</td>
<td> @Html.DisplayFor(m => i.RoleName)</td>
<td> @Html.HiddenFor(m => i.LOOKUPRoleID)</td>
<td><a href="javascript:void(0)" class="lnkEdit">Edit</a></td>
<td><a href="javascript:void(0)" class="lnkDelete">Delete</a></td>
</tr>
}
</tbody>
</table>
</div>
上面的标记使用 Razor 语法迭代 UserProfile 视图模型，并将每个字段分配给一个 <td> 元素。现在打开“AdminOnly.cshtml”视图并添加以下标记：
<div id="divUserListContainer">
@Html.Action("ManageUserPartial", "Home");
</div>
上面的标记只是在 AdminOnly 视图中加载 ManageUserPartial 部分视图。
测试应用
现在尝试登录到您的网页，然后导航到：https://:15599/Home/AdminOnly。输出应该类似如下：
图 2：获取输出
很简单，对吧？:) 现在让我们进入下一步。
编辑和更新数据
由于我们将使用 jQueryUI 提供一个对话框供用户编辑数据，因此我们需要先添加对其的引用。要做到这一点，只需右键单击您的项目，然后选择“管理 Nuget 包”。在搜索框中键入“jquery”，然后选择“jQuery.UI.Combined”，如下图所示：
图 3：管理 Nuget 包
安装后，jQueryUI 库应添加到您的项目下的“Scripts”文件夹中：
图 4：jQueryUI 引用
现在，转到 Views > Shared >_Layout.cshtml 并按以下顺序添加 jQueryUI 引用：
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
由于 jQueryUI 在底层使用了核心 jQuery 库，因此应将 jQueryUI 添加在 jQuery 之后。
现在，按以下方式添加 jQueryUI CSS 引用：
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
现在，添加了对 jQuery 和 jQueryUI 的引用后，我们的 _Layout.cshtml 标记应如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
添加 UpdateUserAccount() 方法
请记住，此演示旨在使应用程序尽可能简单。在复杂且实际的场景中，我强烈建议您在数据访问层中使用存储库模式和工作单元模式。
让我们继续。现在，在“UserManager”类中添加以下代码：
public void UpdateUserAccount(UserProfileView user) {
using(DemoDBEntities db = new DemoDBEntities()) {
using(var dbContextTransaction = db.Database.BeginTransaction()) {
try {
SYSUser SU = db.SYSUsers.Find(user.SYSUserID);
SU.LoginName = user.LoginName;
SU.PasswordEncryptedText = user.Password;
SU.RowCreatedSYSUserID = user.SYSUserID;
SU.RowModifiedSYSUserID = user.SYSUserID;
SU.RowCreatedDateTime = DateTime.Now;
SU.RowMOdifiedDateTime = DateTime.Now;
db.SaveChanges();
var userProfile = db.SYSUserProfiles.Where(o = > o.SYSUserID == user.SYSUserID);
if (userProfile.Any()) {
SYSUserProfile SUP = userProfile.FirstOrDefault();
SUP.SYSUserID = SU.SYSUserID;
SUP.FirstName = user.FirstName;
SUP.LastName = user.LastName;
SUP.Gender = user.Gender;
SUP.RowCreatedSYSUserID = user.SYSUserID;
SUP.RowModifiedSYSUserID = user.SYSUserID;
SUP.RowCreatedDateTime = DateTime.Now;
SUP.RowModifiedDateTime = DateTime.Now;
db.SaveChanges();
}
if (user.LOOKUPRoleID > 0) {
var userRole = db.SYSUserRoles.Where(o = > o.SYSUserID == user.SYSUserID);
SYSUserRole SUR = null;
if (userRole.Any()) {
SUR = userRole.FirstOrDefault();
SUR.LOOKUPRoleID = user.LOOKUPRoleID;
SUR.SYSUserID = user.SYSUserID;
SUR.IsActive = true;
SUR.RowCreatedSYSUserID = user.SYSUserID;
SUR.RowModifiedSYSUserID = user.SYSUserID;
SUR.RowCreatedDateTime = DateTime.Now;
SUR.RowModifiedDateTime = DateTime.Now;
} else {
SUR = new SYSUserRole();
SUR.LOOKUPRoleID = user.LOOKUPRoleID;
SUR.SYSUserID = user.SYSUserID;
SUR.IsActive = true;
SUR.RowCreatedSYSUserID = user.SYSUserID;
SUR.RowModifiedSYSUserID = user.SYSUserID;
SUR.RowCreatedDateTime = DateTime.Now;
SUR.RowModifiedDateTime = DateTime.Now;
db.SYSUserRoles.Add(SUR);
}
db.SaveChanges();
}
dbContextTransaction.Commit();
} catch {
dbContextTransaction.Rollback();
}
}
}
}
上面的方法将 UserProfileView 对象作为参数。此参数来自强类型 视图。它的作用是首先使用 LINQ 语法查询数据库，通过传递 SYSUserID 来获取特定的用户数据。然后，它使用来自 UserProfileView 对象的数据更新 SYSUser 对象。第二个查询获取关联的 SYSUserProfiles 数据，然后更新相应的值。之后，它会查找某个用户的关联 LOOKUPRoleID。如果用户没有被分配角色，它将向数据库添加一条新记录，否则，只需更新表。
如果您也注意到，我们在该方法中使用了简单的事务。这是因为 SYSUser、SYSUserProfile 和 SYSUserRole 表之间存在依赖关系，我们需要确保只有在每个表的が操作成功时才将更改提交到数据库。Database.BeginTransaction() 仅在 EF 6 及更高版本中可用。
添加 UpdateUserData() 操作方法
在“HomeController”类中添加以下代码：
[AuthorizeRoles("Admin")]
public ActionResult UpdateUserData(int userID, string loginName, string password,
string firstName, string lastName, string gender, int roleID = 0) {
UserProfileView UPV = new UserProfileView();
UPV.SYSUserID = userID;
UPV.LoginName = loginName;
UPV.Password = password;
UPV.FirstName = firstName;
UPV.LastName = lastName;
UPV.Gender = gender;
if (roleID > 0)
UPV.LOOKUPRoleID = roleID;
UserManager UM = new UserManager();
UM.UpdateUserAccount(UPV);
return Json(new { success = true });
}
上面的方法负责收集从 视图 发送用于更新的数据。然后，它调用 UpdateUserAccount() 方法并将 UserProfileView 视图模型作为参数传递。UpdateUserData() 方法将通过 AJAX 请求进行调用。请注意，您也可以使用 Web API 通过 AJAX 发送和接收数据。虽然为了演示的简单性，我们在这里不涵盖这一点。
修改 UserManagePartial 视图
在“UserManagePartial.cshtml”中添加以下 HTML 标记：
<div id="divEdit" style="display:none">
<input type="hidden" id="hidID" />
<table>
<tr>
<td>Login Name</td>
<td>
<input type="text" id="txtLoginName" class="form-control" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="text" id="txtPassword" class="form-control" />
</td>
</tr>
<tr>
<td>First Name</td>
<td>
<input type="text" id="txtFirstName" class="form-control" />
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" id="txtLastName" class="form-control" />
</td>
</tr>
<tr>
<td>Gender</td>
<td>@Html.DropDownListFor(o => o.UserGender.SelectedGender,
new SelectList(Model.UserGender.Gender, "Value", "Text"),
"",
new { id = "ddlGender", @class="form-control" })
</td>
</tr>
<tr>
<td>Role</td>
<td>@Html.DropDownListFor(o => o.UserRoles.SelectedRoleID,
new SelectList(Model.UserRoles.UserRoleList, "LOOKUPRoleID", "RoleName"),
"",
new { id = "ddlRoles", @class="form-control" })
</td>
</tr>
</table>
</div>
上面的标记将作为用户编辑特定用户数据时出现的弹出对话框。请注意，我们正在使用 Model 中的数据填充 Gender 和 Roles 的下拉列表。
集成 jQuery 和 jQuery AJAX
在开始实现之前，了解这些技术很重要：
- jQuery 是一个轻量级且功能丰富的 JavaScript 库，它通过强大的 API 使 DOM 操作、事件处理、动画和 Ajax 更加简单，并且在所有主流浏览器上都能正常工作。
- jQueryUI 在 jQuery 库之上提供了 UI 交互、效果、小部件和主题集。
- jQuery AJAX 使您能够使用高级函数和方法与服务器上的数据进行通信，并将数据加载到客户端/浏览器。
现在切换回“UserManagePartial”视图，并在最底部添加以下脚本块：
<script type="text/javascript">
$(function () {
var initDialog = function (type) {
var title = type;
$("#divEdit").dialog({
autoOpen: false,
modal: true,
title: type + ' User',
width: 360,
buttons: {
Save: function () {
var id = $("#hidID").val();
var role = $("#ddlRoles").val();
var loginName = $("#txtLoginName").val();
var loginPass = $("#txtPassword").val();
var fName = $("#txtFirstName").val();
var lName = $("#txtLastName").val();
var gender = $("#ddlGender").val();
UpdateUser(id, loginName, loginPass, fName, lName, gender, role);
$(this).dialog("destroy");
},
Cancel: function () { $(this).dialog("destroy"); }
}
});
}
function UpdateUser(id, logName, logPass, fName, lName, gender, role) {
$.ajax({
type: "POST",
url: "@(Url.Action("UpdateUserData","Home"))",
data: { userID: id, loginName: logName, password: logPass, firstName: fName, lastName: lName, gender: gender, roleID: role },
success: function (data) {
$("#divUserListContainer").load("@(Url.Action("ManageUserPartial","Home", new { status ="update" }))");
},
error: function (error) {
//to do:
}
});
}
$("a.lnkEdit").on("click", function () {
initDialog("Edit");
$(".alert-success").empty();
var row = $(this).closest('tr');
$("#hidID").val(row.find("td:eq(0)").html().trim());
$("#txtLoginName").val(row.find("td:eq(1)").html().trim())
$("#txtPassword").val(row.find("td:eq(2)").html().trim())
$("#txtFirstName").val(row.find("td:eq(3)").html().trim())
$("#txtLastName").val(row.find("td:eq(4)").html().trim())
$("#ddlGender").val(row.find("td:eq(5)").html().trim())
$("#ddlRoles").val(row.find("td:eq(7) > input").val().trim());
$("#divEdit").dialog("open");
return false;
});
});
</script>
initDialog 通过自定义对话框来初始化 jQueryUI 对话框。我们通过添加自定义的 Save 和 Cancel 按钮对其进行了自定义，以便为每个事件编写自定义代码实现。在 Save 函数中，我们从编辑表单中提取每个值，并将这些值传递给 UpdateUser() JavaScript 函数。
UpdateUser() 函数使用 jQuery AJAX 发出 AJAX 请求。“type”参数指示请求所需的方法，在本例中，我们将类型设置为“POST”。“url”是到我们之前创建的控制器方法的路径。请注意，url 的值可以是 Web 服务、Web API 或任何托管您数据的服务。“data”是我们为需要参数的方法分配值的地方。如果服务器上的方法不需要任何参数，您可以将其留空“{}”。“success”函数通常用于在服务器的请求成功时执行某个过程。在本例中，我们加载 部分视图 以在更新数据后反映视图中的更改。请记住，我们正在向“ManageUserPartial”操作传递一个新参数，该参数指示请求的状态。
最后一个函数是在用户单击网格中的“edit”链接时打开对话框。这也是我们使用 jQuery 选择器从网格中提取数据并将提取的数据填充到对话框字段中的地方。
修改 UserManagePartial() 操作方法
如果您还记得，我们在 AJAX 请求中的 UserManagePartial 方法调用中添加了新的“status”参数，因此我们需要更新方法签名以接受该参数。现在，新方法应该如下所示：
[AuthorizeRoles("Admin")]
public ActionResult ManageUserPartial(string status = "") {
if (User.Identity.IsAuthenticated) {
string loginName = User.Identity.Name;
UserManager UM = new UserManager();
UserDataView UDV = UM.GetUserDataView(loginName);
string message = string.Empty;
if (status.Equals("update")) message = "Update Successful";
else if (status.Equals("delete")) message = "Delete Successful";
ViewBag.Message = message;
return PartialView(UDV);
}
return RedirectToAction("Index", "Home");
}
显示状态结果
如果您注意到，我们正在根据特定操作创建一个消息字符串，并将结果存储在 ViewBag 中。这是为了让用户看到某个操作是否成功。现在，在“ManageUserPartial”视图中添加以下标记：
<span class="alert-success">@ViewBag.Message</span>
测试应用
运行应用程序将产生如下输出：
单击编辑对话框后
图 5：编辑用户对话框
编辑数据
图 6：编辑用户数据
以及成功更新后：
图 7：成功更新
如果您已经走到这一步，那么恭喜您！您已准备好进入下一步。现在进入本系列的最后一部分。
删除数据
添加 DeleteUser() 方法
将以下方法添加到“UserManager”类：
public void DeleteUser(int userID) {
using(DemoDBEntities db = new DemoDBEntities()) {
using(var dbContextTransaction = db.Database.BeginTransaction()) {
try {
var SUR = db.SYSUserRoles.Where(o = > o.SYSUserID == userID);
if (SUR.Any()) {
db.SYSUserRoles.Remove(SUR.FirstOrDefault());
db.SaveChanges();
}
var SUP = db.SYSUserProfiles.Where(o = > o.SYSUserID == userID);
if (SUP.Any()) {
db.SYSUserProfiles.Remove(SUP.FirstOrDefault());
db.SaveChanges();
}
var SU = db.SYSUsers.Where(o = > o.SYSUserID == userID);
if (SU.Any()) {
db.SYSUsers.Remove(SU.FirstOrDefault());
db.SaveChanges();
}
dbContextTransaction.Commit();
} catch {
dbContextTransaction.Rollback();
}
}
}
}
上面的方法将从 SYSUserRole、SYSUserProfile 和 SYSUser 表中删除特定用户的记录。请注意，我们也使用了事务来确保如果发生问题或失败，不会提交每个表的が操作。
添加 DeleteUser() 操作方法
在“HomeController”类中添加以下代码：
[AuthorizeRoles("Admin")]
public ActionResult DeleteUser(int userID) {
UserManager UM = new UserManager();
UM.DeleteUser(userID);
return Json(new { success = true });
}
关于上面的方法没有什么太多可说的。顾名思义，它将根据 SYSUserID 删除数据库中的特定用户。
集成 jQuery 和 jQuery AJAX
在“UserManagePartial”视图的 <script> 标签中添加以下脚本：
function DeleteUser(id) {
$.ajax({
type: "POST",
url: "@(Url.Action("
DeleteUser ","
Home "))",
data: {
userID: id
},
success: function(data) {
$("#divUserListContainer").load("@(Url.Action("
ManageUserPartial ","
Home ", new { status ="
delete " }))");
},
error: function(error) {}
});
}
$("a.lnkDelete").on("click", function() {
var row = $(this).closest('tr');
var id = row.find("td:eq(0)").html().trim();
var answer = confirm("You are about to delete this user with ID " + id + " . Continue?");
if (answer) DeleteUser(id);
return false;
});
上面的代码中有两个主要函数。DeleteUser() 函数将 ID 作为参数。这个方法是我们调用我们在 Controller 中定义的 DeleteUser() 操作方法的地方。如果删除操作成功，它将重新加载用户列表。另一个函数只是将 JQuery click 事件绑定到网格中的链接。这也是我们显示确认对话框以提示用户是否要删除记录的地方。如果用户单击“yes”，它将调用 JavaScript DeleteUser() 函数来执行删除。
测试应用
以下是下面的输出：
单击删除链接后
图 8：删除确认对话框
删除后：
图 9：删除成功后
在本系列的下一部分，我们将学习如何实现一个简单的用户配置文件页面，用户可以在其中修改他们的数据。您可以在此处查看下一部分：ASP.NET MVC 5：构建你的第一个 Web 应用程序 - 第 4 部分
摘要
在本系列中，我们学习了如何在我们的 ASP.NET MVC 5 应用程序中实现基本的 FEUD 操作。我们还学习了如何使用简单的 AJAX 调用与服务器上的数据进行通信。