ASP.NET MVC 音樂市集 – 5. 通過支架建立編輯表單

在上一章，我們已經從資料庫擷取資料，然後顯示出來，這一章，我們將允許編輯資料。 

建立 StoreManagerController 控制器

我們將要建立稱為 StoreManager 的控制器，對於這個控制器，我們將通過使用 ASP.NET MVC3 中提供的腳手架功能來實現。在添加控制器的視窗中，注意需要選中 為”建立”、”更新”、”刪除”和”詳細資料” 方案添加操作方法。

在我們點擊添加按鈕之後，你將會看到 ASP.NET MVC3 的支架機制已經為你在 Controllers檔案夾中添加了一個名為 StoreManagerController 的控制器。

原文中說：建立了一個帶有本地Entity Framework變數的 StoreManagerController 控制器

但是，在我的 VS2010 中實際並沒有建立Entity Framework變數，在前面的資料訪問部分，我機器上的Entity Framework也是手工下載，並安裝的。

原文還說，建立了 Create.cshtml，Delete.cshtml，Details.cshtml，Edit.cshtml，以及 Index.cshtml 視圖。 這些視圖使用了強型別的 Album 類型。

但是，在對話方塊中並沒有選擇實體類型的選項，所以，在我這裡，實際上也沒有建立相應的視圖，更沒有強型別一說了，不過，這些其實都是小問題。

新的  StoreManager 控制器包含了 CRUD （建立，讀取，更新，刪除）控制器 Action ，原文中說：這些控制器知道如何使用 Album 模型和Entity Framework的內容物件來訪問資料。

由於並沒有建立實體內容物件，所以，我這裡也沒有實際的資料存取碼存在，在下面的說明中，我們將手工建立這一部分。

所以，我們手工在控制器中增加資料訪問的實體內容物件。

