[Asp.net MVC]Asp.net MVC5系列——實現編輯、刪除與明細信息視圖

本文轉載自查看原文 2014-08-09 21:43 12758 編輯/ 明細/ asp.net mvc5/ [ASP.NET MVC]/ 刪除

系列文章

[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         /// 學生信息詳細Action
 3         /// </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;
11             Student stu = 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 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     }
112     
113     <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);
 5            
 6         }
 7         [HttpPost]
 8         public RedirectToRouteResult Delete(int id, FormCollection collection)
 9         {
10 
11             var stu = entity.Student.Find(id);
12 
13             //因為score表中存有學生id外鍵，所以先刪除成績
14             var scores = from s in entity.Score
15                          where s.stuId == stu.stuId
16                          select s;
17             foreach (var item in scores)
18             {
19                 entity.Score.Remove(item);
20             }
21 
22             entity.Student.Remove(stu);
23             entity.SaveChanges();
24             return RedirectToAction("StudentList");
25         }
26     }

這里請注意第一個沒有[HttpPost]標記的Delete方法並不會將數據刪除，因為如果通過GET請求而刪除（或者追加、修改）刪除數據的話都會打開一個安全漏洞。

然后在方法上右鍵，添加視圖。

Delete.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>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>
 23     
 24             <dd>
 25                 @Html.DisplayFor(model => model.stuName)
 26             </dd>
 27     
 28             <dt>
 29                 @Html.DisplayNameFor(model => model.stuSex)
 30             </dt>
 31     
 32             <dd>
 33                 @Html.DisplayFor(model => model.stuSex)
 34             </dd>
 35     
 36             <dt>
 37                 @Html.DisplayNameFor(model => model.stuBirthdate)
 38             </dt>
 39     
 40             <dd>
 41                 @Html.DisplayFor(model => model.stuBirthdate)
 42             </dd>
 43     
 44             <dt>
 45                 @Html.DisplayNameFor(model => model.stuStudydate)
 46             </dt>
 47     
 48             <dd>
 49                 @Html.DisplayFor(model => model.stuStudydate)
 50             </dd>
 51     
 52             <dt>
 53                 @Html.DisplayNameFor(model => model.stuAddress)
 54             </dt>
 55     
 56             <dd>
 57                 @Html.DisplayFor(model => model.stuAddress)
 58             </dd>
 59     
 60             <dt>
 61                 @Html.DisplayNameFor(model => model.stuEmail)
 62             </dt>
 63     
 64             <dd>
 65                 @Html.DisplayFor(model => model.stuEmail)
 66             </dd>
 67     
 68             <dt>
 69                 @Html.DisplayNameFor(model => model.stuPhone)
 70             </dt>
 71     
 72             <dd>
 73                 @Html.DisplayFor(model => model.stuPhone)
 74             </dd>
 75     
 76             <dt>
 77                 @Html.DisplayNameFor(model => model.stuIsDel)
 78             </dt>
 79     
 80             <dd>
 81                 @Html.DisplayFor(model => model.stuIsDel)
 82             </dd>
 83     
 84             <dt>
 85                 @Html.DisplayNameFor(model => model.stuInputtime)
 86             </dt>
 87     
 88             <dd>
 89                 @Html.DisplayFor(model => model.stuInputtime)
 90             </dd>
 91     
 92             <dt>
 93                 @Html.DisplayNameFor(model => model.Course.className)
 94             </dt>
 95     
 96             <dd>
 97                 @Html.DisplayFor(model => model.Course.className)
 98             </dd>
 99     
100         </dl>
101     
102         @using (Html.BeginForm("Delete","Student",FormMethod.Post)) {
103             @Html.AntiForgeryToken()
104     
105             <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>

右鍵在瀏覽器中查看學生列表視圖，然后選擇一條學生信息，單擊刪除超鏈接。

點擊刪除按鈕，該條數據將被刪除，瀏覽器中返回顯示學生列表頁面。

總結

最后，我們添加代碼與視圖模板來創建了數據的修改視圖，刪除視圖與明細數據視圖。一個簡單的ASP.NET MVC5項目也算完成了。一個小demo也基本上包括增刪改查的操作，接下來，將深入學習一下理論，用理論來支撐之前的實踐。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Asp.net MVC]Asp.net MVC5系列——實現編輯、刪除與明細信息視圖三、添加視圖View（ASP.NET MVC5 系列） [Asp.net MVC]Asp.net MVC5系列——布局視圖 Asp.net MVC]Asp.net MVC5系列——添加視圖 [Asp.net MVC]Asp.net MVC5系列——添加視圖 Asp.net mvc5 系列筆記 ASP.NET MVC5（一）：ASP.NET MVC概覽 ASP.NET MVC 5 - 開始MVC5之旅 ASP.NET MVC5（二）：控制器、視圖與模型 ASP.NET MVC5高級編程之視圖