ASP.NET MVC 4 協助程式、表單和驗證

發行項
11/21/2024

在 ASP.NET MVC 4 模型和資料存取 實際操作實驗室中，您已從資料庫載入和顯示數據。在此實際操作實驗室中，您會將新增至 音樂市 集應用程式，以編輯該數據。

考慮到這個目標，您必須先建立控制器，以支援專輯的建立、讀取、更新和刪除（CRUD）動作。您將產生索引檢視範本，利用 ASP.NET MVC 的 Scaffolding 功能，在 HTML 數據表中顯示專輯的屬性。若要增強該檢視，您將新增自定義 HTML 協助程式，以截斷完整描述。

之後，您將新增 [編輯] 和 [建立檢視]，讓您改變資料庫中的專輯，並透過下拉式清單等窗體元素的協助。

最後，您會讓使用者刪除專輯，也會藉由驗證其輸入來防止他們輸入錯誤數據。

此實際操作實驗室假設您具備 ASP.NET MVC 的基本知識。如果您之前未使用 過 ASP.NET MVC ，建議您 ASP.NET MVC 基本 概念實際操作實驗室。

此實驗室會逐步引導您完成先前所描述的增強功能和新功能，方法是將次要變更套用至 Source 資料夾中提供的範例 Web 應用程式。

注意

所有範例程式代碼和代碼段都包含在 Web Camp 訓練工具包中，可在 Microsoft-Web/WebCampTrainingKit 版本取得。此實驗室專屬的專案可在MVC 4協助程式、表單和驗證 ASP.NET 取得。

目標

在此實際操作實驗室中，您將瞭解如何：

建立控制器以支援 CRUD 作業
產生索引檢視以在 HTML 數據表中顯示實體屬性
新增自訂 HTML 協助程式
建立和自定義編輯檢視
區分回應 HTTP-GET 或 HTTP-POST 呼叫的動作方法
新增和自定義建立檢視
處理刪除實體
驗證用戶輸入

必要條件

您必須有下列專案才能完成此實驗室：

Microsoft Visual Studio Express 2012 for Web 或更上層版本（如需如何安裝它的指示，請參閱附錄 A ）。

設定

安裝程式碼片段

為方便起見，您將在本實驗中管理的大部分程式碼都以 Visual Studio 程式碼片段的形式提供。若要安裝程式碼片段，請執行 .\Source\Setup\CodeSnippets.vsi 檔案。

如果您不熟悉 Visual Studio 代碼段，而且想要瞭解如何使用這些代碼段，您可以參閱本檔中的附錄「附錄 B：使用代碼段」。

練習

下列練習組成此實際操作實驗室：

建立市集管理員控制器及其索引檢視
新增 HTML 協助程式
建立編輯檢視
新增建立檢視
處理刪除
新增驗證
在用戶端使用Unobtrusive jQuery

注意

每個練習都附有一個 End 資料夾，其中包含完成練習後應獲得的結果解決方案。如果您需要其他幫助來完成練習，您可以使用此解決方案作為指南。

完成這個實作教室的預估時間：60 分鐘

練習 1：建立市集管理員控制器及其索引檢視

在此練習中，您將瞭解如何建立新的控制器以支援 CRUD 作業、自定義其 Index 動作方法，以從資料庫傳回專輯清單，最後產生索引檢視範本，以利用 ASP.NET MVC 的 Scaffolding 功能，在 HTML 數據表中顯示專輯的屬性。

工作 1 - 建立 StoreManagerController

在這項工作中，您將建立名為 StoreManagerController 的新控制器，以支援 CRUD 作業。

開啟位於 Source/Ex1-CreatingTheStoreManagerController/Begin/ 資料夾的 Begin 方案。
1. 您必須先下載一些遺漏的 NuGet 套件，才能繼續。為此，請按一下專案功能表並選擇管理 NuGet 套件。
2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。
3. 最後，透過點擊 Build | Build Solution 來建立解決方案。
  
  注意
  
  使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。
新增控制器。若要這樣做，請以滑鼠右鍵按兩下 方案總管內的Controllers資料夾，選取[新增]，然後選取 [控制器] 命令。將控制器名稱變更為 StoreManagerController，並確定已選取空白讀取/寫入動作的 MVC 控制器選項。 按一下新增。

新增控制器對話框

會產生新的Controller類別。由於您指示要新增這些動作的 stub 方法，因此會使用填入 TODO 批注來建立常見的 CRUD 動作，提示包含應用程式特定邏輯。

工作 2 - 自定義 StoreManager 索引

在這項工作中，您將自定義 StoreManager Index 巨集指令方法，以從資料庫傳回具有專輯清單的 View。

在 StoreManagerController 類別中，新增下列 using 指示詞。

（代碼段 - ASP.NET MVC 4 協助程式和表單和驗證 - Ex1 使用 MvcMusicStore）
```
using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;
```
將欄位新增至 StoreManagerController ，以保存 MusicStoreEntities 的 實例。

（代碼段 - ASP.NET MVC 4 協助程式和表單和驗證 - Ex1 MusicStoreEntities）
```
public class StoreManagerController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();
```
實作 StoreManagerController Index 巨集指令，以傳回具有專輯清單的檢視。

