共用方式為

ASP.NET MVC 4 的新功能

  • 發行項

依 Web Camp 小組

下載 Web Camps 培訓套件

ASP.NET MVC 4 是一種架構，可使用 ASP.NET 和 .NET 架構的強大功能，建置可調整、以標準為基礎的 Web 應用程式。 這個新的第四版架構著重於讓行動Web應用程式開發更容易。

首先，當您建立新的 ASP.NET MVC 4 專案時，現在有一個行動應用程式專案範本，可用來建置專為行動裝置使用的獨立應用程式。 此外，ASP.NET MVC 4 會透過 jQuery.Mobile.MVC NuGet 套件與 jQuery Mobile 整合。 jQuery Mobile 是以 HTML5 為基礎的架構，可用來開發與所有熱門行動裝置平臺相容的 Web 應用程式，包括 Windows Phone、iPhone、Android 等等。 不過，如果您需要特製化，ASP.NET MVC 4 也可讓您為不同的裝置提供不同的檢視，並提供裝置特定的優化。

在此實際操作實驗室中，您將從 ASP.NET MVC 4「因特網應用程式」專案範本開始，以建立相片庫應用程式。 您將使用 jQuery Mobile 和 ASP.NET MVC 4 的新功能，逐漸增強應用程式，使其與不同的行動裝置和桌面網頁瀏覽器相容。 您也將瞭解程式代碼產生的新程式代碼配方，以及 ASP.NET MVC 4 如何支援 Task<ActionResult> 傳回類型，讓您更輕鬆地撰寫異步動作方法。

注意

所有範例程式代碼和代碼段都包含在 Web Camp 訓練工具包中，可在 Microsoft-Web/WebCampTrainingKit 版本取得。 此實驗室專屬的專案可在 ASP.NET 4.5 的 Web Form 新功能取得。

目標

在這個實作教室中，您將學習如何：

  • 利用 ASP.NET MVC 專案範本的增強功能，包括新的行動應用程式項目範本
  • 使用 HTML5 檢視區屬性和 CSS 媒體查詢來改善行動裝置上的顯示
  • 使用 jQuery Mobile 進行漸進式增強功能，以及建置觸控優化的 Web UI
  • 建立行動裝置特定檢視
  • 使用檢視切換器元件在應用程式中的行動和桌面檢視之間切換
  • 使用工作支援建立異步控制器

必要條件

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

設定

在整個實作教室文件中，系統將指示您插入程式碼區塊。 為了方便起見，大部分的程式代碼都以Visual Studio代碼段的形式提供，您可以從Visual Studio中使用，以避免必須手動新增程式代碼。

若要安裝代碼段：

  1. 開啟 Windows 檔案總管視窗，並瀏覽至實驗室的 Source\Setup 資料夾。
  2. 按兩下 此資料夾中的Setup.cmd 檔案，以安裝Visual Studio代碼段。

如果您對 Visual Studio 程式碼片段不熟悉，並且想了解如何使用它們，可以參考本文件的附錄「附錄 A：使用程式碼片段」。

練習

這個實作教室包括以下練習：

  1. 新的 ASP.NET MVC 4 專案範本
  2. 建立相片庫 Web 應用程式
  3. 新增行動裝置的支援
  4. 使用異步控制器

注意

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

完成本實驗的預計時間：60 分鐘。

練習 1：新的 ASP.NET MVC 4 專案範本

在此練習中，您將探索 ASP.NET MVC 4 專案範本中的增強功能。 除了已存在於MVC 3中的因特網應用程式範本之外，此版本現在也包含適用於行動應用程式的個別範本。 首先，您將查看每個範本的一些相關功能。 然後，您將使用正確的方法，在不同的平臺上正確轉譯頁面。

工作 1 - 探索因特網應用程式範本

  1. 開啟 Visual Studio。

  2. 選取檔案 |新增 |項目 功能表命令。 在 [ 新增專案] 對話框中，選取 Visual C# |左窗格樹狀結構上的 Web 範本，然後選擇 [ASP.NET MVC 4 Web 應用程式]。 將專案 命名為 PhotoGallery、選取位置（或保留預設值），然後按兩下 [ 確定]。

    注意

    您稍後會自定義您目前正在建立的 PhotoGallery ASP.NET MVC 4 解決方案。

    建立新專案

    建立新專案

  3. 在 [ 新增 ASP.NET MVC 4 專案 ] 對話框中，選取 [因特網應用程式 ] 專案範本，然後按兩下 [ 確定]。 請確定您已選取 Razor 作為檢視引擎。

    建立新的 ASP.NET MVC 4因特網應用程式

    建立新的 ASP.NET MVC 4因特網應用程式

    注意

    Razor 語法已在MVC 3 ASP.NET 引進。 其目標是將檔案中所需的字元數和擊鍵數目降到最低，以啟用快速且流暢的編碼工作流程。 Razor 會利用現有的 C# /VB（或其他）語言技能，並提供範本標記語法，以啟用令人敬畏的 HTML 建構工作流程。

  4. 按 F5 執行解決方案，並查看更新的範本。 您可以檢視下列功能：

    新式樣式範本

    範本已更新，提供更現代的樣式。

    ASP.NET MVC 4 修改範本

    ASP.NET MVC 4 修改範本

    新增聯繫人頁面

    新增聯繫人頁面

    自適性轉譯

    查看調整瀏覽器視窗的大小，並注意頁面配置如何動態調整為新的視窗大小。 這些範本會使用調適型轉譯技術，在桌面和行動平臺中正確轉譯，而不需要任何自定義。

    ASP.NET 不同瀏覽器大小的MVC 4專案範本

    ASP.NET 不同瀏覽器大小的MVC 4專案範本

    使用 JavaScript 的更豐富 UI

    默認項目範本的另一個增強功能是使用JavaScript來提供更互動式的JavaScript。 範本中使用的登入和註冊鏈接會示範如何使用 jQuery 驗證來驗證來自客戶端的輸入欄位。

    jQuery 驗證

    jQuery 驗證

    注意

    請注意兩個登入區段，在第一節中，您可以使用網站的已註冊帳戶登入，在第二個區段中，您也可以使用google等其他驗證服務登入（預設為停用）。

  5. 關閉瀏覽器以停止調試程式並返回 Visual Studio。

  6. 開啟位於 App_Start資料夾底下的檔案AuthConfig.cs。

  7. 請從最後一行移除批注，以註冊 Google 用戶端以進行 OAuth 驗證。

    public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

    注意

    請注意，您可以使用 Facebook、Twitter、Microsoft 等任何 OpenID 或 OAuth 服務輕鬆啟用驗證。

  8. 按 F5 執行方案，並流覽至登入頁面。

  9. 選取 [Google 服務] 以登入。

    選取登入服務

    選取登入服務

  10. 使用Google帳戶登入。

  11. 允許網站 （localhost） 從Google帳戶擷取資訊。

  12. 最後，您必須在網站中註冊，才能建立Google帳戶的關聯。

