ASP.NET MVC 4 基本概念

發行項
07/13/2023

此Hands-On實驗室是以 MVC (模型檢視控制器) 音樂市集為基礎，此教學課程應用程式會介紹並說明如何使用 ASP.NET MVC 和 Visual Studio。在整個實驗室中，您將瞭解簡單但能夠一起使用這些技術的強大功能。您將從簡單的應用程式開始，並加以建置，直到您擁有完整功能 ASP.NET MVC 4 Web 應用程式為止。

此實驗室適用于 ASP.NET MVC 4。

如果您想要探索教學課程應用程式的 ASP.NET MVC 3 版本，您可以在 MVC-Music-Store中找到它。

此Hands-On實驗室假設開發人員有 Web 開發技術的經驗，例如 HTML 和 JavaScript。

注意

所有範例程式碼和程式碼片段都包含在 Microsoft-Web/WebCampTrainingKit 版本提供的 Web Training Kit 中。此實驗室特定的專案可在 ASP.NET MVC 4 基本概念取得。

音樂市集應用程式

將在此實驗室中建置的音樂市集 Web 應用程式包含三個主要部分：購物、結帳和管理。訪客可以依內容類型流覽相簿、將相簿新增至購物車、檢閱其選取範圍，最後繼續簽出以登入並完成訂單。此外，存放區系統管理員將能夠管理可用的相簿及其主要屬性。

音樂市集

音樂市集畫面

ASP.NET MVC 4 Essentials

音樂市集應用程式將會使用 模型檢視控制器 (MVC) 來建置，這是將應用程式分成三個主要元件的架構模式：

模型：模型物件是實作領域邏輯的應用程式部分。通常，模型物件也會在資料庫中擷取和儲存模型狀態。
視圖： 檢視是顯示應用程式使用者介面的元件， (UI) 。通常此 UI 是從模型資料建立。例如，「相簿」的編輯檢視會根據 Album 物件的目前狀態顯示文字方塊和下拉式清單。
控制器： 控制器是處理使用者互動、操作模型，最後選取檢視來呈現 UI 的元件。在 MVC 應用程式中，檢視只會顯示資訊，而控制器則會處理及回應使用者輸入和互動。

MVC 模式可協助您建立應用程式，以分隔應用程式的不同層面 (輸入邏輯、商務邏輯和 UI 邏輯) ，同時提供這些元素之間的鬆散結合。此分隔可協助您在建置應用程式時管理複雜度，因為它可讓您一次專注于實作的一個層面。此外，MVC 模式可讓您輕鬆地測試應用程式，也鼓勵使用測試驅動開發 (TDD) 來建立應用程式。

ASP.NET MVC架構提供建立 ASP.NET MVC 型 Web 應用程式的 ASP.NET Web Forms模式替代方案。 ASP.NET MVC架構是輕量型、高度可測試的呈現架構， (與 Web 表單型應用程式一樣，) 與現有的 ASP.NET 功能整合，例如主版頁面和成員資格型驗證，因此您可以取得核心 .NET 架構的所有功能。如果您已經熟悉 ASP.NET Web Forms，因為您已使用的所有程式庫也都可在 ASP.NET MVC 4 中使用，這非常有用。

此外，MVC 應用程式三個主要元件之間的鬆散結合也會提升平行開發。例如，一位開發人員可以處理檢視，第二位開發人員可以處理控制器邏輯，而第三位開發人員可以專注于模型中的商務邏輯。

目標

在此Hands-On實驗室中，您將瞭解如何：

根據音樂市集應用程式教學課程從頭開始建立 ASP.NET MVC 應用程式
新增控制器以處理網站首頁的 URL，以及流覽其主要功能
新增檢視以自訂顯示的內容及其樣式
新增模型類別以包含和管理資料和網域邏輯
使用檢視模型模式將控制器動作的資訊傳遞至檢視範本
探索網際網路應用程式的 ASP.NET MVC 4 新範本

必要條件

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

Visual Studio 2012 Express for Web (請閱讀附錄 A ，以取得如何安裝)

安裝程式

安裝程式碼片段

為了方便起見，您將在此實驗室中管理的大部分程式碼都可以作為 Visual Studio 程式碼片段使用。若要安裝程式碼片段，請執行 .\Source\Setup\CodeSnippets.vsi 檔案。

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

Exercises

此Hands-On實驗室是由下列練習所組成：

練習 1：建立 MusicStore ASP.NET MVC Web 應用程式專案
練習 2：建立控制器
練習 3：將參數傳遞至控制器
練習 4：建立檢視
練習 5：建立檢視模型
練習 6：在檢視中使用參數
練習 7：繞 ASP.NET MVC 4 新範本

注意

每個練習都會伴隨 End 資料夾，其中包含完成練習之後應該取得的結果解決方案。如果您需要其他練習的協助，您可以使用此解決方案作為指南。

完成此實驗室的估計時間： 60 分鐘。

練習 1：建立 MusicStore ASP.NET MVC Web 應用程式專案

在此練習中，您將瞭解如何在 Visual Studio 2012 Express for Web 及其主要資料夾組織中建立 ASP.NET MVC 應用程式。此外，您將瞭解如何新增控制器，並讓它在應用程式的首頁中顯示簡單的字串。

工作 1 - 建立 ASP.NET MVC Web 應用程式專案

在這項工作中，您將使用 MVC Visual Studio 範本建立空白 ASP.NET MVC 應用程式專案。啟動 VS Express for Web。
按一下 [檔案] 功能表上的 [新增專案]。
在 [新增專案] 對話方塊中，選取位於Visual C#、Web範本清單下的ASP.NET MVC 4 Web 應用程式專案類型。
將 [名稱 ] 變更為 MvcMusicStore。
在此練習的 Source 資料夾中，設定解決方案在新的 Begin 資料夾內的位置，例如 [YOUR-HOL-PATH]\Source\Ex01-CreateMusicStoreProject\Begin。按一下 [確定]。

建立新專案對話方塊
在 [ 新增 ASP.NET MVC 4 專案 ] 對話方塊中，選取 [基本 ] 範本，並確定已選取 [ 檢視引擎 ] 為 Razor。按一下 [確定]。

新增 ASP.NET MVC 4 專案對話方塊

工作 2 - 探索解決方案結構

ASP.NET MVC 架構包含 Visual Studio 專案範本，可協助您建立支援 MVC 模式的 Web 應用程式。此範本會建立具有必要資料夾、專案範本和組態檔專案的新 ASP.NET MVC Web 應用程式。

在這項工作中，您將檢查解決方案結構，以瞭解涉及的專案及其關聯性。下列資料夾包含在所有 ASP.NET MVC 應用程式中，因為 ASP.NET MVC 架構預設使用「設定慣例」方法，並根據資料夾命名慣例進行一些預設假設。

建立專案之後，請檢閱已在右側方案總管中建立的資料夾結構：