控制器動作邏輯會非常類似於稍早撰寫的 StoreController Index 動作。使用 LINQ 擷取所有專輯，包括流派和藝術家資訊以供顯示。

（代碼段 - ASP.NET MVC 4 協助程式和窗體和驗證 - Ex1 StoreManagerController 索引）
```
//
// GET: /StoreManager/

public ActionResult Index()
{
    var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
         .OrderBy(a => a.Price);

    return this.View(albums.ToList());
}
```

工作 3 - 建立索引檢視

在這項工作中，您將建立索引檢視範本，以顯示 StoreManager 控制器所傳回的專輯清單。

建立新的檢視範本之前，您應該先建置專案，讓 [新增檢視] 對話框 知道 要使用的專輯 類別。選取 [建置] |建置MvcMusicStore 以建置專案。
在 [索引] 動作方法內按下滑鼠右鍵，然後選取 [新增檢視]。這會顯示 [新增檢視] 對話方塊。

從 Index 方法中新增 View
在 [新增檢視] 對話框中，確認 [檢視名稱] 為 [索引]。選取 [建立強型別檢視] 選項，然後從 [模型] 類別下拉式列表中選取 [專輯] [MvcMusicStore.Models]。從 Scaffold 範本下拉式清單中選取 [列表]。 將 [ 檢視引擎 ] 保留為 [Razor ] 和其他具有預設值的字段，然後按兩下 [ 新增]。

新增索引檢視

工作 4 - 自定義索引檢視的 Scaffold

在這項工作中，您將調整使用 ASP.NET MVC Scaffolding 功能建立的簡單檢視範本，使其顯示您想要的字段。

注意

ASP.NET MVC 內的 Scaffolding 支援會產生簡單的檢視範本，其中會列出專輯模型中的所有欄位。 Scaffolding 可讓您快速開始使用強型別檢視：不需要手動撰寫檢視範本，Scaffolding 會快速產生預設範本，然後您可以修改產生的程式代碼。

檢閱已建立的程序代碼。產生的欄位清單將會是下列 HTML 資料表的一部分， Scaffolding 用來顯示表格式數據。

@model IEnumerable<MvcMusicStore.Models.Album>

@{
     ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
     @Html.ActionLink("Create New", "Create")
</p>
<table>
     <tr>
          <th>
                @Html.DisplayNameFor(model => model.GenreId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.ArtistId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Title)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Price)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.AlbumArtUrl)
          </th>
          <th></th>
     </tr>