namespace MvcMusicStore.Controllers
{
public class StoreManagerController : Controller
    {
        MvcMusicStore.Models.MusicStoreEntities storeDB
            = new MvcMusicStore.Models.MusicStoreEntities();

 

修改視圖

這裡我們先手工產生視圖，然後再進行修改。

首先為 Index 增加強型別的視圖。需要在對話方塊中選中 建立強型別視圖，然後，選中模型類，在支架模板中選擇 List，這是因為我們需要在 Index 視圖中處理專輯的列表。

使用 List 支架之後，建立的視圖中，模型的類型將會產生為如下的實現。

@model IEnumerable<MvcMusicStore.Models.Album>

 

記住，雖然腳手架可以為我們自動產生代碼，但只是標準的 ASP.NET MVC 代碼， 就像我們的這個教程可以節省你的學習時間一樣，支架可以節省你手工建立控制器，以及強型別視圖的時間，但是，具體的細節內容還是需要自己來處理。

所以，讓我們來快速編輯一下 StoreManager 的 Index 視圖（/Views/StoreManager/Index.cshtml）。這個視圖通過一個 table 表格顯示專輯的列表，包含專輯的公用屬性，還帶有進行編輯/詳細內容/刪除的連結。我們要刪除專輯藝術家的連結，我們不需要顯示這個值，在視圖中的 <table> 部分，刪除 AlbumArtUrl 相關的 <th> 和  <td> 元素，下面的代碼中高亮顯示的部分。

這樣， Index 視圖的代碼應該如下所示：

@model IEnumerable<MvcMusicStore.Models.Album> 
@{ 
    ViewBag.Title = "Index"; 
}
<h2>
    Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
            Genre
</th>
<th>
            Artist
</th>
<th>
            Title
</th>
<th>
            Price
</th>
<th>
</th>
</tr>
    @foreach (var item in Model)
    { 
<tr>
<td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
</td>
<td>
                @Truncate(item.Artist.Name, 25)
</td>
<td>
                @Truncate(item.Title, 25)
</td>
<td>
                @Html.DisplayFor(modelItem => item.Price)
</td>
<td>
                @Html.ActionLink("Edit", "Edit", new { id = item.AlbumId }) |
                @Html.ActionLink("Details", "Details", new { id = item.AlbumId }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.AlbumId })
</td>
</tr> 
    }
</table>

Store Manager 的第一印象

視圖雖然修改完成了，但是 Index 方法中還沒有向視圖提供資料的代碼，修改 Index 方法，增加從資料庫中擷取資料的處理邏輯。

public ActionResult Index()
{
var albums = storeDB.Albums.Include("Genre").Include("Artist");
return View(albums.ToList());
}

 

現在，運行程式，瀏覽 /StoreManager，注意，在路由的配置中，預設的 Action 將會使用 Index，修改之後的視圖顯示了帶有編輯，詳細內容和刪除連結的專輯列表。

需要注意的是，編輯、詳細內容和刪除連結的視圖需要我們手工建立之後才能使用。

我們依次建立這些視圖。將游標放置在 Edit 的 Action 方法內，單擊滑鼠右鍵，在快顯功能表中選擇添加視圖。

建立編輯檢視的對話方塊，注意使用的支架為 Edit。

                       

同樣，修改 Edit 的 Action 方法。

需要注意的是，你會看到在 Controller 中存在兩個同名的 Edit 方法，第二個方法前面使用了 [HttpPost] 標籤，這個標籤標識當請求類型為 Post 方式的時候，將會由這個方法進行請求的處理，否則，使用第一個 Edit 方法進行處理。

在 ASP.NET MVC 中，已經不再使用檢視狀態了，在需要使用者編輯資料的時候，我們首先提供一個編輯表單，使用者得到這個編輯表單的方式一般是通過某個超級連結，這樣的請求方式將是 GET 請求，當這樣的請求到達伺服器的時候，我們向用戶端返回編輯頁面，允許使用者編輯資料。

在編輯資料的表單中，我們提供一個 form 表單，這個表單的提交方式設定為 Post 方式，使用者在提交表單的時候，將填寫的資料提交到伺服器。由於此時的提交方式成為  Post 方式，這就允許我們在伺服器上通過請求的提交方式區分出來請求的類型。

這樣，我們就可以在 Controlller 中提供同名的 Action 來處理使用者的編輯操作，Get 方式的 Action 用來提供編輯表單，而 Post 方式的 Action 用來擷取使用者提交的資料。這種方式在 ASP.NET MVC 中使用很多。

修改後的 Edit 方法如下所示：

public ActionResult Edit(int id)
{
    MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
return View(album);
}

//
// POST: /StoreManager/Edit/5

[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
    {
// TODO: Add update logic here
        MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
if (this.TryUpdateModel<MvcMusicStore.Models.Album>(album))
        {
return RedirectToAction("Index");
        }
return View();
    }
catch
    {
return View();
    }
}

 

建立詳細內容視圖。注意使用的支架。

相應修改 Details 方法的處理邏輯。

//
// GET: /StoreManager/Details/5

public ViewResult Details(int id)
{
    MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
return View(album);
}

 

建立刪除視圖的對話方塊，注意使用的支架模板。

同樣， Delete 方法也有兩個，一個用來處理 Get 方式的請求，一個用來處理點擊確認刪除之後的請求。

public ActionResult Delete(int id)
{
    MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
return View(album);

}
//
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
    {
// TODO: Add delete logic here
        MvcMusicStore.Models.Album album = storeDB.Albums.Find(id);
        storeDB.Albums.Remove(album);

return RedirectToAction("Index");
    }
catch
    {
return View();
    }
}

 

現在，可以運行一下了，訪問 /StoreManager 可以得到如下的結果。

點擊編輯連結，將會顯示一個帶有專輯欄位的編輯表單。

點擊位於底部的返回列錶鏈接，然後，點擊詳細內容連結， 將會顯示單個專輯的詳細資料。

再來一次，回到列表，點擊刪除連結，現在將會看到一個確認對話方塊，顯示了專輯的詳細內容，請你確認是否真的需要刪除。

點擊底部的刪除按鈕，將會刪除這個專輯，然後返回 Index 列表視圖，專輯已經被刪除了。

我們的工作還沒有完成，我們要開始對控制器和視圖的 CRUD 操作進行處理了。