ASP.NET 方案總管中的 MVC 資料夾結構
1. 控制器。此資料夾將包含控制器類別。在 MVC 型應用程式中，控制器負責處理使用者互動、操作模型，最後選擇檢視來轉譯 UI。
  
  注意
  
  MVC 架構需要所有控制器的名稱以「Controller」結尾，例如 HomeController、LoginController 或 ProductController。
2. 模型。這個資料夾是針對代表 MVC Web 應用程式之應用程式模型的類別所提供。這通常包含定義物件和邏輯的程式碼，以便與資料存放區互動。通常實際的模型物件會位於不同的類別庫中。不過，當您建立新的應用程式時，您可能會包含類別，然後在開發週期的稍後點將它們移至不同的類別庫。
3. 檢視。此資料夾是檢視的建議位置，這是負責顯示應用程式使用者介面的元件。除了與轉譯檢視相關的任何其他檔案之外，檢視表還會使用 .aspx、.ascx、.cshtml 和 .master 檔案。 Views 資料夾包含每個控制器的資料夾;資料夾會以 controller-name 前置詞命名。例如，如果您有名為 HomeController 的控制器，Views 資料夾會包含名為 Home 的資料夾。根據預設，當 ASP.NET MVC 架構載入檢視時，它會在 Views\controllerName 資料夾中尋找具有所要求檢視名稱的 .aspx 檔案， (Views[ControllerName][Action].aspx) 或 (Views[ControllerName][Action].cshtml) for Razor Views。
  
  注意
  
  除了先前列出的資料夾之外，MVC Web 應用程式還會使用 Global.asax 檔案來設定全域 URL 路由預設值，並使用 Web.config 檔案來設定應用程式。

工作 3 - 新增 HomeController

在不使用 MVC 架構的 ASP.NET 應用程式中，使用者互動會依頁面組織，以及從這些頁面引發和處理事件。相反地，使用者與 ASP.NET MVC 應用程式的互動會以控制器及其動作方法為組織方式。

另一方面，ASP.NET MVC 架構會將 URL 對應至稱為控制器的類別。控制器會處理傳入要求、處理使用者輸入和互動、執行適當的應用程式邏輯，並決定回應以傳送回用戶端 (顯示 HTML、下載檔案、重新導向至不同的 URL 等) 。在顯示 HTML 的情況下，控制器類別通常會呼叫個別的檢視元件來產生要求的 HTML 標籤。在 MVC 應用程式中，檢視只會顯示資訊，而控制器則會處理及回應使用者輸入和互動。

在此工作中，您將新增控制器類別，以處理音樂市集網站的首頁 URL。

以滑鼠右鍵按一下方案總管內的Controllers資料夾，選取 [新增]，然後選取[控制器] 命令：

新增控制器命令
[ 新增控制器] 對話方塊隨即出現。將控制器命名為 HomeController ，然後按 [新增]。

新增控制器對話方塊
HomeController.cs檔案會在Controllers資料夾中建立。若要讓 HomeController 在其 Index 巨集指令上傳回字串，請將 Index 方法取代為下列程式碼：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex1 HomeController 索引)
```
public string Index()
{
    return "Hello from Home";
}
```

工作 4 - 執行應用程式

在這項工作中，您會在網頁瀏覽器中試用應用程式。

按 F5 以執行應用程式。系統會編譯專案，並啟動本機 IIS 網頁伺服器。本機 IIS 網頁伺服器會自動開啟指向網頁伺服器的 URL 的網頁瀏覽器。

在

在網頁瀏覽器中執行的應用程式

注意

本機 IIS 網頁伺服器會在隨機可用的埠號碼上執行網站。在上圖中，月臺正在執行于 http://localhost:50103/ ，因此會使用埠 50103。您的埠號碼可能會有所不同。
關閉瀏覽器。

練習 2：建立控制器

在此練習中，您將瞭解如何更新控制器，以實作音樂市集應用程式的簡單功能。該控制器會定義動作方法，以處理下列每個特定要求：

音樂市集中音樂內容類型的清單頁面
列出特定內容類型所有音樂相簿的流覽頁面
顯示特定音樂相簿相關資訊的詳細資料頁面

針對此練習的範圍，這些動作現在只會傳回字串。

工作 1 - 新增 StoreController 類別

在此工作中，您將新增控制器。

如果尚未開啟，請啟動 VS Express for Web 2012。
在 [ 檔案] 功能表中，選擇 [ 開啟專案]。在 [開啟專案] 對話方塊中，流覽至 Source\Ex02-CreateAController\Begin，選取 [Begin.sln ]，然後按一下 [ 開啟]。或者，您也可以繼續進行完成上一個練習之後取得的解決方案。
1. 如果您開啟提供的 Begin 解決方案，您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建置建置方案] 來建 | 置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，進而減少專案大小。使用 NuGet Power Tools，藉由在Packages.config檔案中指定套件版本，您就能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。
新增控制器。若要這樣做，請以滑鼠右鍵按一下方案總管內的Controllers資料夾，選取 [新增]，然後選取[控制器]命令。將 控制器名稱 變更為 StoreController，然後按一下 [ 新增]。

新增控制器對話方塊

工作 2 - 修改 StoreController 的動作

在這項工作中，您將修改呼叫動作的 Controller 方法。動作負責處理 URL 要求，並判斷應該傳回給叫用 URL 的瀏覽器或使用者的內容。

StoreController類別已經有Index方法。您稍後會使用此實驗室來實作列出音樂市集所有內容類型的頁面。現在，只要以下列程式碼取代 Index 方法，以傳回字串「Hello from Store.Index () 」：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex2 StoreController 索引)
```
public string Index()
{
  return "Hello from Store.Index()";
}
```
新增[流覽] 和 [詳細資料] 方法。若要這樣做，請將下列程式碼新增至 StoreController：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex2 StoreController BrowseAndDetails)
```
// GET: /Store/Browse
public string Browse()
{
  return "Hello from Store.Browse()";
}

// GET: /Store/Details  
public string Details()
{
  return "Hello from Store.Details()";
}
```

工作 3 - 執行應用程式

在這項工作中，您會在網頁瀏覽器中試用應用程式。

按 F5 以執行應用程式。
專案會從首頁開始。變更 URL 以確認每個動作的實作。
1. /Store。您會看到「Hello from Store.Index () 」。
2. /Store/Browse。您會看到「Hello from Store.Browse () 」。
3. /Store/Details。您會看到「Hello from Store.Details () 」。
  
  流覽 /Store/Browse
關閉瀏覽器。

練習 3：將參數傳遞至控制器

到目前為止，您已從 Controllers 傳回常數位符串。在此練習中，您將瞭解如何使用 URL 和 querystring 將參數傳遞至控制器，然後讓方法動作以文字回應瀏覽器。

工作 1 - 將內容類型參數新增至 StoreController

在這項工作中，您將使用querystring將參數傳送至StoreController中的Browse巨集指令方法。