@foreach (var item in Model) {
     <tr>
          <td>
                @Html.DisplayFor(modelItem => item.GenreId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.ArtistId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.AlbumArtUrl)
          </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>

將數據表>程序<代碼取代為下列程式代碼，只顯示 [內容類型]、[藝術家]、[專輯標題] 和 [價格] 字段。這會刪除 AlbumId 和 專輯藝術 URL 資料行。此外，它會變更 GenreId 和 ArtistId 資料行，以顯示其連結的 類別屬性 Artist.Name 和 Genre.Name，並移除 [詳細數據 ] 連結。

<table>
    <tr>
      <th></th>
      <th>Genre</th>
      <th>Artist</th>
      <th>Title</th>
      <th>Price</th>
    </tr>

    @foreach (var item in Model) {
     <tr>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Artist.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
     </tr>
    }
</table>

變更下列描述。

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

工作 5 - 執行應用程式

在這項工作中 ，您將測試 StoreManager 索引檢視範本是否根據先前步驟的設計顯示專輯清單。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager ，以確認已顯示專輯清單，並顯示其標題、 藝術家 和 內容類型。

瀏覽專輯清單

練習 2：新增 HTML 協助程式

StoreManager 索引頁面有一個可能的問題：標題和藝術家名稱屬性可能都足夠長，無法擲回表格格式。在本練習中，您將瞭解如何新增自定義 HTML 協助程式來截斷該文字。

在下圖中，您可以看到格式的修改方式，因為使用小型瀏覽器大小時的文字長度。

流覽未截斷文字的專輯清單

流覽未截斷文字的專輯清單

工作 1 - 擴充 HTML 協助程式

在這項工作中，您會將新的方法 Truncate 新增至 ASP.NET MVC 檢視中公開的 HTML 物件。若要這樣做，您將實作 ASP.NET MVC 所提供的內建 System.Web.Mvc.HtmlHelper 類別的擴充方法。

注意

若要深入瞭解 擴充方法，請流覽此 msdn 文章。 https://msdn.microsoft.com/library/bb383977.aspx.

開啟位於Source/Ex2-AddingAnHTMLHelper/Begin/ 資料夾的 Begin 方案。否則，您可以繼續使用完成上一個練習所獲得的 End 解決方案。
1. 如果您開啟了提供的 Begin 解決方案，則需要先下載一些缺少的 NuGet 包，然後才能繼續。為此，請按一下專案功能表並選擇管理 NuGet 套件。
2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。
3. 最後，透過點擊 Build | Build Solution 來建立解決方案。
  
  注意
  
  使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。
開啟 StoreManager 的索引檢視。若要這樣做，請在方案總管展開 Views 資料夾，然後展開 StoreManager 並開啟 Index.cshtml 檔案。

在 @model 指示詞下方新增下列程式代碼，以定義 Truncate 協助程式方法。

@model IEnumerable<MvcMusicStore.Models.Album>

@helper Truncate(string input, int length)
{
     if (input.Length <= length) {
          @input
     } else {
          @input.Substring(0, length)<text>...</text>
     }
} 

@{
     ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

工作 2 - 截斷頁面中的文字

在這項工作中，您將使用 Truncate 方法來截斷檢視範本中的文字。

開啟 StoreManager 的索引檢視。若要這樣做，請在方案總管展開 Views 資料夾，然後展開 StoreManager 並開啟 Index.cshtml 檔案。

取代顯示藝術家名稱和專輯標題的行。若要這樣做，請取代下列幾行。

<tr>
     <td>
          @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

          @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
     </td>
     <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>
</tr>

工作 3 - 執行應用程式

在這項工作中，您將測試 StoreManager 索引檢視範本會截斷專輯的標題和藝術家名稱。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager，以確認 Title 和 Artist 資料行中的長文字已截斷。

截斷的標題和藝術家名稱

練習3：建立編輯檢視

在此練習中，您將瞭解如何建立窗體，以允許商店經理編輯專輯。他們會流覽 /StoreManager/Edit/id URL（id 是要編輯之專輯的唯一標識符），因此對伺服器進行 HTTP-GET 呼叫。

控制器編輯動作方法會從資料庫擷取適當的專輯、建立 StoreManagerViewModel 物件來封裝它（以及 Artists 和 Genres 清單），然後將它傳遞至檢視範本，以將 HTML 頁面轉譯回使用者。此頁面會包含 <含有文字框和下拉式清單的窗體> 專案，以便編輯 [專輯] 屬性。

一旦使用者更新 [專輯] 窗體值並按兩下 [儲存 ] 按鈕，變更就會透過 HTTP-POST 回撥至 /StoreManager/Edit/id 提交。雖然 URL 維持在上次呼叫中相同，但 ASP.NET MVC 會識別這次它是 HTTP-POST，因此會執行不同的 Edit 動作方法（其中一個以 [HttpPost] 裝飾）。

工作 1 - 實作 HTTP-GET 編輯動作方法

在這項工作中，您將實作編輯動作方法的 HTTP-GET 版本，以從資料庫擷取適當的專輯，以及所有內容類型和藝術家的清單。它會將此數據封裝到 最後一個步驟中定義的 StoreManagerViewModel 對象，然後傳遞給檢視範本以轉譯回應。

開啟位於Source/Ex3-CreatingTheEditView/Begin/ 資料夾的 Begin 方案。否則，您可以繼續使用完成上一個練習所獲得的 End 解決方案。
1. 如果您開啟了提供的 Begin 解決方案，則需要先下載一些缺少的 NuGet 包，然後才能繼續。為此，請按一下專案功能表並選擇管理 NuGet 套件。
2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。
3. 最後，透過點擊 Build | Build Solution 來建立解決方案。
  
  注意
  
  使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。
開啟 StoreManagerController 類別。若要這樣做，請展開 Controllers 資料夾，然後按兩下 StoreManagerController.cs。
以下列程式代碼取代 HTTP-GET 編輯動作方法，以擷取適當的專輯以及內容類型和藝術家清單。

（代碼段 - ASP.NET MVC 4 協助程式和表單和驗證 - Ex3 StoreManagerController HTTP-GET 編輯動作）
```
public ActionResult Edit(int id)
{
    Album album = this.db.Albums.Find(id);

    if (album == null)
    {
         return this.HttpNotFound();
    }

    this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
    this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

    return this.View(album);
}
```
注意

您使用的是 System.Web.Mvc SelectList for Artists and Genres， 而不是 System.Collections.Generic List。

SelectList 是填入 HTML 下拉式清單及管理目前選取專案等更簡潔的方式。在控制器動作中具現化及稍後設定這些 ViewModel 物件，會使編輯表單案例更簡潔。

工作 2 - 建立編輯檢視

在這項工作中，您將建立稍後會顯示專輯屬性的編輯檢視範本。

建立編輯檢視。若要這樣做，請在 [編輯] 動作方法內按兩下滑鼠右鍵，然後選取[新增檢視]。
在 [新增檢視] 對話框中，確認 [檢視名稱] 為 [編輯]。核取 [建立強型別檢視] 複選框，然後從 [檢視數據類別] 下拉式清單中選取 [專輯]（MvcMusicStore.Models）。 從 Scaffold 範本下拉式清單中選取 [編輯]。 保留其他欄位的預設值，然後按兩下 [ 新增]。

新增編輯檢視

工作 3 - 執行應用程式

在這項工作中，您將測試 StoreManager 編輯檢視頁面是否顯示以參數方式傳遞之專輯的屬性值。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager/Edit/1 ，以確認所傳遞專輯的屬性值已顯示。

瀏覽專輯的編輯檢視

工作 4 - 在專輯編輯器範本上實作下拉式清單

在這項工作中，您會將下拉式清單新增至上一個工作中建立的 [檢視] 範本，讓使用者可以從 [藝術家] 和 [內容類型] 列表中選取。

以下列專案取代所有專輯欄位集程式代碼：

<fieldset>
     <legend>Album</legend>

     @Html.HiddenFor(model => model.AlbumId)

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Price)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Price)
          @Html.ValidationMessageFor(model => model.Price)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.AlbumArtUrl)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.AlbumArtUrl)
          @Html.ValidationMessageFor(model => model.AlbumArtUrl)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Artist)
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Genre)
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <p>
          <input type="submit" value="Save" />
     </p>
