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系列——添加数据

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

概述

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

实现信息的明细视图

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

1 @model IEnumerable<Wolfy.FirstMVCProject.Models.Student>23 @{4     Layout = null;5 }67 <!DOCTYPE html>89 <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>2930             <th>31                电话32             </th>33             <th>34                删除35             </th>3637             <th>38                班级名称39             </th>40             <th></th>41         </tr>4243     @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>6566         </tr>67     }6869     </table>70 </body>71 </html>

右键在浏览器中查看

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

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

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

                     //Find方法和FirstOrDefault方法效果相同，都是返回满足条件的第一个元素，如果没有该元素，则返回null。

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

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

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

1 @model Wolfy.FirstMVCProject.Models.Student23 @{4     Layout = null;5 }67 <!DOCTYPE html>89 <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>2223             <dd>24                 @Html.DisplayFor(model => model.stuName)25             </dd>2627             <dt>28               性别29             </dt>3031             <dd>32                 @Html.DisplayFor(model => model.stuSex)33             </dd>3435             <dt>36               生日37             </dt>3839             <dd>40                 @Html.DisplayFor(model => model.stuBirthdate)41             </dd>4243             <dt>44                 入学时间45             </dt>4647             <dd>48                 @Html.DisplayFor(model => model.stuStudydate)49             </dd>5051             <dt>52                 地址53             </dt>5455             <dd>56                 @Html.DisplayFor(model => model.stuAddress)57             </dd>5859             <dt>60               邮箱61             </dt>6263             <dd>64                 @Html.DisplayFor(model => model.stuEmail)65             </dd>6667             <dt>68               电话69             </dt>7071             <dd>72                 @Html.DisplayFor(model => model.stuPhone)73             </dd>7475             <dt>76                是否删除77             </dt>7879             <dd>80                 @Html.DisplayFor(model => model.stuIsDel)81             </dd>8283             <dt>84                录入时间85             </dt>8687             <dd>88                 @Html.DisplayFor(model => model.stuInputtime )89             </dd>9091             <dt>92                班级93             </dt>9495             <dd>96                 @Html.DisplayFor(model => model.Course.className)97             </dd>9899         </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.Student4                           where s.stuId == id5                           select s;6             Student stu = student.FirstOrDefault();78             //查到了该学生的详细9             if (stu != null)10             {11                 //外键关系处理12                 var course = from c in entity.Course13                              where c.classId == stu.classId14                              select c;15                 stu.Course = course.FirstOrDefault();16                 //因为学生信息中有班级id的外键，所以在编辑的时候，要指定dropdownlist的数据源17                 var courses = from s in entity.Course18                               select s;1920                 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                     else30                     {31                         selectListItem = new SelectListItem() { Text = item.className, Value = item.classId.ToString() };32                     }3334                     items.Add(selectListItem);35                 }36                 ViewData[\"course\"] = items;37                 //找到该学生的信息，则在Details视图中显示，将该学生的信息对象传过去。38                 return View(\"Edit\", stu);39             }40             else41             {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             try55             {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;6364                 int intCount = entity.SaveChanges();65                 if (intCount > 0)66                 {67                     return RedirectToAction(\"Details\", new { id = student.stuId });68                 }69                 else70                 {71                     return Content(\"修改失败\");72                 }73             }74             catch (Exception)75             {7677                 return Content(\"修改失败\");78             }79         }

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

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

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

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

1 @model Wolfy.FirstMVCProject.Models.Student23 @{4     Layout = null;5 }67 <!DOCTYPE html>89 <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()1819         <div class=\"form-horizontal\">20             <h4>Student</h4>21             <hr />22             @Html.ValidationSummary(true)23             @Html.HiddenFor(model => model.stuId)2425             <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>3233             <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>4041             <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>4849             <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>5657             <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>6465             <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>7273             <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>8081             <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>8889             <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>9697             <div class=\"form-group\">98                stuClass99                 <div class=\"col-md-10\">100                     @Html.DropDownList(\"course\", String.Empty)101                     @Html.ValidationMessageFor(model => model.classId)102                 </div>103             </div>104105             <div class=\"form-group\">106                 <div class=\"col-md-offset-2 col-md-10\">107                     <input type=\"submit\" value=\"Save\" class=\"btn btn-default\" />108                 </div>109             </div>110         </div>111     }112113     <div>114         @Html.ActionLink(\"Back to List\", \"Index\")115     </div>116 </body>117 </html>