如果尚未開啟，請啟動 VS Express for Web。
在 [ 檔案] 功能表中，選擇 [ 開啟專案]。在 [開啟專案] 對話方塊中，流覽至 Source\Ex03-PassingParametersToAController\Begin，選取 [Begin.sln ]，然後按一下 [ 開啟]。或者，您也可以繼續進行完成上一個練習之後取得的解決方案。
1. 如果您開啟提供的 Begin 解決方案，您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建 | 置建置方案] 來建置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，以減少專案大小。使用 NuGet Power Tools，藉由在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。
開啟 StoreController 類別。若要這樣做，請在方案總管中展開Controllers資料夾，然後按兩下StoreController.cs。
變更 Browse 方法，新增字串參數以要求特定內容類型。 ASP.NET MVC 會在叫用時，自動將名為 內容類型 的任何查詢字串或表單張貼參數傳遞至此動作方法。若要這樣做，請使用下列程式碼取代 Browse 方法：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex3 StoreController BrowseMethod)
```
// GET: /Store/Browse?genre=Disco   
public string Browse(string genre)
{
  string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

  return message;
}
```

注意

您使用HttpUtility.HtmlEncode公用程式方法來防止使用者以/Store/Browse 之類的連結將 JAVAscript 插入檢視中？內容類型= < 腳本 > 視窗.location=' http://hackersite.com ' < /script >。

如需進一步的說明，請流覽此 msdn 文章。

工作 2 - 執行應用程式

在這項工作中，您會在網頁瀏覽器中試用應用程式，並使用 內容類型 參數。

按 F5 執行應用程式。
專案會從首頁開始。將 URL 變更為 /Store/Browse？內容類型=Disco 以確認動作接收內容類型參數。

流覽 /Store/Browse？內容類型=Disco
關閉瀏覽器。

工作 3 - 在 URL 中新增內嵌識別碼參數

在這項工作中，您將使用URL將Id參數傳遞至StoreController的Details巨集指令方法。 ASP.NET MVC 的預設路由慣例是將動作方法名稱之後的 URL 區段視為名為 Id的參數。如果您的動作方法有名為 Id 的參數，則 ASP.NET MVC 會自動將 URL 區段傳遞給您作為參數。在 URL 存放區/詳細資料/5中， 識別碼 會解譯為 5。

變更StoreController的Details方法，新增名為id的int參數。若要這樣做，請使用下列程式碼取代Details方法：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex3 StoreController DetailsMethod)
```
// GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}
```

工作 4 - 執行應用程式

在這項工作中，您會在網頁瀏覽器中試用應用程式，並使用 Id 參數。

按 F5 執行應用程式。
專案會從首頁開始。將 URL 變更為 /Store/Details/5 ，以確認動作接收 id 參數。

流覽 /Store/詳細資料/5

練習 4：建立檢視

到目前為止，您已從控制器動作傳回字串。雖然這是瞭解控制器運作方式的實用方式，但不是建置您實際 Web 應用程式的方式。檢視是一種元件，可讓您使用範本檔案，將 HTML 產生回瀏覽器。

在此練習中，您將瞭解如何新增版面配置主版頁面來設定通用 HTML 內容的範本、StyleSheet 來增強網站的外觀和風格，最後是檢視範本，讓 HomeController 傳回 HTML。

工作 1 - 修改檔案 _layout.cshtml

~/Views/Shared/_layout.cshtml檔案可讓您設定範本，讓一般 HTML 在整個網站中使用。在此工作中，您將新增具有常用標頭的版面配置主版頁面，其中包含 [首頁] 和 [市集] 區域的連結。

如果尚未開啟，請啟動 VS Express for Web。
在 [ 檔案] 功能表中，選擇 [ 開啟專案]。在 [開啟專案] 對話方塊中，流覽至 [Source\Ex04-CreateAView\Begin]，選取 [Begin.sln ]，然後按一下 [ 開啟]。或者，您也可以繼續進行您在完成上一個練習之後取得的解決方案。
1. 如果您開啟提供的 Begin 解決方案，您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建 | 置建置方案] 來建置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，以減少專案大小。使用 NuGet Power Tools，藉由在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。