</fieldset>

注意

已新增 Html.DropDownList 協助程式，以轉譯下拉式清單來選擇藝術家和內容類型。傳遞至 Html.DropDownList 的參數如下：

表單域的名稱（“ArtistId”）。
下拉式清單的值 SelectList。

工作 5 - 執行應用程式

在這項工作中，您將測試 StoreManager [編輯 檢視] 頁面是否顯示下拉式清單，而不是 [藝術家] 和 [內容類型識別符] 文字欄位。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager/Edit/1 ，以確認它是否顯示下拉式清單，而不是 [藝術家] 和 [內容類型標識符] 文字欄位。

瀏覽專輯的 [編輯] 檢視，這次使用下拉式清單

工作 6 - 實作 HTTP-POST 編輯動作方法

現在編輯檢視會如預期般顯示，您需要實作 HTTP-POST 編輯動作方法來儲存對專輯所做的變更。

視需要關閉瀏覽器，以返回 Visual Studio 視窗。從 Controllers 資料夾開啟 StoreManagerController。
將 HTTP-POST 編輯動作方法程式代碼取代為下列專案（請注意，必須取代的方法是接收兩個參數的多載版本）：

（代碼段 - ASP.NET MVC 4 協助程式和表單和驗證 - Ex3 StoreManagerController HTTP-POST 編輯動作）
```
[HttpPost]
public ActionResult Edit(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Entry(album).State = EntityState.Modified;
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}
```
注意

當使用者按兩下 [檢視] 的 [儲存 ] 按鈕，並將窗體值的 HTTP-POST 傳回伺服器以保存在資料庫中時，就會執行這個方法。裝飾專案 [HttpPost] 表示方法應該用於這些 HTTP-POST 案例。方法會採用 Album 物件。 ASP.NET MVC 會自動從張貼 <的表單> 值建立 Album 物件。

方法會執行下列步驟：
1. 如果模型有效：
  1. 更新內容中的專輯專案，將其標示為已修改的物件。
  2. 儲存變更並重新導向至索引檢視。
2. 如果模型無效，它會以 GenreId 和 ArtistId 填入 ViewBag，則會傳回含有已接收之 Album 對象的檢視，以允許使用者執行任何必要的更新。

工作 7 - 執行應用程式

在這項工作中，您將測試 StoreManager 編輯 檢視頁面實際上會將更新的專輯數據儲存在資料庫中。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager/Edit/1。將 [專輯] 標題變更為 [載入]，然後按兩下 [儲存]。確認專輯的標題實際上已在專輯清單中變更。

更新專輯

練習 4：新增建立檢視

現在 StoreManagerController 支援編輯功能，在本練習中，您將瞭解如何新增建立檢視範本，讓市集管理員將新的專輯新增至應用程式。

就像您使用編輯功能一樣，您會使用 StoreManagerController 類別中的兩個不同的方法來實作建立案例：

當市集管理員第一次流覽 /StoreManager/Create URL 時，一個動作方法會顯示空白表單。
第二個動作方法會處理市集管理員按單擊 窗體內的 [儲存 ] 按鈕，並將值提交回 /StoreManager/Create URL 做為 HTTP-POST 的案例。

工作 1 - 實作 HTTP-GET 建立動作方法

在這項工作中，您將實作建立動作方法的 HTTP-GET 版本，以擷取所有內容類型和藝術家的清單，將此數據封裝到 StoreManagerViewModel 對象，然後傳遞至 View 範本。

開啟位於Source/Ex4-AddingACreateView/Begin/ 資料夾的Begin方案。否則，您可以繼續使用完成上一個練習所獲得的 End 解決方案。
1. 如果您開啟了提供的 Begin 解決方案，則需要先下載一些缺少的 NuGet 包，然後才能繼續。為此，請按一下專案功能表並選擇管理 NuGet 套件。
2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。
3. 最後，透過點擊 Build | Build Solution 來建立解決方案。
  
  注意
  
  使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。
開啟 StoreManagerController 類別。若要這樣做，請展開 Controllers 資料夾，然後按兩下 StoreManagerController.cs。

將 Create action 方法程式代碼取代為下列專案：

（代碼段 - ASP.NET MVC 4 協助程式和表單和驗證 - Ex4 StoreManagerController HTTP-GET 建立動作）

//
// GET: /StoreManager/Create

public ActionResult Create()
{
     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");

     return this.View();
}

工作 2 - 新增建立檢視

在這項工作中，您將新增 [建立檢視] 範本，以顯示新的 [空白] 專輯表單。

