目錄
概述
實作資訊的明細視圖
實作資訊的編輯視圖
實作資訊的删除視圖
總結
系列文章
[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 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;
//Find方法和FirstOrDefault方法效果相同，都是傳回滿足條件的第一個元素，如果沒有該元素，則傳回null。 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也基本上包括增删改查的操作，接下來，将深入學習一下理論，用理論來支撐之前的實踐。