Asp.net MVC]Asp.net MVC5系列——实现编辑、删除与明细信息视图

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

系列文章

[Asp.net MVC]Asp.net MVC5系列——第一个项目

[Asp.net MVC]Asp.net MVC5系列——添加视图

[Asp.net MVC]Asp.net MVC5系列——添加模型

[Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据

[Asp.net MVC]Asp.net MVC5系列——添加数据

[Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则

概述

上篇文章介绍了，在提交表单时对数据的验证规则，在提交的数据合法时，将数据添加到数据库，也就是实现了信息的增加视图。这篇文章将实现查看明细，编辑，删除视图。

实现信息的明细视图

首先，让我们来看一下如何实现一条数据的明细信息视图。为了更好地体会这一功能，首先我们在前文所述的学生信息列表视图（Views文件夹下面的Student文件夹下面的StudentList.cshtml文件）中保留学生信息的姓名、性别、地址、电话、班级等字段。修改后的学生列表视图代码：

 1 @model IEnumerable<Wolfy.FirstMVCProject.Models.Student>
 2 
 3 @{
 4     Layout = null;
 5 }
 6 
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <title>学生信息</title>
13 </head>
14 <body>
15     <p>
16         @Html.ActionLink("添加", "Create")
17     </p>
18     <table class="table">
19         <tr>
20             <th>
21                姓名
22             </th>
23             <th>
24               性别
25             </th>
26             <th>
27                地址
28             </th>
29             
30             <th>
31                电话
32             </th>
33             <th>
34                删除
35             </th>
36            
37             <th>
38                班级名称
39             </th>
40             <th></th>
41         </tr>
42     
43     @foreach (var item in Model) {
44         <tr>
45             <td>
46                 @Html.DisplayFor(modelItem => item.stuName)
47             </td>
48             <td>
49                 @Html.DisplayFor(modelItem => item.stuSex)
50             </td>
51             <td>
52                 @Html.DisplayFor(modelItem => item.stuAddress)
53             </td>
54             <td>
55                 @Html.DisplayFor(modelItem => item.stuPhone)
56             </td>
57             <td> 
58                 @Html.DisplayFor(modelItem => item.Course.className)
59             </td>
60             <td>
61                 @Html.ActionLink("编辑", "Edit", new { id=item.stuId }) |
62                 @Html.ActionLink("详细", "Details", new { id=item.stuId }) |
63                 @Html.ActionLink("删除", "Delete", new { id=item.stuId })
64             </td>
65             
66         </tr>
67     }
68     
69     </table>
70 </body>
71 </html>

右键在浏览器中查看

现在学生列表中就只显示每条数据的姓名、性别、地址、电话、班级名称了，如果想查看该条数据的详细信息，需要点击每条数据的“详细”链接，将画面导航到明细数据画面，在该画面中查看这条数据的明细信息。当一条数据的细节信息比较多，而我们只想在该数据的列举清单中显示该数据的几个摘要信息，通过点击链接或按钮的操作来查看数据的细节信息时这种处理方法是比较有用的。

接下来让我们来追加这个明细数据视图。首先打开Student控制器，追加一个返回明细数据视图的Details方法，代码如下所示复制代码 1 /// <summary> 2 /// 学生信息详细Acti</summary>

 4         /// <param name="id"></param>
 5         /// <returns></returns>
 6         public ActionResult Details(int id)
 7         {
 8             var student = from s in entity.Student
 9                           where s.stuId == id
10                           select s;

都是返回满足条件的第一个元素，如果没有该元素，则返回null。

 student.FirstOrDefault();
12             //查到了该学生的详细
13             if (stu != null)
14             {
15                 //找到该学生的信息，则在Details视图中显示，将该学生的信息对象传过去。
16                 return View("Details",stu);
17             }
18             else
19             {
20                 //没有查到学生信息明细，则返回学生列表
21                 return RedirectToAction("StudentList");
22             }
23 
24         }

在Details方法中点击鼠标右键，选择“添加视图”，模型类选择Student,在支架模板中选择“Details”（明细数据），如图所示。

如果要创建中文网站或应用程序，则将默认生成的Details.cshtml文件中有关英文文字修改为中文，修改完毕后该文件中的代码如下所示。

  1 @model Wolfy.FirstMVCProject.Models.Student
  2 
  3 @{
  4     Layout = null;
  5 }
  6 
  7 <!DOCTYPE html>
  8 
  9 <html>
 10 <head>
 11     <meta name="viewport" content="width=device-width" />
 12     <title>Details</title>
 13 </head>
 14 <body>
 15     <div>
 16         <h4>Student</h4>
 17         <hr />
 18         <dl class="dl-horizontal">
 19             <dt>
 20                 姓名
 21             </dt>
 22     
 23             <dd>
 24                 @Html.DisplayFor(model => model.stuName)
 25             </dd>
 26     
 27             <dt>
 28               性别
 29             </dt>
 30     
 31             <dd>
 32                 @Html.DisplayFor(model => model.stuSex)
 33             </dd>
 34     
 35             <dt>
 36               生日
 37             </dt>
 38     
 39             <dd>
 40                 @Html.DisplayFor(model => model.stuBirthdate)
 41             </dd>
 42     
 43             <dt>
 44                 入学时间
 45             </dt>
 46     
 47             <dd>
 48                 @Html.DisplayFor(model => model.stuStudydate)
 49             </dd>
 50     
 51             <dt>
 52                 地址
 53             </dt>
 54     
 55             <dd>
 56                 @Html.DisplayFor(model => model.stuAddress)
 57             </dd>
 58     
 59             <dt>
 60               邮箱
 61             </dt>
 62     
 63             <dd>
 64                 @Html.DisplayFor(model => model.stuEmail)
 65             </dd>
 66     
 67             <dt>
 68               电话
 69             </dt>
 70     
 71             <dd>
 72                 @Html.DisplayFor(model => model.stuPhone)
 73             </dd>
 74     
 75             <dt>
 76                是否删除
 77             </dt>
 78     
 79             <dd>
 80                 @Html.DisplayFor(model => model.stuIsDel)
 81             </dd>
 82     
 83             <dt>
 84                录入时间
 85             </dt>
 86     
 87             <dd>
 88                 @Html.DisplayFor(model => model.stuInputtime )
 89             </dd>
 90     
 91             <dt>
 92                班级
 93             </dt>
 94     
 95             <dd>
 96                 @Html.DisplayFor(model => model.Course.className)
 97             </dd>
 98     
 99         </dl>
100     </div>
101     <p>
102         @Html.ActionLink("Edit", "Edit", new { id = Model.stuId }) |
103         @Html.ActionLink("Back to List", "StudentList")
104     </p>
105 </body>
106 </html>

重新运行应用程序，在学生信息列表中点击某个学生的“详细”链接

通过观察地址栏你会发现：http://localhost:4585/Student/Details/9，在url中最后一个9就是学生的id，这个参数是如何传递的呢？

在学生列表视图代码中你会发现类似如下的代码：

 @Html.ActionLink("详细", "Details", new { id=item.stuId })

其中id为url中参数的名称，然后我们看一下action方法中的参数也为id，这两者是否必须对应呢？那么，我们修改一下Details方法中的参数名称，测试一下。

将Details方法的参数名改为intI的，然后运行，则会出现如下的信息。

可见，视图中传递的参数名和Action中的参数名必须一样。

实现信息的编辑视图

接下来，让我们来看一下如何实现一个用来修改数据的视图。

首先打开Student控制器，追加一个返回数据修改视图的Edit方法与一个对该视图中的表单提交进行处理的Edit方法，代码如下所示。

 1         public ActionResult Edit(int id)
 2         {
 3             var student = from s in entity.Student
 4                           where s.stuId == id
 5                           select s;
 6             Student stu = student.FirstOrDefault();
 7 
 8             //查到了该学生的详细
 9             if (stu != null)
10             {
11                 //外键关系处理
12                 var course = from c in entity.Course
13                              where c.classId == stu.classId
14                              select c;
15                 stu.Course = course.FirstOrDefault();
16                 //因为学生信息中有班级id的外键，所以在编辑的时候，要指定dropdownlist的数据源
17                 var courses = from s in entity.Course
18                               select s;
19 
20                 List<SelectListItem> items = new List<SelectListItem>();
21                 foreach (var item in courses)
22                 {
23                     SelectListItem selectListItem = null;
24                     //当前学生所在的班级被选中
25                     if (item.classId == stu.classId)
26                     {
27                         selectListItem = new SelectListItem() { Text = item.className, Value = item.classId.ToString(), Selected = true };
28                     }
29                     else
30                     {
31                         selectListItem = new SelectListItem() { Text = item.className, Value = item.classId.ToString() };
32                     }
33 
34                     items.Add(selectListItem);
35                 }
36                 ViewData["course"] = items;
37                 //找到该学生的信息，则在Details视图中显示，将该学生的信息对象传过去。
38                 return View("Edit", stu);
39             }
40             else
41             {
42                 //没有查到学生信息明细，则返回学生列表
43                 return RedirectToAction("StudentList");
44             }
45         }
46         /// <summary>
47         /// 处理post请求的action方法，也就是修改后提交的数据
48         /// </summary>
49         /// <param name="id"></param>
50         /// <returns></returns>
51         [HttpPost]
52         public ActionResult Edit(Student student)
53         {
54             try
55             {
56                 var stu = entity.Student.Find(student.stuId);
57                 //处理学生所在的班级
58                 string strCourseId = Request.Form["course"];
59                 //作为测试，我们只修改性别和班级
60                 stu.stuSex = student.stuSex;
61                 stu.classId = Convert.ToInt32(strCourseId);
62                 entity.Entry<Student>(stu).State = System.Data.Entity.EntityState.Modified;
63 
64                 int intCount = entity.SaveChanges();
65                 if (intCount > 0)
66                 {
67                     return RedirectToAction("Details", new { id = student.stuId });
68                 }
69                 else
70                 {
71                     return Content("修改失败");
72                 }
73             }
74             catch (Exception)
75             {
76 
77                 return Content("修改失败");
78             }
79         }

这两个Edit方法中，第一个方法将在用户点击外部画面的“编辑”链接时被调用,用来在浏览器中显示数据修改视图，并且在该视图中显示用户选择编辑的数据。第二个Edit方法前面带有一个[HttpPost]标记，负责将修改数据视图中提交的表单数据绑定到一个用模型创建出来的Student对象实例之上（当用户在表单中完成数据修改并点击保存按钮的时候进行提交），在保存数据的过程中如果发生任何错误而导致保存失败的话，则提示修改失败文字信息。

（作为测试用，我们只修改性别和班级的信息）

接下来让我们来追加该数据修改视图、在Edit方法中点击鼠标右键，选择“添加视图”，模型类选择Student,在支架模板中选择“Edit”（修改数据），如图所示。

如果要创建中文网站或应用程序，则将默认生成的Edit.cshtml文件代码如下所示。

  1 @model Wolfy.FirstMVCProject.Models.Student
  2 
  3 @{
  4     Layout = null;
  5 }
  6 
  7 <!DOCTYPE html>
  8 
  9 <html>
 10 <head>
 11     <meta name="viewport" content="width=device-width" />
 12     <title>Edit</title>
 13 </head>
 14 <body>
 15     @using (Html.BeginForm("Edit","Student",FormMethod.Post))
 16     {
 17         @Html.AntiForgeryToken()
 18         
 19         <div class="form-horizontal">
 20             <h4>Student</h4>
 21             <hr />
 22             @Html.ValidationSummary(true)
 23             @Html.HiddenFor(model => model.stuId)
 24     
 25             <div class="form-group">
 26                 @Html.LabelFor(model => model.stuName, new { @class = "control-label col-md-2" })
 27                 <div class="col-md-10">
 28                     @Html.EditorFor(model => model.stuName)
 29                     @Html.ValidationMessageFor(model => model.stuName)
 30                 </div>
 31             </div>
 32     
 33             <div class="form-group">
 34                 @Html.LabelFor(model => model.stuSex, new { @class = "control-label col-md-2" })
 35                 <div class="col-md-10">
 36                     @Html.EditorFor(model => model.stuSex)
 37                     @Html.ValidationMessageFor(model => model.stuSex)
 38                 </div>
 39             </div>
 40     
 41             <div class="form-group">
 42                 @Html.LabelFor(model => model.stuBirthdate, new { @class = "control-label col-md-2" })
 43                 <div class="col-md-10">
 44                     @Html.EditorFor(model => model.stuBirthdate)
 45                     @Html.ValidationMessageFor(model => model.stuBirthdate)
 46                 </div>
 47             </div>
 48     
 49             <div class="form-group">
 50                 @Html.LabelFor(model => model.stuStudydate, new { @class = "control-label col-md-2" })
 51                 <div class="col-md-10">
 52                     @Html.EditorFor(model => model.stuStudydate)
 53                     @Html.ValidationMessageFor(model => model.stuStudydate)
 54                 </div>
 55             </div>
 56     
 57             <div class="form-group">
 58                 @Html.LabelFor(model => model.stuAddress, new { @class = "control-label col-md-2" })
 59                 <div class="col-md-10">
 60                     @Html.EditorFor(model => model.stuAddress)
 61                     @Html.ValidationMessageFor(model => model.stuAddress)
 62                 </div>
 63             </div>
 64     
 65             <div class="form-group">
 66                 @Html.LabelFor(model => model.stuEmail, new { @class = "control-label col-md-2" })
 67                 <div class="col-md-10">
 68                     @Html.EditorFor(model => model.stuEmail)
 69                     @Html.ValidationMessageFor(model => model.stuEmail)
 70                 </div>
 71             </div>
 72     
 73             <div class="form-group">
 74                 @Html.LabelFor(model => model.stuPhone, new { @class = "control-label col-md-2" })
 75                 <div class="col-md-10">
 76                     @Html.EditorFor(model => model.stuPhone)
 77                     @Html.ValidationMessageFor(model => model.stuPhone)
 78                 </div>
 79             </div>
 80     
 81             <div class="form-group">
 82                 @Html.LabelFor(model => model.stuIsDel, new { @class = "control-label col-md-2" })
 83                 <div class="col-md-10">
 84                     @Html.EditorFor(model => model.stuIsDel)
 85                     @Html.ValidationMessageFor(model => model.stuIsDel)
 86                 </div>
 87             </div>
 88     
 89             <div class="form-group">
 90                 @Html.LabelFor(model => model.stuInputtime, new { @class = "control-label col-md-2" })
 91                 <div class="col-md-10">
 92                     @Html.EditorFor(model => model.stuInputtime)
 93                     @Html.ValidationMessageFor(model => model.stuInputtime)
 94                 </div>
 95             </div>
 96     
 97             <div class="form-group">
 98                stuClass
 99                 <div class="col-md-10">
100                     @Html.DropDownList("course", String.Empty)
101                     @Html.ValidationMessageFor(model => model.classId)
102                 </div>
103             </div>
104     
105             <div class="form-group">
106                 <div cl