在 [建立 動作方法] 內按兩下滑鼠右鍵，然後選取[ 新增檢視]。這會顯示 [新增檢視] 對話方塊。
在 [新增檢視] 對話框中，確認 [檢視名稱] 為 [建立]。選取 [建立強型別檢視] 選項，然後從 [模型] 類別下拉式清單中選取 [專輯]（MvcMusicStore.Models），然後從 [Scaffold 範本] 下拉式清單中選取 [建立]。保留其他欄位的預設值，然後按兩下 [ 新增]。

新增建立檢視

更新 GenreId 和 ArtistId 欄位以使用下拉式清單，如下所示：

...
<fieldset>
     <legend>Album</legend>

     <div class="editor-label">
          @Html.LabelFor(model => model.GenreId, "Genre")
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", String.Empty)
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.ArtistId, "Artist")
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", String.Empty)
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
    ...

工作 3 - 執行應用程式

在這項工作中，您將測試 StoreManager 建立檢視頁面是否顯示空白的 [專輯] 表單。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager/Create。確認已顯示空白表單以填滿新的專輯屬性。

使用空白表單建立檢視

工作 4 - 實作 HTTP-POST 建立動作方法

在這項工作中，您將實作建立動作方法的 HTTP-POST 版本，當使用者按兩下 [儲存 ] 按鈕時，將會叫用此方法。方法應該會將新專輯儲存在資料庫中。

視需要關閉瀏覽器，以返回 Visual Studio 視窗。開啟 StoreManagerController 類別。若要這樣做，請展開 Controllers 資料夾，然後按兩下 StoreManagerController.cs。

使用下列程式代碼取代 HTTP-POST Create 動作方法程式代碼：

（代碼段 - ASP.NET MVC 4 協助程式和窗體和驗證 - Ex4 StoreManagerController HTTP- POST 建立動作）