注意，为dropdownlist使用viewdata绑定数据源。
右键在浏览器中查看学生列表，然后选择一条数据进行编辑，如图所示：

修改后结果

实现信息的删除视图

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

首先打开Student控制器，追加一个删除数据的方法Delete，代码如下所示。

1         public ActionResult Delete(int id)2         {3             var student = entity.Student.Find(id);4             return View(\"Delete\", student);56         }7         [HttpPost]8         public RedirectToRouteResult Delete(int id, FormCollection collection)9         {1011             var stu = entity.Student.Find(id);1213             //因为score表中存有学生id外键，所以先删除成绩14             var scores = from s in entity.Score15                          where s.stuId == stu.stuId16                          select s;17             foreach (var item in scores)18             {19                 entity.Score.Remove(item);20             }2122             entity.Student.Remove(stu);23             entity.SaveChanges();24             return RedirectToAction(\"StudentList\");25         }26     }

这里请注意第一个没有[HttpPost]标记的Delete方法并不会将数据删除，因为如果通过GET请求而删除（或者追加、修改）删除数据的话都会打开一个安全漏洞。

然后在方法上右键，添加视图。

Delete.cshtml代码为：

1 @model Wolfy.FirstMVCProject.Models.Student23 @{4     Layout = null;5 }67 <!DOCTYPE html>89 <html>10 <head>11     <meta name=\"viewport\" content=\"width=device-width\" />12     <title>Delete</title>13 </head>14 <body>15     <h3>Are you sure you want to delete this?</h3>16     <div>17         <h4>Student</h4>18         <hr />19         <dl class=\"dl-horizontal\">20             <dt>21                 @Html.DisplayNameFor(model => model.stuName)22             </dt>2324             <dd>25                 @Html.DisplayFor(model => model.stuName)26             </dd>2728             <dt>29                 @Html.DisplayNameFor(model => model.stuSex)30             </dt>3132             <dd>33                 @Html.DisplayFor(model => model.stuSex)34             </dd>3536             <dt>37                 @Html.DisplayNameFor(model => model.stuBirthdate)38             </dt>3940             <dd>41                 @Html.DisplayFor(model => model.stuBirthdate)42             </dd>4344             <dt>45                 @Html.DisplayNameFor(model => model.stuStudydate)46             </dt>4748             <dd>49                 @Html.DisplayFor(model => model.stuStudydate)50             </dd>5152             <dt>53                 @Html.DisplayNameFor(model => model.stuAddress)54             </dt>5556             <dd>57                 @Html.DisplayFor(model => model.stuAddress)58             </dd>5960             <dt>61                 @Html.DisplayNameFor(model => model.stuEmail)62             </dt>6364             <dd>65                 @Html.DisplayFor(model => model.stuEmail)66             </dd>6768             <dt>69                 @Html.DisplayNameFor(model => model.stuPhone)70             </dt>7172             <dd>73                 @Html.DisplayFor(model => model.stuPhone)74             </dd>7576             <dt>77                 @Html.DisplayNameFor(model => model.stuIsDel)78             </dt>7980             <dd>81                 @Html.DisplayFor(model => model.stuIsDel)82             </dd>8384             <dt>85                 @Html.DisplayNameFor(model => model.stuInputtime)86             </dt>8788             <dd>89                 @Html.DisplayFor(model => model.stuInputtime)90             </dd>9192             <dt>93                 @Html.DisplayNameFor(model => model.Course.className)94             </dt>9596             <dd>97                 @Html.DisplayFor(model => model.Course.className)98             </dd>99100         </dl>101102         @using (Html.BeginForm(\"Delete\",\"Student\",FormMethod.Post)) {103             @Html.AntiForgeryToken()104105             <div class=\"form-actions no-color\">106                 <input type=\"submit\" value=\"Delete\" class=\"btn btn-default\" /> |107                 @Html.ActionLink(\"Back to List\", \"Index\")108             </div>109         }110     </div>111 </body>112 </html>

右键在浏览器中查看学生列表视图，然后选择一条学生信息，单击删除超链接。