建立Google帳戶的關聯

關聯您的Google帳戶 13。關閉瀏覽器以停止調試程式並返回 Visual Studio。 14.現在探索解決方案，查看專案範本中 ASP.NET MVC 4 引進的一些其他新功能。

ASP.NET MVC 4因特網應用程式專案範本

ASP.NET MVC 4因特網應用程式專案範本

  • HTML 5 標記

    瀏覽範本檢視以找出新的主題標記。

    使用Razor和HTML5標記 About.cshtml 的新範本。

    使用Razor和HTML5標記的新範本（About.cshtml）。

  • 已更新 JavaScript 連結庫

    ASP.NET MVC 4 預設範本現在包含 KnockoutJS，這是 JavaScript MVVM 架構，可讓您使用 JavaScript 和 HTML 來建立豐富且高度回應的 Web 應用程式。 如同MVC3，jQuery和 jQuery UI 連結庫也會包含在MVC 4 ASP.NET。

    注意

    您可以在此連結中取得 KnockOutJS 連結庫的詳細資訊：[http://learn.knockoutjs.com/]（http://learn.knockoutjs.com/）。 此外，您可以在 [http://docs.jquery.com/]（http://docs.jquery.com/） 中瞭解 jQuery 和 jQuery UI。

工作 2 - 探索行動應用程式範本

ASP.NET MVC 4 有助於開發行動和平板電腦瀏覽器的網站。 此範本的應用程式結構與因特網應用程式範本相同（請注意控制器程式代碼幾乎相同），但其樣式已修改為在觸控式行動裝置中正確轉譯。

  1. 選取檔案 |新增 |項目 功能表命令。 在 [ 新增專案] 對話框中，選取 Visual C# |左窗格樹狀結構上的 Web 範本，然後選擇 ASP.NET MVC 4 Web 應用程式。 將專案 命名為 PhotoGallery.Mobile、選取位置（或保留預設值）、選取 [新增至方案]，然後按兩下 [ 確定]。

  2. 在 [ 新增 ASP.NET MVC 4 專案 ] 對話框中，選取 [行動應用程式 ] 專案範本，然後按兩下 [ 確定]。 請確定您已選取 Razor 作為檢視引擎。

    建立新的 ASP.NET MVC 4行動應用程式

    建立新的 ASP.NET MVC 4行動應用程式

  3. 現在您可以探索解決方案，並查看適用於行動裝置的 ASP.NET MVC 4 解決方案範本所引進的一些新功能：

    • jQuery 行動連結庫

      行動應用程式專案範本包含 jQuery 行動連結庫，這是行動瀏覽器相容性 開放原始碼 連結庫。 jQuery Mobile 會對支援 CSS 和 JavaScript 的行動瀏覽器套用「漸進增強」功能。 漸進式增強功能可讓所有瀏覽器顯示網頁的基本內容，而只允許最強大的瀏覽器顯示豐富的內容。 包含在 jQuery 行動樣式中的 JavaScript 和 CSS 檔案可協助行動瀏覽器在畫面中調整內容，而不需在頁面標記中進行任何變更。

      jQuery-mobile-library-included-in-the-template

      包含在範本中的 jQuery 行動連結庫

    • HTML5 型標記

      Mobile-application-template-using-HTML5-markup

      使用 HTML5 標記的行動應用程式範本（Login.cshtml 和 index.cshtml）

  4. 按 F5 運行解決方案。

  5. 開啟 Windows Phone 7 模擬器。

  6. 在手機開始畫面中，開啟 Internet Explorer。 查看桌面應用程式啟動位置的 URL，然後從電話瀏覽至該 URL（例如 http://localhost:[PortNumber]/）。

  7. 現在您可以輸入登入頁面，或查看關於頁面。 請注意，網站的樣式是以適用於行動裝置的新 Metro 應用程式為基礎。 ASP.NET MVC 4 專案範本會在行動裝置上正確顯示，並確定頁面的所有元素都可見並啟用。 請注意，標頭上的連結夠大，足以按兩下或點選。

    行動裝置中的專案範本頁面

    行動裝置中的專案範本頁面

  8. 新的範本也會使用 Viewport 中繼標記。 大部分的行動瀏覽器都會定義虛擬瀏覽器視窗或「檢視區」的寬度，其寬度大於行動裝置的實際寬度。 這可讓行動瀏覽器在虛擬顯示器內顯示整個網頁。 Viewport 中繼標籤可讓 Web 開發人員在行動裝置上設定瀏覽器區域的寬度、高度和縮放比例。行動應用程式的 ASP.NET MVC 4 範本會將檢視區設定為版面配置範本中的裝置寬度 Shared_Layout （“width=device-width”），讓所有頁面的檢視區都設定為裝置螢幕寬度。 請注意，Viewport 中繼標記不會變更預設瀏覽器檢視。

  9. 開啟位於 Views 的 _Layout.cshtml |共享資料夾，並將 Viewport 中繼標記批註。 如果尚未開啟，請執行應用程式，並查看差異。

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

批註檢視區中繼標記之後的網站

批註檢視區中繼標籤 10 之後的網站。在 Visual Studio 中，按 SHIFT + F5 停止偵錯應用程式。 11.取消批註檢視區中繼標記。

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

工作 3 - 使用調適型轉譯

在這項工作中，您將瞭解另一種方法，在行動裝置和網頁瀏覽器上正確轉譯網頁，而不需要任何自定義。 您已經使用 Viewport 中繼標記與類似的用途。 現在，您將遇到另一個功能強大的方法： 調適型轉譯。

調適型轉譯是一種技術，使用 CSS3 媒體查詢 來自定義套用至頁面的樣式。 媒體查詢會定義樣式表單內的條件，以特定條件將 CSS 樣式分組。 只有當條件為 true 時，樣式才會套用至宣告的物件。

調適型轉譯技術所提供的彈性可讓任何自定義專案在不同的裝置上顯示網站。 您可以在單一樣式表單上定義您想要的樣式數量，而不需要撰寫邏輯程式代碼來選擇樣式。 因此，它是一種非常整齊的調整頁面樣式的方式，因為它可減少重複的程式代碼和邏輯數量，以供轉譯之用。 另一方面，頻寬耗用量會增加，因為 CSS 檔案的大小可能會稍微增加。

藉由使用調適型轉譯技術，不論瀏覽器為何，您的網站都會 正確顯示。 不過，您應該考慮頻寬額外負載是否值得考慮。

注意

媒體查詢的基本格式是：[範圍： @media 所有 | 手持 | 列印 | 投影 | 螢幕] （[property：value] 和 ...[property：value]）

媒體查詢範例： >@media所有 和 （最大寬度：1000px） 和 （min-width： 700px） {}： 針對 700px 和 1000px 之間的所有解析度。

@media螢幕和 （最小寬度： 400px） 和 （最大寬度： 700px） { ... }： 僅適用於螢幕。 解析度必須介於 400 到 700px 之間。

@media手持和 （最小寬度： 20em）， 螢幕和 （最小寬度： 20em） { ... }： 適用於手持裝置（行動裝置）和螢幕。 最小寬度必須大於 20em。

您可以在 W3C 網站上找到此項目的詳細資訊。

您現在將探索調適型轉譯的運作方式，改善 ASP.NET MVC 4預設網站範本的可讀性。

  1. 開啟您在工作 1 建立的PhotoGallery.sln 解決方案，然後選取 PhotoGallery 專案。 按 F5 運行解決方案。

  2. 調整瀏覽器的寬度，將視窗設定為一半或小於其原始大小的四分之一。 請注意標頭中的項目會發生什麼情況：某些元素不會出現在標頭的可見區域中。

  3. 從 Visual Studio 方案總管開啟Site.css檔案，位於 [內容專案] 資料夾中。 按 CTRL + F 以開啟 Visual Studio 整合式搜尋，並寫入 @media 以尋找 CSS 媒體查詢。

    此範本中定義的媒體查詢條件會以這種方式運作：當瀏覽器的視窗大小低於 850 像素時，套用的 CSS 規則就是在此媒體區塊內定義的規則。

    尋找媒體查詢

    尋找媒體查詢

  4. 以 10px 取代以 850 px 設定的最大寬度屬性值，以停用調適型轉譯，然後按 CTRL + S 儲存變更。 返回瀏覽器，然後按 CTRL + F5 以使用您所做的變更重新整理頁面。 請注意調整窗口寬度時，這兩個頁面的差異。

    頁面正在套用 <span 類別=@media樣式在左側和右側，省略樣式“title=”在左側，頁面會套用@media樣式，在右側省略樣式“ />

    在左側，頁面會套用 @media 樣式，在右側省略樣式

    現在，讓我們看看行動裝置上會發生什麼事：

    在左側，頁面會套用 <span 類別=@media樣式，在右側省略樣式“title=”在左側，頁面會套用@media樣式，在右側省略樣式“ />

    在左側，頁面會套用 @media 樣式，在右側省略樣式

    雖然您會注意到在網頁瀏覽器中轉譯頁面時所做的變更並不十分顯著，但在使用行動裝置時，差異會變得更明顯。 在影像左側，我們可以看到自定義樣式改善了可讀性。

    調適型轉譯可用於更多案例中，讓您更輕鬆地將條件式樣式套用至網站，並使用整齊的方法解決常見的樣式問題。

    Viewport 中繼標籤和 CSS 媒體查詢並非 ASP.NET MVC 4 專屬，因此您可以在任何 Web 應用程式中利用這些功能。

  5. 在 Visual Studio 中，按 SHIFT + F5 停止偵錯應用程式。

在此練習中，您將使用相片資源庫應用程式來顯示相片。 您將會從 ASP.NET MVC 4 專案範本開始，然後新增功能以從服務擷取相片，並將其顯示在首頁中。

在下列練習中，您將更新此解決方案，以增強在行動裝置上顯示的方式。

工作 1 - 建立仿真相片服務

在這項工作中，您將建立相片服務的模擬，以擷取將在資源庫中顯示的內容。 若要這樣做，您將新增控制器，其只會傳回 JSON 檔案，其中包含每個相片的數據。

  1. 如果尚未開啟，請 開啟 Visual Studio 。

  2. 選取檔案 |新增 |項目 功能表命令。 在 [ 新增專案] 對話框中，選取 Visual C# |左窗格樹狀結構上的 Web 範本，然後選擇 [ASP.NET MVC 4 Web 應用程式]。 將專案 命名為 PhotoGallery、選取位置（或保留預設值），然後按兩下 [ 確定]。 或者，您可以從練習 1 繼續從現有的 ASP.NET MVC 4 因特網應用程式解決方案工作，並略過下一個步驟。

  3. 在 [ 新增 ASP.NET MVC 4 專案 ] 對話框中，選取 [因特網應用程式 ] 專案範本，然後按兩下 [ 確定]。 請確定您已選取 Razor 作為檢視引擎。

  4. 在 方案總管 中，以滑鼠右鍵按兩下專案的App_Data資料夾，然後選取[新增] |現有專案。 流覽至 此實驗室的Source\Assets\App_Data 資料夾，並新增 Photos.json 檔案。

  5. 使用 PhotoController 名稱建立新的控制器。 若要這樣做，請以滑鼠右鍵按兩下 Controllers 資料夾，移至 [ 新增 ] 並選取 [ 控制器]。 完成控制器名稱，保留 空白MVC控制器 範本，然後按兩下[ 新增]。

    新增 PhotoController

    新增 PhotoController

  6. 將 Index 方法取代為下列資源庫動作，並從您最近新增至專案的 JSON 檔案傳回內容。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex02 - 資源庫動作）

    public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}

  7. 按 F5 執行方案，然後流覽至下列 URL，以測試仿真相片服務： http://localhost:[port]/photo/gallery （[埠] 值取決於應用程式啟動所在的目前埠。 此 URL 的要求應該會擷取Photos.json檔案的內容。

    測試仿真相片服務

    測試仿真相片服務