[HttpPost]
public ActionResult Create(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Albums.Add(album);
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

注意

Create 巨集指令與先前的 Edit 巨集指令方法相當類似，但不要將物件設定為已修改，而是將它新增至內容。

工作 5 - 執行應用程式

在這項工作中，您將測試 StoreManager 建立 檢視頁面可讓您建立新的專輯，然後重新導向至 StoreManager 索引檢視。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager/Create。以新專輯的數據填入所有表單域，如下圖所示：

建立專輯
確認您已重新導向至 StoreManager 索引檢視，其中包含剛建立的新專輯。

新專輯已建立

練習 5：處理刪除

尚未實作刪除專輯的能力。這就是此練習的用意。就像之前一樣，您將使用 StoreManagerController 類別內的兩個不同的方法來實作 Delete 案例：

一個動作方法會顯示確認表單
第二個動作方法會處理表單提交

工作 1 - 實作 HTTP-GET 刪除動作方法

在這項工作中，您將實作 DELETE 動作方法的 HTTP-GET 版本，以擷取專輯的資訊。

開啟位於Source/Ex5-HandlingDeletion/Begin/ 資料夾的Begin方案。否則，您可以繼續使用完成上一個練習所獲得的 End 解決方案。
1. 如果您開啟了提供的 Begin 解決方案，則需要先下載一些缺少的 NuGet 包，然後才能繼續。為此，請按一下專案功能表並選擇管理 NuGet 套件。
2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。
3. 最後，透過點擊 Build | Build Solution 來建立解決方案。
  
  注意
  
  使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。
開啟 StoreManagerController 類別。若要這樣做，請展開 Controllers 資料夾，然後按兩下 StoreManagerController.cs。
刪除控制器動作與先前的市集詳細數據控制器動作完全相同：它會使用URL中提供的標識碼從資料庫查詢專輯物件，並傳回適當的檢視。若要這樣做，請使用下列程式代碼取代 HTTP-GET Delete 動作方法程式代碼：

（代碼段 - ASP.NET MVC 4 協助程式和表單和驗證 - Ex5 處理刪除 HTTP-GET 刪除動作）
```
//
// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)
{
     Album album = this.db.Albums.Find(id);

     if (album == null)
     {
          return this.HttpNotFound();
     }

     return this.View(album);
}
```
在 [刪除] 動作方法內按下滑鼠右鍵，然後選取 [新增檢視]。這會顯示 [新增檢視] 對話方塊。
在 [新增檢視] 對話框中，確認 [檢視名稱] 為 [刪除]。選取 [建立強型別檢視] 選項，然後從 [模型] 類別下拉式列表中選取 [專輯] [MvcMusicStore.Models]。從 Scaffold 範本下拉式清單中選取 [刪除]。保留其他欄位的預設值，然後按兩下 [ 新增]。

新增刪除檢視

[刪除] 樣本會顯示來自模型的所有欄位。您只會顯示專輯的標題。若要這樣做，請使用下列程式代碼取代檢視的內容：

@model MvcMusicStore.Models.Album
@{
     ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>

<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>

@using (Html.BeginForm()) {
     <p>
          <input type="submit" value="Delete" /> |
          @Html.ActionLink("Back to List", "Index")
     </p>
}

工作 2 - 執行應用程式

在這項工作中，您將測試 StoreManager 刪除檢視頁面是否顯示確認刪除表單。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager。按兩下 [刪除 ] 以選取要刪除的一張專輯，並確認已上傳新的檢視。

刪除專輯

工作 3- 實作 HTTP-POST 刪除動作方法

在這項工作中，您將實作刪除動作方法的 HTTP-POST 版本，當使用者按兩下 [刪除 ] 按鈕時，將會叫用此方法。方法應該刪除資料庫中的專輯。

視需要關閉瀏覽器，以返回 Visual Studio 視窗。開啟 StoreManagerController 類別。若要這樣做，請展開 Controllers 資料夾，然後按兩下 StoreManagerController.cs。

以下列程式代碼取代 HTTP-POST Delete 動作方法程式代碼：

（代碼段 - ASP.NET MVC 4 協助程式和表單和驗證 - Ex5 處理刪除 HTTP-POST 刪除動作）

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

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
     Album album = this.db.Albums.Find(id);
     this.db.Albums.Remove(album);
     this.db.SaveChanges();

     return this.RedirectToAction("Index"); 
}

工作 4 - 執行應用程式

在這項工作中，您將測試 StoreManager 刪除 檢視頁面可讓您刪除專輯，然後重新導向至 StoreManager 索引檢視。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager。按兩下 [ 刪除]，選取要刪除的一張專輯。 按下 [ 刪除] 按鈕來確認刪除：

刪除專輯
確認該專輯已刪除，因為它不會出現在 [索引 ] 頁面中。

練習 6：新增驗證

目前，您已就地建立和編輯表單不會執行任何類型的驗證。如果使用者在價格欄位中保留必要的欄位空白或輸入字母，您取得的第一個錯誤將會來自資料庫。

您可以將數據批註新增至模型類別，以將驗證新增至應用程式。數據批註允許描述您想要套用至模型屬性的規則，ASP.NET MVC 會負責強制和顯示適當的訊息給使用者。

工作 1 - 新增數據批注

在這項工作中，您會將數據批註新增至專輯模型，讓 [建立和編輯] 頁面在適當時顯示驗證訊息。

針對簡單的 Model 類別，只要新增 System.ComponentModel.DataAnnotation 的 using 語句，即可處理加入數據批注，然後將 [必要] 屬性放在適當的屬性上。下列範例會將 Name 屬性設為 View 中的必要欄位。

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

在這類應用程式產生實體數據模型的情況下，這有點複雜。如果您將數據批註直接新增至模型類別，如果您從資料庫更新模型，則會覆寫它們。相反地，您可以使用將存在的元數據部分類別來保存批注，並使用 [MetadataType] 屬性與模型類別相關聯。

開啟位於Source/Ex6-AddingValidation/Begin/ 資料夾的 Begin 方案。否則，您可以繼續使用完成上一個練習所獲得的 End 解決方案。
1. 如果您開啟了提供的 Begin 解決方案，則需要先下載一些缺少的 NuGet 包，然後才能繼續。為此，請按一下專案功能表並選擇管理 NuGet 套件。
2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。
3. 最後，透過點擊 Build | Build Solution 來建立解決方案。
  
  注意
  
  使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。
從 Models 資料夾開啟Album.cs。

以醒目提示的程式代碼取代Album.cs內容，使其看起來如下：

注意

行 [DisplayFormat（ConvertEmptyStringToNull=false）] 表示當數據源中的數據欄位更新時，來自模型的空字串將不會轉換成 Null。當 Entity Framework 在數據批註驗證欄位之前，將 Null 值指派給模型時，此設定會避免例外狀況。

（代碼段 - ASP.NET MVC 4 協助程式和表單和驗證 - Ex6 專輯元資料部分類別）

namespace MvcMusicStore.Models
{
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }

        [DisplayName("Genre")]
        public int GenreId { get; set; }

        [DisplayName("Artist")]
        public int ArtistId { get; set; }

        [Required(ErrorMessage = "An Album Title is required")]
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        [StringLength(160, MinimumLength = 2)]
        public string Title { get; set; }

        [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [DisplayName("Album Art URL")]
        [DataType(DataType.ImageUrl)]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }

        public virtual Genre Genre { get; set; }

        public virtual Artist Artist { get; set; }
    }
}

注意

此 Album 部分類別具有 MetadataType 屬性，指向 Data Annotations 的 AlbumMetaData 類別。這些是您用來標註專輯模型的一些數據批註屬性：

必要 - 指出屬性為必要欄位
DisplayName - 定義要用於表單域和驗證訊息的文字
DisplayFormat - 指定數據欄位的顯示和格式化方式。
StringLength - 定義字串字段的最大長度
範圍 - 為數值欄位提供最大值和最小值
ScaffoldColumn - 允許從編輯器窗體隱藏欄位

工作 2 - 執行應用程式

在這項工作中，您將使用上一個工作中所選擇的顯示名稱，測試 [建立和編輯] 頁面是否驗證字段。

按 F5 以執行應用程式。
專案會在 [首頁] 頁面中開始。將 URL 變更為 /StoreManager/Create。確認顯示名稱符合部分類別中的顯示名稱（例如 專輯藝術 URL 而非 AlbumArtUrl）
按兩下 [ 建立]，而不填寫窗體。確認您取得對應的驗證訊息。