_layout.cshtml檔案包含網站上所有頁面的 HTML 容器配置。它包含< HTML 回應的 html >元素，以及< 前端 >和< 主體 >元素。 @RenderBody () 在 HTML 本文內識別檢視範本的區域將能夠填入動態內容。 (C#)

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

新增通用標頭，其中包含網站中所有頁面的 [首頁] 和 [市集] 區域連結。若要這樣做，請在 body > 語句下方 < 新增下列程式碼。 (C#)

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

包含 div 來轉譯每個頁面的本文區段。以下列醒目提示的程式碼取代 @RenderBody () ： (C#)

...
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     <div id="body">
          @RenderSection("featured", required: false)
          <section class="content-wrapper main-content clear-fix">
                @RenderBody()
          </section>
     </div>
     ...
</body>
</html>

注意

您知道嗎？ Visual Studio 2012 有程式碼片段，可讓您輕鬆地在 HTML、程式碼檔案等等中新增常用的程式碼！輸入< div >並按TAB兩次以插入完整的div標籤來試試看。

工作 2 - 新增 CSS 樣式表單

空的專案範本包含非常簡化的 CSS 檔案，其只包含用來顯示基本表單和驗證訊息的樣式。您將使用設計工具可能提供的其他 CSS 和影像 () ，以增強網站的外觀和風格。

在此工作中，您將新增 CSS 樣式表單，以定義網站的樣式。

CSS 檔案和影像會包含在此實驗室的 Source\Assets\Content 資料夾中。若要將它們新增至應用程式，請將其內容從Windows 檔案總管視窗拖曳到 web Visual Studio Express 中的方案總管，如下所示：

曳

拖曳樣式內容
會出現警告對話方塊，要求確認以取代 Site.css 檔案和一些現有的影像。核 取 [套用至所有專案 ]，然後按一下 [ 是]。

工作 3 - 新增檢視範本

在此工作中，您將新增 [檢視] 範本，以產生 HTML 回應，以使用本練習中新增的配置主版頁面和 CSS。

若要在流覽網站的首頁時使用檢視範本，您必須先指出而不是傳回字串， HomeController Index 方法會傳回 View。開啟 HomeController 類別並變更其 Index 方法以傳回 ActionResult，並讓它傳回 View () 。

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex4 HomeController Index)
```
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return this.View();
    }
}
```
現在，您需要新增適當的檢視範本。若要這樣做，請在[索引] 動作方法內按一下滑鼠右鍵，然後選取 [新增檢視]。這會顯示 [ 新增檢視 ] 對話方塊。

從 Index 方法內新增 View
[ 新增檢視 ] 對話方塊會顯示為產生檢視範本檔案。根據預設，此對話方塊會預先填入檢視範本的名稱，使其符合將使用它的動作方法。因為您在 HomeController 的 Index 巨集指令方法中使用[新增檢視] 操作功能表，所以 [新增檢視] 對話方塊具有 [索引] 做為預設檢視名稱。按一下 [新增] 。

新增檢視對話方塊
Visual Studio 會在Views\Home資料夾內產生Index.cshtml檢視範本，然後開啟它。

已建立首頁索引檢視

注意

Index.cshtml檔案的名稱和位置相關，並遵循預設 ASP.NET MVC 命名慣例。

\Views*Home* 資料夾符合 主控制器) (控制器名稱。檢視範本名稱 (Index) ，符合將顯示檢視的控制器動作方法。

如此一來，ASP.NET MVC 即可避免在使用這個命名慣例傳回 View 時，明確指定檢視範本的名稱或位置。
產生的檢視範本是以稍早定義的 _layout.cshtml 範本為基礎。將 ViewBag.Title 屬性更新為 Home，並將主要內容變更為 [首頁]，如下列程式碼所示：
```
@{
    ViewBag.Title = "Home";
}

<h2>This is the Home Page</h2>
```
選取方案總管中的MvcMusicStore專案，然後按F5執行應用程式。

工作 4：驗證

若要確認您已正確執行上一個練習中的所有步驟，請繼續進行，如下所示：

在瀏覽器中開啟應用程式時，您應該注意：

HomeController 的 Index 巨集指令方法找到並顯示 \Views\Home\Index.cshtml View 範本，即使稱為的程式碼會傳 回 View () ，因為 View 範本遵循標準命名慣例。
首頁會顯示 \Views\Home\Index.cshtml 檢視範本內定義的歡迎訊息。
首頁使用 _layout.cshtml 範本，因此歡迎訊息會包含在標準網站 HTML 版面配置中。

使用定義的 LayoutPage 和樣式的主索引檢視

練習 5：建立檢視模型

到目前為止，您已讓檢視顯示硬式編碼的 HTML，但為了建立動態 Web 應用程式，檢視範本應該從控制器接收資訊。要用於該用途的其中一個常見技巧是 ViewModel 模式，可讓控制器封裝產生適當 HTML 回應所需的所有資訊。

在此練習中，您將瞭解如何建立 ViewModel 類別，並新增必要的屬性：存放區中的內容類型數目，以及這些內容類型的清單。您也會更新 StoreController 以使用已建立的 ViewModel，最後，您將建立新的 View 範本，以在頁面中顯示提及的屬性。

工作 1 - 建立 ViewModel 類別

在此工作中，您將建立 ViewModel 類別，以實作市集內容類型清單案例。

如果尚未開啟，請啟動 VS Express for Web。
在 [ 檔案] 功能表中，選擇 [ 開啟專案]。在 [開啟專案] 對話方塊中，流覽至 Source\Ex05-CreateAViewModel\Begin，選取 [Begin.sln ]，然後按一下 [ 開啟]。或者，您也可以繼續進行完成上一個練習之後取得的解決方案。
1. 如果您開啟提供的 Begin 解決方案，您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建置建置方案] 來建 | 置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，進而減少專案大小。使用 NuGet Power Tools，藉由在Packages.config檔案中指定套件版本，您就能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。
建立 ViewModels 資料夾來保存 ViewModel。若要這樣做，請以滑鼠右鍵按一下最上層 MvcMusicStore 專案，選取 [ 新增 ]，然後選取 [ 新增資料夾]。

新增資料夾
將資料夾命名為 ViewModels。

方案總管中的 ViewModels 資料夾
建立 ViewModel 類別。若要這樣做，請以滑鼠右鍵按一下最近建立的 ViewModels 資料夾，選取 [ 新增 ]，然後選取 [ 新增專案]。在 [ 程式碼] 下，選擇 [ 類別 ] 專案，並將檔案命名為 StoreIndexViewModel.cs，然後按一下 [ 新增]。

新增類別

建立 StoreIndexViewModel 類別

工作 2 - 將屬性新增至 ViewModel 類別

有兩個參數可從 StoreController 傳遞至檢視範本，以產生預期的 HTML 回應：存放區中的內容類型數目和這些內容類型的清單。

在這項工作中，您會將這些 2 個屬性新增至 StoreIndexViewModel 類別： NumberOfGenres (整數) 和 內容類型 ， (字串清單) 。

將 NumberOfGenres 和 Genres 屬性新增至 StoreIndexViewModel 類別。若要這樣做，請將下列 2 行新增至類別定義：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex5 StoreIndexViewModel 屬性)
```
public class StoreIndexViewModel
{
    public int NumberOfGenres { get; set; }

    public List<string> Genres { get; set; }
}
```

注意

{ get; set; }標記法會使用 C# 的自動實作屬性功能。它提供屬性的優點，而不需要我們宣告支援欄位。

工作 3 - 更新 StoreController 以使用 StoreIndexViewModel

StoreIndexViewModel類別會封裝從StoreController的Index方法傳遞至 View 範本以產生回應所需的資訊。

在此工作中，您將更新 StoreController 以使用 StoreIndexViewModel。

開啟 StoreController 類別。

開啟 StoreController 類別
若要從StoreController使用StoreIndexViewModel類別，請在StoreController程式碼頂端新增下列命名空間：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex5 StoreIndexViewModel 使用 ViewModels)
```
using MvcMusicStore.ViewModels;
```
變更 StoreController的 Index 巨集指令方法，讓它建立並填入 StoreIndexViewModel 物件，然後將它傳遞至檢視範本，以產生 HTML 回應。

注意

在實驗室「ASP.NET MVC 模型和資料存取」中，您將撰寫程式碼來擷取資料庫中的存放區內容類型清單。在下列程式碼中，您將建立虛擬資料內容類型 的清單 ，以填入 StoreIndexViewModel。

建立並設定 StoreIndexViewModel 物件之後，它會當做引數傳遞至 View 方法。這表示檢視範本會使用該物件來產生 HTML 回應。

以下列程式碼取代 Index 方法：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex5 StoreController Index 方法)

public ActionResult Index()
{
    // Create a list of genres
    var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};

    // Create our view model
    var viewModel = new StoreIndexViewModel { 
        NumberOfGenres = genres.Count(),
        Genres = genres
    };

    return this.View(viewModel);
}

注意

如果您不熟悉 C#，您可能會假設使用 var 表示 viewModel 變數已晚期繫結。不正確 - C# 編譯器會根據您指派給變數的內容來使用類型推斷，以判斷 viewModel 的類型為 StoreIndexViewModel。此外，藉由將本機 viewModel 變數編譯為 StoreIndexViewModel 類型，即可取得編譯時期檢查和 Visual Studio 程式碼編輯器支援。

工作 4 - 建立使用 StoreIndexViewModel 的檢視範本

在此工作中，您將建立檢視範本，以使用從 Controller 傳遞的 StoreIndexViewModel 物件來顯示內容類型清單。