在實際的實作中，您可以使用 ASP.NET Web API 來實作相片庫服務。 ASP.NET Web API 是一個架構，可輕易建置 HTTP 服務並擴及廣大的用戶端範圍，包括瀏覽器和行動裝置。 ASP.NET Web 應用程式開發介面是在 .NET Framework 上建置 RESTful 應用程式的理想平台。

工作 2 - 顯示相片庫

在這項工作中，您將更新 [首頁] 頁面，以使用您在此練習的第一個工作中建立的模擬服務來顯示相片庫。 您將新增模型檔案並更新資源庫檢視。

  1. 在 Visual Studio 中，按 SHIFT + F5 停止偵錯應用程式。

  2. 在 Models 資料夾中建立 Photo 類別。 若要這樣做，請以滑鼠右鍵按兩下 Models 資料夾，選取 [新增 ]，然後按兩下 [ 類別]。 然後，將名稱設定為 Photo.cs ，然後按兩下 [ 新增]。

  3. 將下列成員新增至 Photo 類別。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex02 - 相片模型）

    public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

  4. 從 Controllers 資料夾中，開啟 HomeController.cs 檔案。

  5. 新增下列 using 陳述式。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex02 - HomeController Usings）

    using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

  6. 更新 Index 動作以使用 HttpClient 來擷取資源庫數據，然後使用 JavaScriptSerializer 將它還原串行化為檢視模型。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex02 - 索引動作）

    public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

  7. 開啟位於 Views\Home 資料夾下的 Index.cshtml 檔案，並以下列程式代碼取代所有內容。

    此程式代碼會迴圈查看從服務擷取的所有相片，並將其顯示到未排序的清單。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex02 - 照片清單）

    @model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

  8. 在 方案總管 中，以滑鼠右鍵按兩下專案的 [內容] 資料夾，然後選取[新增] |現有專案。 流覽至 此實驗室的Source\Assets\Content 資料夾，並新增 Site.css 檔案。 您必須確認其取代專案。 如果您已 開啟Site.css 檔案，則必須確認同時重載檔案。

  9. 開啟 檔案總管，並將此實驗室的Source\Assets資料夾底下的整個 Photos 資料夾複製到專案中的根資料夾 方案總管。

  10. 執行應用程式。 您現在應該會看到在資源庫中顯示相片的首頁。

    影像中心

    照片庫

  11. 在 Visual Studio 中，按 SHIFT + F5 停止偵錯應用程式。