[建立] 頁面中已驗證的欄位
您可以確認 [編輯] 頁面發生相同的動作。將 URL 變更為 /StoreManager/Edit/1 ，並確認顯示名稱符合部分類別中的顯示名稱（例如 專輯藝術 URL 而非 AlbumArtUrl）。清空 [標題] 和 [價格] 字段，然後按兩下 [儲存]。確認您取得對應的驗證訊息。

[編輯] 頁面中的已驗證欄位

練習 7：在用戶端使用不顯眼的 jQuery

在本練習中，您將瞭解如何在用戶端啟用MVC 4 Unobtrusive jQuery驗證。

注意

Unobtrusive jQuery 會使用 data-ajax 前置詞 JavaScript 在伺服器上叫用動作方法，而不是侵入性地發出內嵌用戶端腳本。

工作 1 - 在啟用 Unobtrusive jQuery 之前執行應用程式

在這項工作中，您將先執行應用程式，再包含 jQuery，以便比較這兩個驗證模型。

開啟位於Source/Ex7-UnobtrusivejQueryValidation/Begin/ 資料夾的 Begin 方案。否則，您可以繼續使用完成上一個練習所獲得的 End 解決方案。
1. 如果您開啟了提供的 Begin 解決方案，則需要先下載一些缺少的 NuGet 包，然後才能繼續。為此，請按一下專案功能表並選擇管理 NuGet 套件。
2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。
3. 最後，透過點擊 Build | Build Solution 來建立解決方案。
  
  注意
  
  使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。
按 F5 執行應用程式。
專案會在 [首頁] 頁面中開始。流覽 /StoreManager/Create，然後按兩下 [建立]，而不填寫窗體以確認您收到驗證訊息：

用戶端驗證已停用

在瀏覽器中，開啟 HTML 原始碼：

...
          <div class="editor-label">
                <label for="Price">Price</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                <span class="field-validation-valid" id="Price_validationMessage"></span>
          </div>

          <div class="editor-label">
                <label for="AlbumArtUrl">Album Art URL</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
          </div>

          <p>
                <input type="submit" value="Create" />
          </p>
     </fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...

工作 2 - 啟用不顯眼的客戶端驗證

在這項工作中，您會從 Web.config 檔案啟用 jQuery 不顯眼的客戶端驗證，此檔案預設會在所有新的 ASP.NET MVC 4 項目中設定為 false。此外，您將新增必要的腳本參考，讓 jQuery Unobtrusive 用戶端驗證運作。

在專案根目錄開啟 Web.Config 檔案，並確定 ClientValidationEnabled 和 UnobtrusiveJavaScriptEnabled 索引鍵值設定為 true。
```
...
<configuration>
  <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="webpages:Enabled" value="false" />
     <add key="PreserveLoginUrl" value="true" />
     <add key="ClientValidationEnabled" value="true" />
     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...
```
注意

您也可以在程式代碼Global.asax.cs啟用客戶端驗證，以取得相同的結果：

HtmlHelper.ClientValidationEnabled = true;

此外，您可以將 ClientValidationEnabled 屬性指派給任何控制器，以擁有自定義行為。
在 Views\StoreManager 上開啟 Create.cshtml。
請確定下列腳本檔案 jquery.validate 和 jquery.validate.unobtrusive 是透過 “~/bundles/jqueryval” 套件組合在檢視中參考的。
```
...
@section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
}
```
注意

所有這些 jQuery 連結庫都包含在MVC 4 新專案中。您可以在專案的 /Scripts 資料夾中找到更多連結庫。

若要讓此驗證連結庫運作，您必須新增 jQuery 架構連結庫的參考。由於此參考已在 _Layout.cshtml 檔案中新增，因此您不需要在此特定檢視中新增它。

工作 3 - 使用不顯眼的 jQuery 驗證執行應用程式

在這項工作中 ，您將測試 StoreManager 建立檢視範本在使用者建立新專輯時，使用 jQuery 連結庫執行客戶端驗證。

按 F5 執行應用程式。
專案會在 [首頁] 頁面中開始。流覽 /StoreManager/Create，然後按兩下 [建立]，而不填寫窗體以確認您收到驗證訊息：

已啟用 jQuery 的客戶端驗證

在瀏覽器中，開啟 [建立] 檢視的原始程式碼：

...
<div class="editor-label">
    <label for="Title">Title</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="Price">Price</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>        
...

注意

針對每個客戶端驗證規則，Unobtrusive jQuery 會新增具有 data-val-rulename=“message” 的屬性。以下是 Unobtrusive jQuery 插入 HTML 輸入字段以執行客戶端驗證的標記清單：

Data-val
Data-val-number
Data-val-range
Data-val-range-min / Data-val-range-max
Data-val-required
Data-val-length
Data-val-length-max / Data-val-length-min

所有數據值都會填入模型 數據批注。然後，所有在伺服器端運作的邏輯都可以在客戶端執行。例如，Price 屬性在模型中具有下列數據批注：

[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }

使用Unobtrusive jQuery 之後，產生的程式代碼為：

<input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />

摘要

完成此實際操作實驗室，您已瞭解如何讓使用者使用下列專案來變更儲存在資料庫中的數據：