建立新的檢視範本之前，讓我們先建置專案，讓 [新增檢視] 對話方塊 知道 StoreIndexViewModel 類別。選取 [ 建置] 功能表項目，然後選取 [ 建置 MvcMusicStore] 來建置專案。

建置專案
建立新的檢視範本。若要這樣做，請在 Index 方法內按一下滑鼠右鍵，然後選取 [ 新增檢視]。

新增檢視
由於已從StoreController叫用[新增檢視] 對話方塊，因此預設會在\Views\Store\Index.cshtml檔案中新增檢視範本。核 取 [建立強型別檢視 ] 核取方塊，然後選取 [StoreIndexViewModel ] 作為 [模型] 類別。此外，請確定選取的檢視引擎是 Razor。按一下 [新增] 。

新增檢視對話方塊

會建立並開啟 \Views\Store\Index.cshtml 檢視範本檔案。根據最後一個步驟中提供給 [ 新增檢視 ] 對話方塊的資訊，檢視範本預期 StoreIndexViewModel 實例是用來產生 HTML 回應的資料。您會發現範本會在 ViewPage<musicstore.viewmodels.storeindexviewmodel> C# 中繼承。

工作 5 - 更新檢視範本

在這項工作中，您將更新上一個工作中建立的檢視範本，以擷取頁面內的內容類型數目及其名稱。

注意

您將使用 @ 語法 (通常稱為「程式碼 Nuggets」) ，以在檢視範本內執行程式碼。

在 Index.cshtml 檔案的 Store 資料夾中，將其程式碼取代為下列內容：

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

在StoreIndexViewModel中迴圈流覽內容類型清單，並使用foreach迴圈建立 HTML < ul >清單。 (C#)

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
@foreach (string genreName in Model.Genres)
{
    <li>
        @genreName
    </li>
}
</ul>

按 F5 執行應用程式並流覽 /Store。您會看到從StoreController傳遞至檢視範本之StoreIndexViewModel物件中的內容類型清單。

顯示內容類型清單的檢

顯示內容類型清單的檢視

關閉瀏覽器。

練習 6：在檢視中使用參數

在練習 3 中，您已瞭解如何將參數傳遞至控制器。在此練習中，您將瞭解如何在檢視範本中使用這些參數。為了達到此目的，您會先介紹模型類別，以協助您管理資料和領域邏輯。此外，您將瞭解如何在 ASP.NET MVC 應用程式內建立頁面的連結，而不必擔心 URL 路徑編碼之類的專案。

工作 1 - 新增模型類別

不同于建立的 ViewModels 只是為了將資訊從控制器傳遞至檢視，模型類別的建置是為了包含和管理資料和領域邏輯。在此工作中，您將新增兩個模型類別來代表這些概念： 內容類型 和相簿。

如果尚未開啟，請啟動 VS Express for Web
在 [ 檔案] 功能表中，選擇 [ 開啟專案]。在 [開啟專案] 對話方塊中，流覽至 Source\Ex06-UsingParametersInView\Begin，選取 [Begin.sln ]，然後按一下 [ 開啟]。或者，您也可以繼續進行完成上一個練習之後取得的解決方案。
1. 如果您開啟提供的 Begin 解決方案，您必須先下載一些遺漏的 NuGet 套件，才能繼續。若要這樣做，請按一下 [專案] 功能表，然後選取 [ 管理 NuGet 套件]。
2. 在 [ 管理 NuGet 套件] 對話方塊中，按一下 [ 還原 ] 以下載遺漏的套件。
3. 最後，按一下 [建置建置方案] 來建 | 置方案。
  
  注意
  
  使用 NuGet 的其中一個優點是，您不需要寄送專案中的所有程式庫，進而減少專案大小。使用 NuGet Power Tools，藉由在Packages.config檔案中指定套件版本，您就能夠在第一次執行專案時下載所有必要的程式庫。這就是您從此實驗室開啟現有解決方案之後，必須執行這些步驟的原因。
新增 內容類型 模型類別。若要這樣做，請以滑鼠右鍵按一下方案總管中的Models資料夾，選取 [新增]，然後選取 [新增專案]選項。在 [ 程式碼] 下，選擇 [ 類別 ] 專案並將檔案命名為 Genre.cs，然後按一下 [ 新增]。

新增專案

新增內容類型模型類別

將 Name 屬性新增至內容類型類別。若要這樣做，請新增下列程式碼：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex6 內容類型)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Genre
    {
        public string Name { get; set; }
    }
}

遵循與之前相同的程式，新增 Album 類別。若要這樣做，請以滑鼠右鍵按一下方案總管中的Models資料夾，選取 [新增]，然後選取 [新增專案]選項。在 [ 程式碼] 下，選擇 [ 類別 ] 專案並將檔案命名為 Album.cs，然後按一下 [ 新增]。

將兩個屬性新增至相簿類別： 內容類型 和標題。若要這樣做，請新增下列程式碼：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex6 相簿)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Album
    {
        public string Title { get; set; }

        public Genre Genre { get; set; }
    }
}

工作 2 - 新增 StoreBrowseViewModel

StoreBrowseViewModel將用於這項工作，以顯示符合所選內容類型的相簿。在此工作中，您將建立此類別，然後新增兩個屬性來處理 內容類型 及其相簿的清單。

新增 StoreBrowseViewModel 類別。若要這樣做，請以滑鼠右鍵按一下方案總管中的ViewModels資料夾，選取 [新增]，然後選取 [新增專案]選項。在 [ 程式碼] 下，選擇 [ 類別 ] 專案，並將檔案命名為 StoreBrowseViewModel.cs，然後按一下 [ 新增]。

在 StoreBrowseViewModel 類別中新增模型參考。若要這樣做，請使用命名空間新增下列命令：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex6 UsingModel)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
    }
}

將兩個屬性新增至 StoreBrowseViewModel 類別： 內容類型 和相簿。若要這樣做，請新增下列程式碼：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex6 ModelProperties)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
        public Genre Genre { get; set; }

        public List<Album> Albums { get; set; }
    }
}

注意

什麼是清單 < 相簿 > ？：此定義使用 List T 類型，其中T > 會將此 List <元素所屬的類型限制為，在此情況下，Album (或其任何子系) 。

這種設計類別和方法的能力會延遲一或多個類型的規格，直到宣告類別或方法，並由用戶端程式代碼具現化，就是稱為泛型的 C# 語言功能。

清單 <T >是ArrayList類型的泛型對等專案，可在System.Collections.Generic命名空間中使用。使用泛型的其中一個優點是，由於已指定類型，因此您不需要處理類型檢查作業，例如將元素轉換成 Album ，就像使用 ArrayList一樣。

工作 3 - 在 StoreController 中使用新的 ViewModel

在此工作中，您將修改 StoreController的 Browse 和 Details 動作方法，以使用新的 StoreBrowseViewModel。