練習3：新增行動裝置的支援

ASP.NET MVC 4中的其中一個主要更新是支援行動裝置開發。 在此練習中，您將藉由擴充您在上一個練習中建立的 PhotoGallery 解決方案，來探索 ASP.NET MVC 4 新功能。

工作 1 - 在 ASP.NET MVC 4 應用程式中安裝 jQuery Mobile

  1. 開啟位於Source/Ex3-MobileSupport/Begin/ 資料夾的Begin方案。 否則，您可以繼續使用完成上一個練習所獲得的 End 解決方案。

    1. 如果您開啟了提供的 Begin 解決方案，則需要先下載一些缺少的 NuGet 包，然後才能繼續。 為此，請按一下專案功能表並選擇管理 NuGet 套件。

    2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。

    3. 最後，透過點擊 Build | Build Solution 來建立解決方案。

      注意

      使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。 使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。 這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。

  2. 點選單選項 [工具>][NuGet 封裝管理員> 封裝管理員 控制台] 選單選項，以開啟 [封裝管理員 控制台]。

    開啟 NuGet 封裝管理員 主控台

    開啟 NuGet 封裝管理員 主控台

  3. 在 封裝管理員 控制台中，執行下列命令來安裝 jQuery.Mobile.MVC 套件。

    jQuery Mobile 是建置觸控最佳化 Web UI 的開放原始碼程式庫。 jQuery.Mobile.MVC NuGet 套件包含協助程式，以搭配 ASP.NET MVC 4 應用程式使用 jQuery Mobile。

    注意

    執行下列命令，您將從 Nuget 下載 jQuery.Mobile.MVC 連結庫。

    PM

    Install-Package jQuery.Mobile.MVC

    此命令會安裝 jQuery Mobile 和一些協助程式檔案，包括下列專案：

    • Views/Shared/_Layout.Mobile.cshtml：是針對較小的屏幕優化的 jQuery Mobile 型版面配置。 當網站從行動瀏覽器收到要求時，它會以這個配置取代原始版面配置（_Layout.cshtml）。

    • 檢視切換器元件：包含 Views/Shared/_ViewSwitcher.cshtml 部分檢視和 ViewSwitcherController.cs 控制器。 此元件會在行動瀏覽器上顯示連結，讓使用者切換至頁面的桌面版本。
      具有行動支援的相片庫專案

      具有行動支援的相片庫專案

  4. 註冊行動套件組合。 若要這樣做，請開啟 Global.asax.cs 檔案，然後新增下列這一行。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex03 - 註冊行動套件組合）

    protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

  5. 使用桌面網頁瀏覽器執行應用程式。

  6. 開啟位於 [開始] 功能表中的 Windows Phone 7 模擬器 |所有程式 |Windows Phone SDK 7.1 |Windows Phone 模擬器。

  7. 在手機開始畫面中，開啟 Internet Explorer。 查看應用程式啟動位置的 URL，並使用手機瀏覽器瀏覽至該 URL（例如 http://localhost:[PortNumber]/）。

    您會發現您的應用程式在 Windows Phone 模擬器中看起來會有所不同，因為 jQuery.Mobile.MVC 已在專案中建立新的資產，以顯示針對行動裝置優化的檢視。

    請注意電話頂端的訊息，其中顯示切換至桌面檢視的連結。 此外， 您所安裝套件所建立的 _Layout.Mobile.cshtml 配置包括應用程式中的不同配置。

    注意

    到目前為止，沒有可返回行動檢視的連結。 它將會包含在更新版本中。

    圖片庫首頁的行動檢視

    圖片庫首頁的行動檢視

  8. 在 Visual Studio 中，按 SHIFT + F5 停止偵錯應用程式。

工作 2 - 建立行動檢視