控制器動作，例如索引、建立、編輯、刪除
ASP.NET MVC 的 Scaffolding 功能，用於在 HTML 資料表中顯示屬性
自訂 HTML 協助程式以改善用戶體驗
回應 HTTP-GET 或 HTTP-POST 呼叫的動作方法
類似檢視範本的共享編輯器範本，例如建立和編輯
形成專案，例如下拉式清單
模型驗證的數據批注
使用 jQuery Unobtrusive 連結庫的客戶端驗證

附錄 A：安裝 Visual Studio Express 2012 for Web

您可以使用 Microsoft Web 平台安裝程式安裝 Microsoft Visual Studio Express 2012 for Web 或其他「Express」版本。以下說明將引導您使用 Microsoft Web 平台安裝程式安裝 Visual studio Express 2012 for Web 所需的步驟。

移至 [/iis/extensions/introduction-to-iis-express/iis-express-overview？linkid=9810169]（/iis/extensions/introduction-to-iis-express/iis-express-overview？linkid=9810169）。或者，如果您已安裝 Web Platform Installer，您可以開啟它，並搜尋產品「Visual Studio Express 2012 for Web with Windows Azure SDK」。
按一下立即安裝。如果您沒有 Web 平台安裝程式，您將被重定向到首先下載並安裝它。
Web 平台安裝程式開啟後，按一下安裝開始安裝。

安裝 Visual Studio Express
閱讀所有產品的授權和條款，然後按一下我接受繼續。

接受授權條款
等待下載和安裝過程完成。

安裝進度
安裝完成後，按一下完成。

安裝完成
按一下退出關閉 Web 平台安裝程式。
若要開啟 Visual Studio Express for Web，請前往開始畫面並開始編寫 VS Express，然後按一下 VS Express for Web 圖格。

VS Express Web 圖格

附錄 B：使用代碼段

有了程式碼片段，您就可以輕鬆獲得所需的所有程式碼。實驗文件會準確告訴您何時可以使用它們，如下圖所示。

使用 Visual Studio 程式碼片段將程式碼插入專案中

使用 Visual Studio 程式碼片段將程式碼插入專案中

使用鍵盤新增代碼段（僅限 C#）

將遊標置於要插入程式碼的位置。
開始輸入程式碼片段名稱 (不含空格或連字元)。
觀看 IntelliSense 顯示符合的片段名稱。
選擇正確的程式碼片段 (或繼續輸入，直到選擇整個程式碼片段的名稱)。
按兩次 Tab 鍵可將程式碼片段插入到遊標位置。

開始輸入片段名稱

開始輸入片段名稱

按 Tab 鍵選擇已反白的片段

按 Tab 鍵選擇已反白的片段

再按 Tab 鍵，片段將會展開

再按 Tab 鍵，片段將會展開

若要使用滑鼠新增代碼段（C#、Visual Basic 和 XML） 1。以滑鼠右鍵按一下要插入程式碼片段的位置。

選擇插入片段，然後選擇我的程式碼片段。
按一下從清單中選擇相關片段。

以滑鼠右鍵按一下要插入程式碼片段的位置，然後選擇插入片段

以滑鼠右鍵按一下要插入程式碼片段的位置，然後選擇插入片段

按一下從清單中選擇相關片段

按一下從清單中選擇相關片段

共用方式為

ASP.NET MVC 4 協助程式、表單和驗證

目標

必要條件

設定

練習

練習 1：建立市集管理員控制器及其索引檢視

工作 1 - 建立 StoreManagerController

工作 2 - 自定義 StoreManager 索引

工作 3 - 建立索引檢視

工作 4 - 自定義索引檢視的 Scaffold

工作 5 - 執行應用程式

練習 2：新增 HTML 協助程式

工作 1 - 擴充 HTML 協助程式

工作 2 - 截斷頁面中的文字

工作 3 - 執行應用程式

練習3：建立編輯檢視

工作 1 - 實作 HTTP-GET 編輯動作方法

工作 2 - 建立編輯檢視

工作 3 - 執行應用程式

工作 4 - 在專輯編輯器範本上實作下拉式清單

工作 5 - 執行應用程式

工作 6 - 實作 HTTP-POST 編輯動作方法

工作 7 - 執行應用程式

練習 4：新增建立檢視

工作 1 - 實作 HTTP-GET 建立動作方法

工作 2 - 新增建立檢視

工作 3 - 執行應用程式

工作 4 - 實作 HTTP-POST 建立動作方法

工作 5 - 執行應用程式

練習 5：處理刪除

工作 1 - 實作 HTTP-GET 刪除動作方法

工作 2 - 執行應用程式

工作 3- 實作 HTTP-POST 刪除動作方法

工作 4 - 執行應用程式

練習 6：新增驗證

工作 1 - 新增數據批注

工作 2 - 執行應用程式

練習 7：在用戶端使用不顯眼的 jQuery

工作 1 - 在啟用 Unobtrusive jQuery 之前執行應用程式

工作 2 - 啟用不顯眼的客戶端驗證

工作 3 - 使用不顯眼的 jQuery 驗證執行應用程式

摘要

附錄 A：安裝 Visual Studio Express 2012 for Web

附錄 B：使用代碼段

意見反應

其他資源