MVC5 + EF6 + Bootstrap3 (13) 查看詳情、編輯數據、刪除數據

本文轉載自查看原文 2015-01-13 07:04 16179 MVC5 + EF6 + Bootstrap3/ ASP.NET/ Bootstrap/ Entity Framework/ MVC

Slark.NET-博客園 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-rud.html

系列教程：MVC5 + EF6 + Bootstrap3

上一節：MVC5 + EF6 + Bootstrap3 (12) 新建數據

下一節：MVC5 + EF6 + Bootstrap3 (14) 分部視圖PartialView

源碼下載：點我下載

前言

所謂萬事開頭難，前面用兩節介紹了查詢頁面，一節介紹了創建數據。由於前面做了大量的鋪墊，本節就能順利的將查看詳情、編輯數據、刪除數據在一節中全部介紹給大家。前后這幾節加起來就完成了一個簡單信息系統的增刪改查(CRUD)的所有操作。

添加鏈接

要進行這三個操作，首先在查詢頁面的每一條記錄后面添加對應的鏈接。代碼如下：

<tr>
    <td>
        @Html.DisplayFor(modelItem => item.FirstName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.LastName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Sex)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Rating)
    </td>
    <td> @Html.ActionLink("Details","Details", new { id = item.ID }) | 
        @Html.ActionLink("Edit", "Edit" , new { id = item.ID }) | 
        @Html.ActionLink("Delete", "Delete", new { id = item.ID })
    </td>
</tr>

上面代碼對應着數據列表的一行，其中黃色的部分就是我們添加的鏈接。這三個鏈接對應三個不同的操作，他們都需要ID作為參數來確定操作的是哪一條數據，改動后的頁面顯示如下：

紅框部分就是我們添加的鏈接。

查看詳情

查看詳情對應Details鏈接。點擊鏈接之后會請求當前Contoller，也就是CompanyController的Details Action。那么我們就在~\Controllers\CompanyController.cs下寫這個Action。代碼如下：

 1 public ActionResult Details(int? id)
 2 {
 3     if (id == null)
 4     {
 5         return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
 6     }
 7     Worker worker = db.Workers.Find(id);
 8     if (worker == null)
 9     {
10         return HttpNotFound();
11     }
12     return View(worker);        
13 }

第3-6行表示如果訪問這個Actions時沒有給參數id則返回BadRequest錯誤。如下圖所示，地址欄里面沒有給出ID，返回Bad Request錯誤。

第7-11行表示如果根據id沒有找到對應的信息則返回HttpNotFound錯誤，如下圖所示：

第12行，如果根據id找到了對應的信息則用View顯示。

在~Views\Company\下創建Details.cshtml視圖，寫入代碼如下：

 1 @model SlarkInc.Models.Worker
 2 @{
 3     ViewBag.Title = "Details";
 4 }
 5 <h2>Worker Details</h2>
 6 <div>
 7     <h4>Worker</h4>
 8     <hr />
 9     <dl class="dl-horizontal">
10         <dt>
11             @Html.DisplayNameFor(model => model.FirstName)
12         </dt>
13         <dd>
14             @Html.DisplayFor(model => model.FirstName)
15         </dd>
16         <dt>
17             @Html.DisplayNameFor(model => model.LastName)
18         </dt>
19         <dd>
20             @Html.DisplayFor(model => model.LastName)
21         </dd>
22         <dt>
23             @Html.DisplayNameFor(model => model.Sex)
24         </dt>
25         <dd>
26             @Html.DisplayFor(model => model.Sex)
27         </dd>
28         <dt>
29             @Html.DisplayNameFor(model => model.Rating)
30         </dt>
31         <dd>
32             @Html.DisplayFor(model => model.Rating)
33         </dd>
34     </dl>
35 </div>
36 <p>
37     @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
38     @Html.ActionLink("Back to List", "Index")
39 </p>

代碼中用DisplayNameFor函數顯示屬性名，用DisplayFor函數顯示屬性值。

頁面用<dl><dt><dd>和Bootstrap的"dl-horizontal"類布局頁面，使每一個屬性名和屬性值占一行，顯示效果如下：