在這項工作中，您將建立索引檢視的行動版本，其中包含針對行動裝置中更佳外觀而調整的內容。

  1. 複製 Views\Home\Index.cshtml 檢視並貼上以建立複本，將新檔案重新命名為 Index.Mobile.cshtml。

  2. 開啟新建立 的 Index.Mobile.cshtml 檢視，並以此程式代碼取代現有的 <ul> 標記。 如此一來，您將會使用 jQuery 行動數據批註來更新 <ul> 標籤，以使用 jQuery 的行動主題。

    <ul data-role="listview" data-inset="true" data-filter="true">

    注意

    請注意：

    • 設定為 listview 的數據角色屬性將會使用 listview 樣式來轉譯清單。

    • 設定為 true 的 資料集 屬性會顯示具有四捨五入框線和邊界的清單。

    • 設定為 true 的數據篩選屬性會產生搜尋方塊。

    您可以在項目檔中深入瞭解 jQuery Mobile 慣例：[https://demos.jquerymobile.com/1.1.1/]（https://demos.jquerymobile.com/1.1.1/）

  3. 按 CTRL + S 儲存變更。

  4. 切換至 Windows Phone 模擬器 並重新整理網站。 請注意資源庫清單的新外觀和風格，以及位於頂端的新搜尋方塊。 然後，在搜尋方塊中輸入一個字（例如 Tulips），以在相片庫中開始搜尋。

    使用 listview 樣式搭配篩選的資源庫

    使用 listview 樣式搭配篩選的資源庫

    總結來說，您已使用檢視動員器配方來建立索引檢視的複本，並加上 「mobile」 後綴。 此後綴表示要 ASP.NET MVC 4，每一個從行動裝置產生的要求都會使用此索引複本。 此外，您已更新索引檢視的行動版本，以使用 jQuery Mobile 來增強行動裝置中的網站外觀和風格。

  5. 返回 Visual Studio，然後開啟位於 [內容] 資料夾底下的Site.Mobile.css。

  6. 修正相片標題的位置，使其顯示在影像右側。 若要這樣做，請將下列程式代碼新增至 Site.Mobile.css 檔案。

    CSS

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

  7. 按 CTRL + S 儲存變更。

  8. 切換回 Windows Phone 模擬器 並重新整理網站。 請注意，相片標題現在已正確定位。

    位於影像右側的標題

    位於影像右側的標題

工作 3 - jQuery 行動主題

jQuery Mobile 中的每個版面配置和小工具都是圍繞新的面向物件 CSS 架構所設計，可讓您將完整的統一視覺設計主題套用至網站和應用程式。

jQuery Mobile 的預設主題包含 5 個提供字母 （a， b， c， d， e） 的手錶，以供快速參考。

在這項工作中，您將更新行動版面配置，以使用與預設值不同的主題。

  1. 切換回 Visual Studio。

  2. 開啟位於 Views\Shared 中的 _Layout.Mobile.cshtml 檔案。

  3. 尋找數據角色設定為 「page」 的 div 元素，並將數據主題更新為 「e」。。

    <div data-role="page" data-theme="e">

  4. 按 CTRL + S 儲存變更。

  5. 重新整理 Windows Phone 模擬器中的網站，並注意新的色彩配置。

    具有不同色彩配置的行動版面配置

    具有不同色彩配置的行動版面配置

工作 4 - 使用 View-Switcher 元件和瀏覽器覆寫功能

行動最佳化網頁的慣例是新增連結，其文字類似桌面檢視或完整網站模式，讓使用者切換至頁面桌面版本。 jQuery.Mobile.MVC 套件包含用於 _Layout.Mobile.cshtml 檢視中的範例檢視切換器元件。

切換至桌面檢視的連結

切換至桌面檢視的連結

檢視切換器會使用稱為 瀏覽器覆寫的新功能。 此功能可讓應用程式將要求視為來自不同瀏覽器（使用者代理程式）的要求，與他們實際來自的瀏覽器相同。

在這項工作中，您將探索 jQuery.Mobile.MVC 所新增之檢視切換器的範例實作，以及 ASP.NET MVC 4 中的新瀏覽器覆寫功能。

  1. 切換回 Visual Studio。

  2. 開啟位於 Views\Shared 資料夾下的 _Layout.Mobile.cshtml 檢視，並注意檢視切換器元件被參考為部分檢視。

    使用 View-Switcher 元件的行動版面配置

    使用 View-Switcher 元件的行動版面配置

  3. 開啟 _ViewSwitcher.cshtml 部分檢視。

    部分檢視會使用新的 ViewContext.HttpContext.GetOverriddenBrowser（） 方法來判斷 Web 要求的原點，並顯示要切換至桌面或行動檢視的對應連結。

    GetOverriddenBrowser 方法會傳回 HttpBrowserCapabilitiesBase 實例，該實例對應於目前為要求設定的使用者代理程式（實際或覆寫）。 您可以使用此值來取得包括 IsMobileDevice 等屬性。

    ViewSwitcher 部分檢視

    ViewSwitcher 部分檢視

  4. 開啟位於 Controllers 資料夾中的 ViewSwitcherController.cs 類別。 查看 ViewSwitcher 元件中的連結會呼叫 SwitchView 巨集指令，並注意新的 HttpContext 方法。

    • HttpContext.ClearOverriddenBrowser（） 方法會移除目前要求的任何覆寫使用者代理程式。

    • HttpContext.SetOverriddenBrowser（） 方法會使用指定的使用者代理程式覆寫要求的實際使用者代理程式值。
      ViewSwitcher 控制器
      ViewSwitcher 控制器

      瀏覽器覆寫是 ASP.NET MVC 4 的核心功能，即使您未安裝 jQuery.Mobile.MVC 套件，也可以使用此功能。 不過，這項功能只會影響檢視、版面配置和部分檢視，而且不會影響任何相依於 Request.Browser 物件的功能。

工作 5 - 在桌面檢視中新增檢視切換器

在這項工作中，您將更新桌面配置以包含檢視切換器。 這可讓行動使用者在流覽桌面檢視時返回行動檢視。

  1. 在 Windows Phone 模擬器中重新整理網站。

  2. 按兩下資源庫頂端的 [ 桌面檢視] 連結。 請注意，桌面檢視中沒有檢視切換器，可讓您返回行動檢視。

  3. 返回 Visual Studio 並開啟 _Layout.cshtml 檢視。

  4. 尋找登入區段並插入呼叫，以在_LogOnPartial部分檢視下方轉譯_ViewSwitcher部分檢視。 然後，按 CTRL + S 以儲存變更。

    <div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>

  5. 按 CTRL + S 儲存變更。

  6. 重新整理 Windows Phone 模擬器中的頁面，然後按兩下螢幕以放大。 請注意，首頁現在會顯示 從行動裝置切換到桌面檢視的行動檢視 連結。

    在桌面檢視中轉譯的檢視切換器

    在桌面檢視中轉譯的檢視切換器

  7. 再次切換至 [行動裝置] 檢視，並流覽至 [關於 ] 頁面 （http://localhost[port]/Home/About）。 請注意，即使您尚未建立 About.Mobile.cshtml 檢視，也會使用行動版面配置來顯示 [關於] 頁面（_Layout.Mobile.cshtml）。

    About 頁面

    關於頁面

  8. 最後，在桌面網頁瀏覽器中開啟網站。 請注意，先前的更新都不會影響桌面檢視。

    PhotoGallery 桌面檢視

    PhotoGallery 桌面檢視

工作 6 - 建立新的顯示模式

新的顯示模式功能可讓應用程式根據產生要求的瀏覽器來選取檢視。 例如，如果桌面瀏覽器要求首頁，應用程式會傳回 Views\Home\Index.cshtml 範本。 然後，如果行動瀏覽器要求首頁，應用程式會傳回 Views\Home\Index.mobile.cshtml 範本。

在這項工作中，您將建立iPhone裝置的自定義版面配置，而且您必須模擬來自iPhone裝置的要求。 若要這樣做，您可以使用 iPhone 模擬器/模擬器（例如 電動行動模擬器）或具有修改使用者代理程式的附加元件瀏覽器。 如需如何在Safari瀏覽器中設定使用者代理程式字串以模擬iPhone的指示，請參閱 如何在 David Alison 的部落格中讓 Safari 假裝它是 IE 。

請注意，此工作是選擇性的，您可以繼續整個實驗室，而不需執行它。

  1. 在 Visual Studio 中，按 SHIFT + F5 停止偵錯應用程式。

  2. 開啟 Global.asax.cs ，並新增下列using語句。

    using System.Web.WebPages;

  3. 將下列醒目提示的程式代碼新增至 Application_Start 方法。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex03 - iPhone DisplayMode）

    protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

您已在靜態 DisplayModeProvider.Instance.Modes 靜態清單中註冊名為 “iPhone” 的新 DefaultDisplayMode，該列表會與每個傳入要求相符。 如果連入要求包含字串 「iPhone」，ASP.NET MVC 會尋找名稱包含 「iPhone」 後綴的檢視。 0 參數會指出新模式的特定程度;例如，此檢視比符合來自行動裝置要求的一般 「.mobile」 規則更具體。

執行此程式代碼之後，當 iPhone 瀏覽器產生要求時，您的應用程式將會使用 Views\Shared\_Layout.iPhone.cshtml 版面配置，您在後續步驟中建立。

注意

為了示範目的，測試 iPhone 的要求已經過簡化，而且可能無法如預期般運作，每個 iPhone 使用者代理程式字串（例如測試區分大小寫）。

  1. 在 Views\Shared 資料夾中建立 _Layout.Mobile.cshtml 檔案的複本，並將複本重新命名為 “_Layout.iPhone.cshtml”。
  2. 開啟 您在上一個步驟中建立的 _Layout.iPhone.cshtml 。
  3. 尋找 data-role 屬性設定為 page 的 div 元素，並將資料主題屬性變更為 “a”。
<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

現在您在 ASP.NET MVC 4 應用程式中有 3 個版面設定：

  1. _Layout.cshtml：用於桌面瀏覽器的預設配置。

  2. _Layout.mobile.cshtml：用於行動裝置的默認配置。

  3. _Layout.iPhone.cshtml：iPhone 裝置的特定版面配置，使用不同的色彩配置來區分 _Layout.mobile.cshtml。

  4. 按 F5 執行應用程式，並在 Windows Phone 模擬器中瀏覽網站。

  5. 開啟 iPhone 模擬器（如需如何安裝和設定 iPhone 模擬器的指示，請參閱附錄 C），並流覽至網站。 請注意，每個手機都使用特定的範本。

    using-different-views-for-each-mobile-device2

    針對每個行動裝置使用不同的檢視

練習 4：使用異步控制器

Microsoft .NET Framework 4.5 引進 C# 和 Visual Basic 中的新語言功能，為 .NET 程式設計中的異步提供新的基礎。 這個新的基礎讓異步程式設計與同步程式設計類似，而且與同步程式設計一樣簡單。 您現在可以使用 AsyncController 類別，在 ASP.NET MVC 4 中撰寫異步動作方法。 您可以針對長時間執行的非 CPU 系結要求使用異步動作方法。 這可避免在處理要求時封鎖網頁伺服器執行工作。 AsyncController 類別通常用於長時間執行的Web服務呼叫。

本練習說明 ASP.NET MVC 4中異步操作的基本概念。 如果您想要更深入的深入探討，您可以參閱下列文章：[https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx]（https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx）

工作 1 - 實作異步控制器

  1. 開啟位於Source/Ex4-Async/Begin/ 資料夾的 Begin 方案。 否則，您可以繼續使用完成上一個練習所獲得的 End 解決方案。

    1. 如果您開啟了提供的 Begin 解決方案，則需要先下載一些缺少的 NuGet 包，然後才能繼續。 為此，請按一下專案功能表並選擇管理 NuGet 套件。

    2. 在管理 NuGet 套件對話方塊中，按一下還原以下載遺失的套件。

    3. 最後，透過點擊 Build | Build Solution 來建立解決方案。

      注意

      使用 NuGet 的優點之一是您不必交付專案中的所有程式庫，從而減少了專案大小。 使用 NuGet Power Tools，透過在 Packages.config 檔案中指定套件版本，您將能夠在第一次執行專案時下載所有必要的程式庫。 這就是為什麼您在從本實驗室打開現有解決方案後必須執行這些步驟的原因。

  2. 從 Controllers 資料夾開啟 HomeController.cs 類別。

  3. 加入以下 using 陳述式。

    using System.Threading.Tasks;

  4. 更新 HomeController 類別以繼承自 AsyncController。 衍生自 AsyncController 的控制器可讓 ASP.NET 處理異步要求，而且它們仍然可以服務同步動作方法。

    public class HomeController : AsyncController
{

  5. 將 async 關鍵詞新增至 Index 方法，並讓它傳回 Task<ActionResult> 類型。

    public async Task<ActionResult> Index()
{
    ...

    注意

    async 關鍵詞是 .NET Framework 4.5 提供的其中一個新關鍵詞;它會告訴編譯程式這個方法包含異步程序代碼。 Task 物件代表可能在未來某個時間點完成的異步操作。

  6. 取代用戶端。使用 await 關鍵詞搭配完整異步版本的 GetAsync（） 呼叫，如下所示。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex04 - GetAsync）

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...

    注意

    在舊版中，您使用Task物件的 Result 屬性來封鎖線程，直到傳回結果（同步版本）。

    新增 await 關鍵詞會指示編譯程式以異步方式等候從方法呼叫傳回的工作。 這表示只有在等候的方法完成之後，程式代碼的其餘部分才會以回呼的形式執行。 另一件事要注意的是，您不需要變更 try-catch 區塊才能進行這項工作：在背景或前景發生的例外狀況仍會攔截，而不需要使用架構提供的處理程式進行任何額外工作。

  7. 將程式代碼取代為新的程式碼，以繼續執行異步實作，如下所示

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex04 - ReadAsStringAsync）

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  8. 執行應用程式。 您不會注意到任何重大變更，但您的程式代碼不會封鎖線程集區中的線程，以便更妥善地使用伺服器資源並改善效能。

    注意

    您可以在 Visual Studio 訓練套件中包含的<.NET 4.5 中的異步程式設計與 Visual Basic>實驗室中深入瞭解新的異步程式設計功能。

工作 2 - 使用取消令牌處理逾時

傳回 Task 實例的異步動作方法也可以支援逾時。 在這項工作中，您將更新 Index 方法程式代碼，以使用取消令牌處理逾時案例。

  1. 返回 Visual Studio 並按 SHIFT + F5 停止偵錯。

  2. 將下列 using 語句新增至 HomeController.cs 檔案。

    using System.Threading;

  3. 更新 Index 動作以接收 CancellationToken 自變數。

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

  4. 更新 GetAsync 呼叫以傳遞取消令牌。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex04 - SendAsync with CancellationToken）

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  5. 使用 AsyncTimeout 屬性設定為 500 毫秒的 Index 方法，以及設定為處理 TaskCanceledException 的 HandleError 屬性，方法是重新導向至 TimedOut 檢視。

    （代碼段 - ASP.NET MVC 4 實驗室 - Ex04 - 屬性）

    [AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{

  6. 開啟 PhotoController 類別並更新 Gallery 方法，以延遲執行 1000 毫秒（1 秒）以模擬長時間執行的工作。

    public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}

  7. 開啟 Web.config 檔案，並新增下列項目來啟用自定義錯誤。

    <system.web>
  <customErrors mode="On"></customErrors>
  ...

  8. 在 Views\Shared 中建立名為 TimedOut 的新檢視，並使用預設版面配置。 在 方案總管 中，以滑鼠右鍵按下 Views\Shared 資料夾，然後選取 [新增] |檢視。

    針對每個行動裝置使用不同的檢視

    針對每個行動裝置使用不同的檢視

  9. 更新 TimedOut 檢視內容，如下所示。

    @{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

  10. 執行應用程式並流覽至根 URL。 當您已新增 Thread.Sleep 為 1000 毫秒時，您會收到逾時錯誤，由 AsyncTimeout 屬性產生，並由 HandleError 屬性攔截。

    已處理的逾時例外狀況

    已處理的逾時例外狀況

注意

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

摘要

在此實際操作實驗室中，您已觀察 ASP.NET MVC 4 中的一些新功能。 已討論下列概念：

  • 利用 ASP.NET MVC 專案範本的增強功能，包括新的行動應用程式項目範本
  • 使用 HTML5 檢視區屬性和 CSS 媒體查詢來改善行動裝置上的顯示
  • 使用 jQuery Mobile 進行漸進式增強功能，以及建置觸控優化的 Web UI
  • 建立行動裝置特定檢視
  • 使用檢視切換器元件在應用程式中的行動和桌面檢視之間切換
  • 使用工作支援建立異步控制器

附錄 A：使用程式碼片段

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

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

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

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

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

開始輸入片段名稱

開始輸入片段名稱

按 Tab 鍵選擇已反白的片段

按 Tab 鍵選擇已反白的片段

再按 Tab 鍵，片段將會展開

再按 Tab 鍵，片段將會展開

使用滑鼠新增代碼段 （C#、Visual Basic 和 XML）

  1. 以滑鼠右鍵按一下要插入程式碼片段的位置。
  2. 選擇插入片段，然後選擇我的程式碼片段。
  3. 按一下從清單中選擇相關片段。

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

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

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

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

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

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

  1. 移至 [/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」。

  2. 按一下立即安裝。 如果您沒有 Web 平台安裝程式，您將被重定向到首先下載並安裝它。

  3. Web 平台安裝程式開啟後，按一下安裝開始安裝。

    安裝 Visual Studio Express

    安裝 Visual Studio Express

  4. 閱讀所有產品的授權和條款，然後按一下我接受繼續。

    接受授權條款

    接受授權條款

  5. 等待下載和安裝過程完成。

    安裝進度

    安裝進度

  6. 安裝完成後，按一下完成。

    已完成安裝

    安裝完成

  7. 按一下退出關閉 Web 平台安裝程式。

  8. 若要開啟 Visual Studio Express for Web，請前往開始畫面並開始編寫 VS Express，然後按一下 VS Express for Web 圖格。

    VS Express Web 圖格

    VS Express Web 圖格

附錄 C：安裝 WebMatrix 2 和 iPhone 模擬器

若要在仿真的 iPhone 裝置中執行您的網站，您可以使用 WebMatrix 擴充功能「適用於 iPhone 的電動行動模擬器」。 此外，您也可以設定相同的擴充功能，從 Visual Studio 2012 執行模擬器。

工作 1 - 安裝 WebMatrix 2

  1. 移至 [/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，您可以開啟它並搜尋產品 “WebMatrix 2”。

  2. 按一下立即安裝。 如果您沒有 Web 平台安裝程式，您將被重定向到首先下載並安裝它。

  3. Web 平台安裝程式開啟後，按一下安裝開始安裝。

    安裝 WebMatrix 2

    安裝 WebMatrix 2

  4. 閱讀所有產品的授權和條款，然後按一下我接受繼續。

    接受授權條款

    接受授權條款

  5. 等待下載和安裝過程完成。

    安裝進度

    安裝進度

  6. 安裝完成後，按一下完成。

    安裝完成

    安裝完成

  7. 按一下退出關閉 Web 平台安裝程式。

工作 2 - 安裝 iPhone 模擬器擴充功能

  1. 執行 WebMatrix 並開啟任何現有的網站，或建立新的網站。

  2. 從 [首頁] 功能區按下 [執行] 按鈕，然後選取 [新增]。

    新增 WebMatrix 擴充功能

    新增 WebMatrix 擴充功能

  3. 選取 [iPhone 模擬器 ]，然後按兩下 [ 安裝]。

    流覽 WebMatrix 擴充功能

    流覽 WebMatrix 擴充功能

  4. 在套件詳細數據中，按兩下 [安裝 ] 以繼續進行擴充功能安裝。

    iPhone 模擬器擴充功能

    iPhone 模擬器擴充功能

  5. 讀取並接受擴充功能 EULA。

    WebMatrix 擴充功能 EULA

    WebMatrix 擴充功能 EULA

  6. 現在，您可以使用 [iPhone 模擬器] 選項，從 WebMatrix 執行您的網站。

    使用 iPhone 執行

    使用 iPhone 執行

工作 3 - 設定 Visual Studio 2012 以執行 iPhone 模擬器

  1. 開啟 Visual Studio 2012 並開啟任何網站或建立新專案。

  2. 從 [執行] 按鈕按下向下箭號，然後選取 [流覽]。

    使用流覽

    使用流覽

  3. 在 [流覽方式] 對話框中，按兩下 [ 新增]。

  4. 在 [新增程式] 對話框中，使用下列值：

    • 程式：C：\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe （據以更新路徑）

    • 自變數：“1”

    • 易記名稱：iPhone 模擬器

      新增程式

      新增程式以流覽

  5. 按兩下 [ 確定 ] 並關閉對話框。

  6. 現在，您可以從 Visual Studio 2012 在 iPhone 模擬器中執行 Web 應用程式。

    使用 iPhone 模擬器流覽

    使用 iPhone 模擬器流覽

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

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

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

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

    注意

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

    登入 Windows Azure 入口網站

    登入 Windows Azure 管理入口網站

  2. 點選命令列上的新建。

    建立一個新網站

    建立一個新網站

  3. 點選計算 | 網站。 然後選擇快速建立選項。 提供新網站的可用 URL，然後按一下建立網站。

    注意

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

    使用快速建立建立新網站

    使用快速建立建立新網站

  4. 等待新網站建立完成。

  5. 建立網站後，點擊 URL 列下的連結。 檢查新網站是否正常運作。

    瀏覽新網站

    瀏覽新網站

    網站運作中

    網站運作中

  6. 返回入口網站並點擊名稱列下的網站名稱以顯示管理頁面。

    開啟網站管理頁面

    開啟網站管理頁面

  7. 在儀表板頁面的快速瀏覽部分下，按一下下載發布設定檔連結。

    注意

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

    下載網站發布設定檔案

    下載網站發布設定檔案

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

    儲存發布設定檔

    儲存發布設定檔

任務 2 - 設定資料庫伺服器

如果您的應用程式使用 SQL Server 資料庫，您將需要建立 SQL Database 伺服器。 如果您想要部署一個不使用 SQL Server 的簡單應用程式，您可以跳過此任務。

  1. 您將需要一個 SQL Database 伺服器來儲存應用程式資料庫。 您可以在 Windows Azure 管理入口網站中，在 Sql Databases | Server 伺服器的儀錶板中檢視訂用帳戶中的 SQL 資料庫 伺服器。 | 如果您尚未建立伺服器，可以使用命令列上的新增按鈕建立伺服器。 記下伺服器名稱和 URL、管理員登入名稱和密碼，因為您將在接下來的任務中使用它們。 暫時不要建立資料庫，因為它將在稍後階段建立。

    SQL Database 伺服器儀表板

    SQL Database 伺服器儀表板

  2. 在下一個任務中，您將測試 Visual Studio 中的資料庫連結，因此您需要將本機 IP 位址包含在伺服器的允許 IP 位址清單中。 為此，請按一下設定，從目前用戶端 IP 位址中選擇 IP 位址並將其貼上到起始 IP 位址和結束 IP 位址文字方塊中，然後按一下 新增用戶端 IP 位址確定按鈕 按鈕。

    新增用戶端 IP 位址

    新增用戶端 IP 位址

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

    確認更改

    確認更改

任務 3 - 使用 Web 部署發布 ASP.NET MVC 4 應用程式

  1. 返回 ASP.NET MVC 4 解決方案。 在方案總管中，以滑鼠右鍵按一下網站專案並選擇發布。

    發布應用程式

    發佈網站

  2. 匯入您在第一個任務中儲存的發布設定檔。

    導入發布設定檔

    導入發布設定檔

  3. 點擊驗證連線。 驗證完成後，按一下下一步。

    注意

    當您看到驗證連線按鈕旁邊出現綠色複選標記時，驗證就完成了。

    驗證連接

    驗證連接

  4. 在設定頁面的資料庫部分下，按一下資料庫連結文字方塊 (即 DefaultConnection) 旁的按鈕。

    網路部署設定

    網路部署設定

  5. 設定資料庫連結如下：

    • 在伺服器名稱中，使用 tcp: 首碼輸入 SQL Database 伺服器 URL。

    • 在使用者名稱中輸入您的伺服器管理員登入。

    • 在密碼中輸入您的伺服器管理員登入密碼。

    • 輸入新的資料庫名稱，例如：MVC4SampleDB。

      設定目標連接字串

      設定目標連接字串

  6. 然後按一下 [確定] 。 當提示建立資料庫時，按一下是。

    建立資料庫

    建立資料庫

  7. 用於連接到 Windows Azure 中的 SQL 資料庫的連接字串顯示在預設連接文字方塊中。 然後按一下 [下一步]。

    指向 SQL 資料庫的連接字串

    指向 SQL 資料庫的連接字串

  8. 在預覽頁面中，按一下發布。

    發布 Web 應用程式

    發布 Web 應用程式

  9. 發布過程完成後，您的預設瀏覽器將開啟已發布的網站。

    應用程式發佈到 Windows Azure

    發佈至 Windows Azure 的應用程式