在 StoreController 類別中新增 Models 資料夾的參考。若要這樣做，請展開方案總管中的Controllers資料夾，然後開啟StoreController 類別。然後，新增下列程式碼：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex6 UsingModelInController)
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.ViewModels;
using MvcMusicStore.Models;
```

取代 Browse 巨集指令方法，以使用 StoreViewBrowseController 類別 。您將在下一個實際操作實驗室中，使用虛擬資料建立一個內容類型和兩個新的相簿物件 (，您將取用資料庫中的實際資料) 。若要這樣做，請將 Browse 方法取代為下列程式碼：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex6 BrowseMethod)

//
// GET: /Store/Browse?genre=Disco

public ActionResult Browse(string genre)
{
    var genreModel = new Genre()
    {
        Name = genre
    };

    var albums = new List<Album>()
    {
        new Album() { Title = genre + " Album 1" },
        new Album() { Title = genre + " Album 2" }
    };

    var viewModel = new StoreBrowseViewModel()
    {
        Genre = genreModel,
        Albums = albums
    };

    return this.View(viewModel);
}

取代 Details 巨集指令方法，以使用 StoreViewBrowseController 類別 。您將建立要傳回至View的新Album物件。若要這樣做，請將 Details 方法取代為下列程式碼：

(程式碼片段 - ASP.NET MVC 4 基本概念 - Ex6 DetailsMethod)
```
//
// GET: /Store/Details/5