第37行給出了編輯此頁面的鏈接。38行給出返回查詢頁面的鏈接。

編輯數據

在~\Controllers\CompanyController.cs中加入用來進入Edit頁面的Action代碼如下：

public ActionResult Edit(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Worker worker = db.Workers.Find(id);
    if (worker == null)
    {
        return HttpNotFound();
    }
    return View(worker);
}

看起來眼熟？沒錯，和Details的Action是一模一樣的，這里就不重復了。

下面寫View。在~\Views\Company\下創建Edit.cshtml視圖，寫入代碼如下：

 1 @model SlarkInc.Models.Worker
 2 @{
 3     ViewBag.Title = "Edit";
 4 }
 5 <h2>Worker Edit</h2>
 6 @using (Html.BeginForm())
 7 {
 8     @Html.AntiForgeryToken()
 9     <div class="form-horizontal">
10         <hr />
11         @Html.ValidationSummary(true)
12         @Html.HiddenFor(model => model.ID) 13         <div class="form-group">
14             @Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2" })
15             <div class="col-md-10">
16                 @Html.EditorFor(model => model.FirstName)
17                 @Html.ValidationMessageFor(model => model.FirstName)
18             </div>
19         </div>
20         <div class="form-group">
21             @Html.LabelFor(model => model.LastName, new { @class = "control-label col-md-2" })
22             <div class="col-md-10">
23                 @Html.EditorFor(model => model.LastName)
24                 @Html.ValidationMessageFor(model => model.LastName)
25             </div>
26         </div>
27         <div class="form-group">
28             @Html.LabelFor(model => model.Sex, new { @class = "control-label col-md-2" })
29             <div class="col-md-10">
30                 @Html.EnumDropDownListFor(model => model.Sex)
31                 @Html.ValidationMessageFor(model => model.Sex)
32             </div>
33         </div>
34         <div class="form-group">
35             @Html.LabelFor(model => model.Rating, new { @class = "control-label col-md-2" })
36             <div class="col-md-10">
37                 @Html.EditorFor(model => model.Rating)
38                 @Html.ValidationMessageFor(model => model.Rating)
39             </div>
40         </div>
41         <div class="form-group">
42             <div class="col-md-offset-2 col-md-10">
43                 @Html.Submit("Submit")
44             </div>
45         </div>
46     </div>
47 }
48 <div>
49     @Html.ActionLink("Back to List", "Index")
50 </div>

這個頁面的代碼與上一節的插入數據頁面的代碼基本相同，可以參照上一節的代碼說明，需要看的點這里。

第12行用HiddenFor函數儲存當前要修改的記錄的ID以便提交后找到對應的記錄進行更新。

頁面顯示如下：

接下來我們來寫提交更新數據之后需要訪問的Action，在~\Controllers\Company.cs中加入用Post方法訪問的Edit Action，代碼如下：

 1 [HttpPost]
 2 [ValidateAntiForgeryToken]
 3 public ActionResult Edit([Bind(Include = "ID, FirstName, LastName, Sex, Rating")] Worker worker)
 4 {
 5     if (ModelState.IsValid)
 6     {
 7         db.Entry(worker).State = EntityState.Modified;  8         db.SaveChanges();
 9         return RedirectToAction("Index");
10     }
11     return View(worker);
12 }

這段帶碼的知識點講解與上一節Create提交Action的基本相同，點擊這里查看。

不同點是第7行，根據獲得的worker實例，在數據列表中找到對應記錄，更新其值，並設置其狀態為Modified。最后將改動保存到數據庫並跳轉回數據查詢頁面。

刪除數據

刪除數據不需要頁面顯示數據，只需在CompanyController下加入一個Delete Action刪除數據即可，代碼如下：

 1 public ActionResult Delete(int id)
 2 {
 3     try
 4     {
 5         Worker workerToDelete = new Worker() { ID = id };
 6         db.Entry(workerToDelete).State = EntityState.Deleted;
 7         db.SaveChanges();
 8     }
 9     catch(DataException/*dex*/)
10     {
11         return RedirectToAction("Index", new { id = id, saveChangesError = true });
12     }
13     return RedirectToAction("Index");
14 }