public ActionResult Details(int id)
{
  var album = new Album { Title = "Sample Album" };

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

工作 4 - 新增流覽檢視範本

在此工作中，您將新增 [流覽 檢視] 以顯示針對特定內容類型找到的相簿。

建立新的檢視範本之前，您應該先建置專案，讓 [新增檢視 對話方塊] 知道要使用的 ViewModel 類別。選取 [ 建置] 功能表項目，然後選取 [ 建置 MvcMusicStore] 來建置專案。
新增流覽檢視。若要這樣做，請在StoreController的Browse巨集指令方法中按一下滑鼠右鍵，然後按一下 [新增檢視]。
在 [ 新增檢視 ] 對話方塊中，確認 [檢視名稱] 為 [流覽]。核取 [建立強型別檢視] 核取方塊，然後從 [模型類別]下拉式清單中選取[StoreBrowseViewModel]。保留其他欄位的預設值。然後按一下 [ 新增]。

新增流覽檢視

修改 Browse.cshtml 以顯示內容類型的資訊，並存取傳遞至檢視範本的 StoreBrowseViewModel 物件。若要這樣做，請將內容取代為下列內容： (C#)

@model MvcMusicStore.ViewModels.StoreBrowseViewModel

@{
    ViewBag.Title = "Browse Albums";
}

<h2>Browsing Genre: @Model.Genre.Name</h2>

<ul>
    @foreach (var album in Model.Albums)
    {
        <li>@album.Title</li>
    }
</ul>

工作 5 - 執行應用程式

在此工作中，您將測試 Browse 方法是否從 Browse 方法動作擷取相簿。

按 F5 以執行應用程式。
專案會從首頁開始。將 URL 變更為 /Store/Browse？內容類型=Disco 以確認動作會傳回兩個相簿。

流覽市集 Disco 相簿

工作 6 - 顯示特定相簿的相關資訊

在此工作中，您將實作 [市集/詳細 資料] 檢視，以顯示特定相簿的相關資訊。在此實際操作實驗室中，您將會顯示有關相簿的所有內容都已包含在 [檢視 ] 範本中。因此，您不會建立 StoreDetailsViewModel 類別，而是使用目前的 StoreBrowseViewModel 範本，將相簿傳遞給它。

視需要關閉瀏覽器，以返回 Visual Studio 視窗。為StoreController的Details巨集指令方法新增詳細資料檢視。若要這樣做，請以滑鼠右鍵按一下StoreController類別中的Details方法，然後按一下 [新增檢視]。
在 [ 新增檢視] 對話方塊中，確認 [ 檢視名稱 ] 是 [詳細資料]。核取[建立強型別檢視]核取方塊，然後從 [模型類別] 下拉式清單中選取 [相簿]。保留其他欄位的預設值。然後按一下 [ 新增]。這會建立並開啟 \Views\Store\Details.cshtml 檔案。

新增詳細資料檢視
修改 Details.cshtml 檔案以顯示相簿的資訊，並存取傳遞給檢視範本的 Album 物件。若要這樣做，請將內容取代為下列內容： (C#)
```
@model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

<h2>Album: @Model.Title</h2>
```

工作 7 - 執行應用程式

在這項工作中，您將測試 [詳細 資料檢視] 會從 [詳細 資料] 動作方法擷取相簿的資訊。

按 F5 執行應用程式。
專案會從首頁開始。將 URL 變更為 /Store/Details/5 ，以驗證相簿的資訊。

流覽相簿的詳細資料

工作 8 - 在頁面之間新增連結

在這項工作中，您會在市集檢視中新增連結，讓每個內容類型名稱中的連結連結到適當的 /Store/流覽 URL。如此一來，當您按一下 [內容類型] 時，例如 Disco，它會流覽至 /Store/Browse？genre=Disco URL。

視需要關閉瀏覽器，以返回 Visual Studio 視窗。更新 [索引 ] 頁面以新增流覽頁面的連結。若要這樣做，請在方案總管展開Views資料夾，然後按兩下Index.cshtml頁面的Store資料夾。
將連結新增至 [流覽] 檢視，指出選取的內容類型。若要這樣做，請取代li > 標籤內的 <下列醒目提示程式碼： (C#)
```
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p> Select from @Model.NumberOfGenres genres</p>

<ul>
    @foreach (string genreName in Model.Genres) {
        <li>
            @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
        </li>
        }
</ul>
```
注意

另一種方法是直接連結至頁面，程式碼如下所示：

<a href=「/Store/Browse？內容類型=@genreName」 >@genreName</a&gt ;

雖然此方法可運作，但取決於硬式編碼字串。如果您稍後重新命名控制器，則必須手動變更此指示。較佳的替代方案是使用 HTML 協助程式 方法。 ASP.NET MVC 包含 HTML 協助程式方法，可用於這類工作。 Html.ActionLink () 協助程式方法可讓您輕鬆地建置 HTML <> 連結，確定 URL 路徑已正確編碼 URL。

Html.ActionLink 有數個多載。在此練習中，您將使用採用三個參數的其中一個：
1. 連結文字，其會顯示內容類型名稱
2. 控制器動作名稱 (流覽)
3. 路由參數值，指定 (內容類型) 的名稱，以及 (內容類型名稱 的值)

工作 9 - 執行應用程式

在這項工作中，您將測試每個內容類型是否都會以適當 /Store/Browse URL 的連結來顯示。

按 F5 執行應用程式。
專案會從首頁開始。將 URL 變更為 /Store ，以確認每個內容類型連結至適當的 /Store/流覽 URL。

流覽

流覽內容類型，其中包含流覽頁面的連結

工作 10 - 使用動態 ViewModel 集合傳遞值

在這項工作中，您將瞭解簡單且功能強大的方法，在控制器與檢視之間傳遞值，而不需在模型中進行任何變更。 ASP.NET MVC 4 提供集合「ViewModel」，該集合也可以指派給任何動態值，並在控制器和檢視記憶體取。

您現在將使用 ViewBag 動態集合，將控制器中的「星狀內容類型」清單傳遞至檢視。市集索引檢視會存取 ViewModel 並顯示資訊。

視需要關閉瀏覽器，以返回 Visual Studio 視窗。開啟 StoreController.cs 並修改 Index 方法，以在 ViewModel 集合中建立星型內容類型清單：

public ActionResult Index()
{
    // Create list of genres
    var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };

    // Create your view model
    var viewModel = new StoreIndexViewModel
    {
        NumberOfGenres = genres.Count,
        Genres = genres
    };

    ViewBag.Starred = new List<string> { "Rock", "Jazz" };

    return this.View(viewModel);
}

注意

您也可以使用 ViewBag[「Starred」語法 來存取屬性。

此實驗室的Source\Assets\Images資料夾中包含star圖示「starred.png」。若要將它新增至應用程式，請將內容從Windows 檔案總管視窗拖曳到 Visual Web Developer Express 中的方案總管，如下所示：

將star映射新增至解決方案

開啟 [Store/Index.cshtml ] 檢視並修改內容。您將讀取 ViewBag 集合中的「starred」屬性，並詢問目前的內容類型名稱是否位於清單中。在此情況下，您會在內容類型連結右側顯示star圖示。 (C#)

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
     ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
     @foreach (string genreName in Model.Genres)
     {
          <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)

                @if (ViewBag.Starred.Contains(genreName))
                { 
                     <img src="../../Content/Images/starred.png" alt="Starred element" />
                }
          </li>
     }
</ul>
<br />
<h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>

工作 11 - 執行應用程式

在這項工作中，您將測試星型內容類型是否顯示star圖示。

按 F5 執行應用程式。
專案會從首頁開始。將 URL 變更為 /Store ，以確認每個精選內容類型都有遵守的標籤：

使用星形元素流覽內容類型

練習 7：ASP.NET MVC 4 新範本四周

在此練習中，您將探索 ASP.NET MVC 4 專案範本中的增強功能，並查看新範本的最相關功能。

工作 1：探索 ASP.NET MVC 4 網際網路應用程式範本

如果尚未開啟，請啟動 VS Express for Web
選取 [檔案] |新增 |專案 功能表命令。在 [ 新增專案] 對話方塊中，選取 Visual C#| 左窗格樹狀結構上的 Web 範本，然後選擇 ASP.NET MVC 4 Web 應用程式。 將專案命名 為 MusicStore 並將 方案名稱 更新為 [開始]，然後選取位置 (或保留預設) ，然後按一下 [ 確定]。

建立新的 ASP.NET MVC 4 專案
在 [新增 ASP.NET MVC 4 專案 ] 對話方塊中，選取 [網際網路應用程式 ] 專案範本，然後按一下 [ 確定]。請注意，您可以選取 Razor 或 ASPX 作為檢視引擎。

建立新的 ASP.NET MVC 4 網際網路應用程式

注意

Razor 語法已在 ASP.NET MVC 3 中引進。其目標是將檔案中所需的字元數和按鍵數目降到最低，以啟用快速且流暢的編碼工作流程。 Razor 利用現有的 C#/VB (或其他) 語言技能，並提供範本標記語法，以啟用絕佳的 HTML 建構工作流程。
按 F5 執行解決方案，並查看更新的範本。您可以查看下列功能：
1. 新式樣式範本
  
  範本已更新，提供更現代的樣式。
  
  ASP.NET MVC 4 restyled 範本
2. 自適性轉譯
  
  查看調整瀏覽器視窗的大小，並注意頁面配置如何動態調整為新的視窗大小。這些範本會使用調適型轉譯技術，在桌面和行動平臺中正確轉譯，而不需進行任何自訂。
  
  ASP.NET 不同瀏覽器大小的 MVC 4 專案範本
關閉瀏覽器以停止偵錯工具並返回 Visual Studio。
現在您可以探索解決方案，並查看專案範本中 ASP.NET MVC 4 引進的一些新功能。

ASP.NET MVC 4 網際網路應用程式專案範本
1. HTML5 標記
  
  流覽範本檢視以找出新的主題標記，例如在[首頁] 資料夾內開啟About.cshtml檢視。
  
  使用 Razor 和 HTML5 標記的新範本
2. 包含的 JavaScript 程式庫
  1. jQuery：jQuery可簡化 HTML 檔案周遊、事件處理、動畫和 Ajax 互動。
  2. jQuery UI：此程式庫提供低階互動和動畫、進階效果和可主題化小工具的抽象概念，建置於 jQuery JavaScript 程式庫之上。
    
    注意
    
    您可以在 [ http://docs.jquery.com/ ] () http://docs.jquery.com/ 中瞭解 jQuery 和 jQuery UI。
  3. 一個 ASP.NET MVC 4 預設範本現在包含 一個 JavaScript MVVM 架構，可讓您使用 JavaScript 和 HTML 建立豐富且高度回應的 Web 應用程式。如同 ASP.NET MVC 3，jQuery 和 jQuery UI 程式庫也會包含在 ASP.NET MVC 4 中。
    
    注意
    
    您可以在此連結中取得一個關於一個其他專案程式庫的詳細資訊： http://learn.knockoutjs.com/ 。
  4. Modernizr：此程式庫會自動執行，讓您的網站在使用 HTML5 和 CSS3 技術時與舊版瀏覽器相容。
    
    注意
    
    您可以在此連結中取得 Modernizr 程式庫的詳細資訊： http://www.modernizr.com/ 。
3. 解決方案中包含的 SimpleMembership
  
  SimpleMembership 已設計為取代先前 ASP.NET 角色和成員資格提供者系統。它有許多新功能，可讓開發人員更輕鬆地以更有彈性的方式保護網頁。
  
  網際網路範本已設定一些專案來整合 SimpleMembership，例如，AccountController 已準備好使用 OAuthWebSecurity (進行 OAuth 帳戶註冊、登入、管理等) 和 Web 安全性。
  
  解決方案中包含的 SimpleMembership
  
  注意
  
  在 MSDN 中尋找 OAuthWebSecurity 的詳細資訊。

注意

此外，您可以遵循附錄 B：使用 Web Deploy 發佈 ASP.NET MVC 4 應用程式，將此應用程式部署至 Windows Azure 網站。

總結

完成此Hands-On實驗室，您已瞭解 ASP.NET MVC 的基本概念：

MVC 應用程式的核心元素及其互動方式
如何建立 ASP.NET MVC 應用程式
如何新增和設定控制器來處理透過 URL 和 querystring 傳遞的參數
如何新增版面配置主版頁面來設定一般 HTML 內容的範本、增強外觀及操作的 StyleSheet，以及顯示 HTML 內容的檢視範本
如何使用 ViewModel 模式將屬性傳遞至檢視範本以顯示動態資訊
如何使用傳遞至檢視範本中控制器的參數
如何將連結新增至 ASP.NET MVC 應用程式內的頁面
如何在檢視中新增和使用動態屬性
ASP.NET MVC 4 專案範本中的增強功能

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

您可以使用 Microsoft Web Platform Installer 安裝Microsoft Visual Studio Express 2012 for Web或其他「快速」版本。 下列指示會引導您使用Microsoft Web Platform Installer安裝Visual Studio Express 2012 for Web所需的步驟。

移至 [ https://go.microsoft.com/?linkid=9810169 ] (https://go.microsoft.com/?linkid=9810169) 。或者，如果您已安裝 Web Platform Installer，您可以開啟它，並使用Windows Azure SDK 搜尋產品「Visual Studio Express 2012 for Web」。
按一下 [ 立即安裝]。如果您沒有 Web Platform Installer ，系統會將您重新導向以下載並先安裝。
Web Platform Installer開啟之後，按一下 [安裝] 以啟動安裝程式。

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

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

安裝進度
安裝完成時，按一下 [ 完成]。

安裝已完成
按一下 [結束 ] 以關閉 Web Platform Installer。
若要開啟 web Visual Studio Express，請移至 [開始]畫面並開始撰寫「VS Express」，然後按一下[VS Express for Web] 圖格。

VS Express for Web 磚

附錄 B：使用 Web Deploy 發佈 ASP.NET MVC 4 應用程式

本附錄將示範如何從 Windows Azure 管理入口網站建立新的網站，併發布您遵循實驗室取得的應用程式，並利用 Windows Azure 所提供的 Web Deploy 發佈功能。

工作 1 - 從 Windows Azure 入口網站建立新的網站

移至 Windows Azure 管理入口網站，並使用與您訂用帳戶相關聯的 Microsoft 認證登入。

注意

使用 Windows Azure，您可以免費裝載 10 ASP.NET 網站，然後在流量成長時進行調整。您可以在這裡註冊。

登入 Windows Azure 管理入口網站
按一下命令列上的 [ 新增 ]。

建立新的網站
按一下[計算 | 網站]。然後選取 [快速建立] 選項。提供新網站的可用 URL，然後按一下 [ 建立網站]。

注意

Windows Azure 網站是可在雲端中執行之 Web 應用程式的主機，您可以控制和管理。 [快速建立] 選項可讓您從入口網站外部將已完成的 Web 應用程式部署至 Windows Azure 網站。它不包含設定資料庫的步驟。

建立

使用快速建立建立新網站
等到新網站建立為止。
建立網站之後，請按一下 URL 資料行底下的連結。檢查新的網站是否正常運作。

流覽至新的網站

執行的網站
返回至入口網站，然後按一下 [名稱] 資料行底下的網站名稱以顯示管理頁面。

開啟網站管理頁面
在 [儀表板 ] 頁面的 [ 快速概覽 ] 區段下，按一下 [ 下載發佈設定檔 ] 連結。

注意

發行設定檔包含針對每個啟用的發行方法，將 Web 應用程式發佈至 Windows Azure 網站所需的所有資訊。發行設定檔包含 URL、使用者認證和資料庫字串，這些都是用來連接到已啟用發行方法的每個端點並進行驗證的必要資訊。 Microsoft WebMatrix 2、Microsoft Visual Studio Express for Web和Microsoft Visual Studio 2012支援讀取發佈設定檔，以自動設定這些程式，以將 Web 應用程式發佈至 Windows Azure 網站。

下載網站發佈設定檔
將發行設定檔檔下載到已知位置。在此練習中，您將瞭解如何使用此檔案，從 Visual Studio 將 Web 應用程式發佈至 Windows Azure 網站。

儲存發行設定檔

工作 2 - 設定資料庫伺服器

如果您的應用程式使用SQL Server資料庫，您必須建立SQL Database伺服器。如果您想要部署未使用SQL Server的簡單應用程式，您可以略過這項工作。

您需要SQL Database伺服器來儲存應用程式資料庫。您可以從 Windows Azure 管理入口網站中的訂用帳戶檢視SQL Database伺服器，網址為Sql Databases | Server 伺服器的 | 儀表板。如果您沒有建立伺服器，您可以使用命令列上的 [ 新增 ] 按鈕來建立伺服器。記下 伺服器名稱和 URL、系統管理員登入名稱和密碼，因為您將在下一個工作中使用這些名稱。尚未建立資料庫，因為它將在稍後階段中建立。

SQL Database伺服器儀表板
在下一個工作中，您將測試來自 Visual Studio 的資料庫連線，因此您必須在伺服器的 [允許 IP 位址] 清單中包含本機 IP 位址。若要這樣做，請按一下 [ 設定]，從 [目前用戶端 IP 位址 ] 中選取 IP 位址，然後將它貼到 [ 開始 IP 位址 ] 和 [ 結束 IP 位址 ] 文字方塊中，然後按一下。

新增用戶端 IP 位址
將 [用戶端 IP 位址 ] 新增至允許的 IP 位址清單之後，按一下 [ 儲存 ] 以確認變更。

確認變更

工作 3 - 使用 Web Deploy 發佈 ASP.NET MVC 4 應用程式

返回至 ASP.NET MVC 4 解決方案。在方案總管中，以滑鼠右鍵按一下網站專案，然後選取 [發佈]。

發佈網站
匯入您在第一個工作中儲存的發行設定檔。

匯入發行設定檔
按一下 [ 驗證連線]。驗證完成後，請按 [下一步]。

注意

一旦您看到綠色核取記號出現在 [驗證連線] 按鈕旁，驗證就會完成。

驗證連線
在 [ 設定 ] 頁面的 [ 資料庫 ] 區段下，按一下資料庫連線文字方塊旁的按鈕 (即 DefaultConnection) 。

Web 部署設定
設定資料庫連線，如下所示：
- 在[伺服器名稱] 中，使用tcp：前置詞輸入您的SQL Database伺服器 URL。
- 在 [使用者名稱 ] 中，輸入您的伺服器管理員登入名稱。
- 在 [密碼 ] 中，輸入您的伺服器管理員登入密碼。
- 輸入新的資料庫名稱，例如： MVC4SampleDB。
  
  設定目的地連接字串
然後按一下 [確定] 。當系統提示您建立資料庫時，請按一下 [是]。

建立資料庫
您將用來連線到 Windows Azure 中SQL Database的連接字串會顯示在 [預設連線] 文字方塊中。然後按一下 [下一步] 。

指向 SQL Database 的連接字串
在 [預覽] 頁面中，按一下 [ 發佈]。

發佈 Web 應用程式
發佈程式完成後，您的預設瀏覽器將會開啟已發佈的網站。

發佈至 Windows Azure 的應用程式