ASP.NET MVC 4 Mobile 功能

發行項
03/05/2024

本教學課程現在有一個MVC 5版本，其中包含在 Azure 網站上部署 ASP.NET MVC 5 行動 Web 應用程式的程式碼範例。

本教學課程將教導您如何在 ASP.NET MVC 4 Web 應用程式中使用行動功能的基本概念。在本教學課程中，您可以使用 Visual Studio Express 2012 或 Visual Web Developer 2010 Express Service Pack 1 (“Visual Web Developer 或 VWD”) 。如果您已經有 Visual Studio 專業版本，您可以使用該版本。

開始之前，請確定您已安裝下列必要條件。

Visual Studio Express 2012 (建議) 或 Visual Studio Web Developer Express SP1。 Visual Studio 2012 包含 ASP.NET MVC 4。如果您使用 Visual Web Developer 2010，則必須安裝 ASP.NET MVC 4。

您還需要一個行動瀏覽器模擬器。下列任一項目都可使用：

Windows 7 Phone 模擬器。 (這是本教學課程中大部分螢幕快照中使用的模擬器。)
變更使用者代理程式字串以模擬iPhone。請參閱此部落格文章。
Opera Mobile 模擬器
Apple Safari ，使用者代理程式設定為iPhone。如需如何在Safari中將使用者代理程式設定為「iPhone」的指示，請參閱 How to let Safari 在 David Alison 的部落格上假設它是 IE。

此處提供具有 C\# 原始程式碼的 Visual Studio 專案來幫助您完成本主題：

您要建置的內容

在本教學課程中，您將把行動功能新增至入門專案裡提供的簡單會議清單應用程式。下列螢幕快照顯示已完成應用程式的標籤面，如 Windows 7 Phone 模擬器所示。請參閱 Windows Phone 模擬器的鍵盤對應，以簡化鍵盤輸入。

您可以使用 Internet Explorer 第 9 版或 10 版、FireFox 或 Chrome 來設定使用者代理程式字串來開發行動應用程式。下圖顯示使用 Internet Explorer 模擬 iPhone 的已完成教學課程。您可以使用 Internet Explorer F-12 開發人員工具和 Fiddler 工具來協助偵錯應用程式。

顯示 Windows 7 手機顯示器上 [所有標籤] 頁面的螢幕快照。

您要學習的技術

以下是您要學習的內容：

ASP.NET MVC 4 範本如何使用 HTML5 viewport 屬性和調適型轉譯來改善行動裝置上的顯示。
如何建立行動特定檢視。
如何建立檢視切換器，讓使用者在行動檢視與應用程式的桌面檢視之間切換。

開始使用

使用下列連結下載入門專案的會議清單應用程式：下載。然後在 Windows 檔案總管中，以滑鼠右鍵按兩下 MvcMobile.zip 檔案，然後選擇 [ 屬性]。在 [MvcMobile.zip 屬性 ] 對話框中，選擇 [ 解除封鎖 ] 按鈕。 (取消封鎖後，當您嘗試使用從網路下載的 .zip 檔案時，就不會出現安全性警告。)

p1_unBlock

以滑鼠右鍵按兩下 MvcMobile.zip 檔案，然後選取 [ 全部解壓縮] 將檔案解壓縮。在 Visual Studio 中，開啟 MvcMobile.sln 檔案。

按 CTRL+F5 執行應用程式，這會顯示在桌面瀏覽器中。啟動您的行動瀏覽器模擬器，將會議應用程式的 URL 複製到模擬器，然後按兩下 [ 依標記瀏覽 ] 連結。如果您使用 Windows Phone 模擬器，請按兩下 URL 列，然後按 [暫停] 鍵以取得鍵盤存取權。下圖顯示 [ AllTags ] 檢視 (，從選擇 [依卷標瀏覽 ]) 。

該顯示內容在行動裝置上非常清楚易讀。選擇 ASP.NET 連結。

ASP.NET 標籤檢視非常雜亂。例如， Date 數據 行很難閱讀。稍後在本教學課程中，您將建立特別適用於行動瀏覽器的 AllTags 檢視版本，並讓顯示可讀取。

注意：目前行動快取引擎中有 Bug。針對生產應用程式，您必須安裝固定 DisplayModes nugget 套件。如需修正的詳細資訊，請參閱 ASP.NET MVC 4 行動快取錯誤修正。

CSS 媒體查詢

CSS 媒體查詢是適用於媒體類型的 CSS 延伸模組。它們可讓您建立規則，以覆寫特定瀏覽器的預設 CSS 規則， (使用者代理程式) 。以行動瀏覽器為目標的 CSS 常見規則是定義螢幕大小上限。當您建立新的 ASP.NET MVC 4 因特網專案時所建立 的 Content\Site.css 檔案包含下列媒體查詢：

@media only screen and (max-width: 850px) {

如果瀏覽器視窗寬度為 850 像素或更少，則會使用此媒體區塊內的 CSS 規則。您可以使用這類 CSS 媒體查詢，在小型瀏覽器上提供較佳的 HTML 內容顯示， (例如行動瀏覽器) 比針對較廣桌面瀏覽器顯示所設計的預設 CSS 規則。

檢視區中繼標籤

大部分的行動瀏覽器都會定義虛擬瀏覽器視窗寬度， (檢視區) 遠大於行動裝置的實際寬度。這可讓行動瀏覽器符合虛擬顯示器內的整個網頁。然後，用戶可以放大有趣的內容。不過，如果您將檢視區寬度設定為實際的裝置寬度，則不需要縮放，因為內容適用於行動裝置瀏覽器。

ASP.NET MVC 4 版面配置檔案中的檢視區 <meta> 標籤會將檢視區設定為裝置寬度。下行顯示 ASP.NET MVC 4版面配置檔案中的檢視區 <meta> 標籤。

<meta name="viewport" content="width=device-width">

檢查 CSS 媒體查詢和檢視區中繼標籤的效果

在編輯器中開啟 Views\Shared\_Layout.cshtml 檔案，並批註化檢視區 <meta> 卷標。下列標記顯示批註化行。

@*<meta name="viewport" content="width=device-width">*@

在編輯器中開啟 MvcMobile\Content\Site.css 檔案，並將媒體查詢中的寬度上限變更為零圖元。這可防止 CSS 規則用於行動瀏覽器。下列程式代碼列顯示已修改的媒體查詢：

@media only screen and (max-width: 0px) { ...

儲存您的變更，並在行動瀏覽器模擬器中瀏覽至會議應用程式。下圖中的小型文字是移除檢視區 <meta> 卷標的結果。沒有檢視區 <meta> 標記時，瀏覽器會縮小為默認檢視區寬度， (850 像素或較寬的行動瀏覽器。)

復原您的變更 — 取消批註版面配置檔案中的檢視區 <meta> 標籤，並將媒體查詢還原至 Site.css 檔案中的 850 像素。儲存變更並重新整理行動瀏覽器，以確認已還原行動裝置易記的顯示。

檢視區 <meta> 標籤和 CSS 媒體查詢並非專屬於 ASP.NET MVC 4，而且您可以在任何 Web 應用程式中利用這些功能。但它們現在已內建在建立新的 ASP.NET MVC 4 專案時所產生的檔案中。

如需檢視區卷標的詳細資訊，請參閱兩個檢視區<meta>的描述- 第二部分。

您將在下一節看到如何提供行動瀏覽器專用的檢視。

覆寫檢視、版面配置和部分檢視

ASP.NET MVC 4 中的重要新功能是一種簡單機制，可讓您覆寫任何檢視 (包括一般行動瀏覽器的版面配置和部分檢視) 、個別行動瀏覽器或任何特定瀏覽器。若要提供行動裝置專屬的檢視，您可以複製檢視檔案並將 .Mobile 新增至檔案名稱。例如，若要建立行動索引檢視，請將 Views\Home\Index.cshtml 複製到 Views\Home\Index.Mobile.cshtml。

本節將建立行動裝置專屬的配置檔案。

若要開始，請將 Views\Shared\_Layout.cshtml 複製到 Views\Shared\_Layout.Mobile.cshtml。開啟 _Layout.Mobile.cshtml ，並將標題從 MVC4 Conference 變更為 Conference (Mobile) 。

Html.ActionLink在每個呼叫中，移除每個連結 ActionLink 中的「瀏覽依據」。下列程式代碼顯示行動版面配置檔案的已完成本文區段。

<!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>
    <div id="title">
        <h1> Conference (Mobile)</h1>
    </div>
    <div id="menucontainer">
        <ul id="menu">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Date", "AllDates", "Home")</li>
            <li>@Html.ActionLink("Speaker", "AllSpeakers", "Home")</li>
            <li>@Html.ActionLink("Tag", "AllTags", "Home")</li>
        </ul>
    </div>
    @RenderBody()

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

將 Views\Home\AllTags.cshtml 檔案複製到 Views\Home\AllTags.Mobile.cshtml。開啟新檔案並將 <h2> 元素從 "Tags" 變更為 "Tags (M)"：

<h2>Tags (M)</h2>

使用桌面瀏覽器及行動瀏覽器模擬器，瀏覽至標籤頁面。行動瀏覽器模擬器會顯示您所做的兩項變更。

相反地，桌面顯示器尚未變更。

Browser-Specific 檢視

除了行動與桌面專用的檢視之外，您還可以為個別瀏覽器建立檢視。例如，您可以建立特別適用於 iPhone 瀏覽器的檢視。在本節中，您要建立 iPhone 瀏覽器的配置，以及 iPhone 版的 AllTags 檢視。

開啟 Global.asax 檔案，並將下列程式代碼新增至 Application_Start 方法。

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
    ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
        ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

此程式碼會定義要比對每個連入要求且名為 "iPhone" 的新顯示模式。若連入的要求符合您定義的條件 (亦即使用者代理程式包含 "iPhone" 字串)，則 ASP.NET MVC 會尋找名稱包含 "iPhone" 字尾的檢視。

以滑鼠右鍵按一下程式碼的 DefaultDisplayMode，選擇 [解析]，然後選擇 using System.Web.WebPages;。這麼做會將參考加入定義 DisplayModes 和 DefaultDisplayMode 類型的 System.Web.WebPages 命名空間。

或者，您可以手動將以下的行加入檔案的 using 區段即可。

using System.Web.WebPages;

Global.asax 檔案的完整內容如下所示。

using System;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.WebPages;

namespace MvcMobile
{

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });

            AreaRegistration.RegisterAllAreas();

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

儲存變更。將 MvcMobile\Views\Shared\_Layout.Mobile.cshtml 檔案複製到 MvcMobile\Views\Shared\_Layout.iPhone.cshtml。開啟新檔案，然後將標題從 Conference (Mobile) 變更h1為 Conference (iPhone)。

將 MvcMobile\Views\Home\AllTags.Mobile.cshtml 檔案複製到 MvcMobile\Views\Home\AllTags.iPhone.cshtml。在新檔案中，將 <h2> 元素從「Tags (M)」變更為「Tags (iPhone)」。

執行應用程式。執行行動瀏覽器模擬器，請確認其使用者代理程式設為「iPhone」，然後瀏覽至 AllTags 檢視。下列螢幕快照顯示 Safari 瀏覽器中呈現的 AllTags 檢視。您可以下載適用於 Windows 的 Safari。

在本節中，我們已了解如何建立行動配置和檢視，以及如何為特定裝置 (例如 iPhone) 建立配置和檢視。在下一節中，您將瞭解如何利用 jQuery Mobile 取得更吸引人的行動檢視。

使用 jQuery Mobile

jQuery 行動連結庫提供適用於所有主要行動瀏覽器的使用者介面架構。 jQuery Mobile 會將 漸進式增強功能 套用至支援 CSS 和 JavaScript 的行動瀏覽器。漸進式增強功能可讓所有瀏覽器顯示網頁的基本內容，同時允許更強大的瀏覽器和裝置顯示更豐富的顯示器。隨附於 jQuery Mobile 樣式的 JavaScript 和 CSS 檔案，許多元素都適合行動瀏覽器，而不需要進行任何標記變更。

在本節中，您將安裝 jQuery.Mobile.MVC NuGet 套件，此套件會安裝 jQuery Mobile 和檢視切換器小工具。

若要開始，請刪除您稍早建立的 Shared\_Layout.Mobile.cshtml 和 Shared\_Layout.iPhone.cshtml 檔案。

將 Views\Home\AllTags.Mobile.cshtml 和 Views\Home\AllTags.iPhone.cshtml 檔案重新命名為 Views\Home\AllTags.iPhone.cshtml.hide 和 Views\Home\AllTags.Mobile.cshtml.hide。因為檔案不再具有 .cshtml 擴展名，所以 ASP.NET MVC 運行時間不會使用這些檔案來轉譯 AllTags 檢視。

執行下列動作以安裝 jQuery.Mobile.MVC NuGet 套件：

從 [ 工具] 功能表中，選取 [NuGet 套件管理員]，然後選取 [ 套件管理員控制台]。
在 套件管理員控制台中，輸入 Install-Package jQuery.Mobile.MVC -version 1.0.0

下圖顯示 NuGet jQuery.Mobile.MVC 套件新增和變更至 MvcMobile 項目的檔案。新增的檔案會在檔名後面附加 [add]。影像不會顯示新增至 Content\images 資料夾的 GIF 和 PNG 檔案。

顯示 M V C 行動裝置資料夾和檔案的螢幕快照。

jQuery.Mobile.MVC NuGet 套件會安裝下列專案：

App_Start\BundleMobileConfig.cs檔案，需要此檔案才能參考已新增的 jQuery JavaScript 和 CSS 檔案。您必須遵循下列指示，並參考此檔案中定義的行動套件組合。
jQuery 行動 CSS 檔案。
控制器 ViewSwitcher 小工具 (Controllers\ViewSwitcherController.cs) 。
jQuery Mobile JavaScript 檔案。
jQuery Mobile 樣式的版面配置檔案 (Views\Shared\_Layout.Mobile.cshtml) 。
檢視切換器部分檢視 (MvcMobile\Views\Shared\_ViewSwitcher.cshtml) ，提供每個頁面頂端的連結，以從桌面檢視切換至行動檢視，反之亦然。
Content\images 資料夾中的數個.png 和 .gif 影像檔。

開啟 Global.asax 檔案，並將下列程式代碼新增為方法的最後一行 Application_Start 。

BundleMobileConfig.RegisterBundles(BundleTable.Bundles);

下列程式代碼顯示完整的 Global.asax 檔案。

using System;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.WebPages;

namespace MvcMobile
{

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });
            AreaRegistration.RegisterAllAreas();

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

注意

如果您使用 Internet Explorer 9，且未以黃色醒目提示看到 BundleMobileConfig 上述這一行，請按兩下 [相容性檢視] 按鈕！[[相容性檢視] 按鈕的圖片 (關閉) ] (https://res2.windows.microsoft.com/resbox/en/Windows 7/main/f080e77f-9b66-4ac8-9af0-803c4f8a859c_15.jpg[相容性檢視] 按鈕的圖片 (關閉) 」) ，使圖示從外框變更！[[相容性檢視] 按鈕的圖片 (關閉) ] (https://res2.windows.microsoft.com/resbox/en/Windows 7/main/f080e77f-9b66-4ac8-9af0-803c4f8a859c_15.jpg [相容性檢視] 按鈕的圖片 (關閉) 」，) 為純色！[) 上的 [兼容性檢視] 按鈕圖片 (]， (https://res1.windows.microsoft.com/resbox/en/Windows 7/main/156805ff-3130-481b-a12d-4d3a96470f36_14.jpg[) 上的 [兼容性檢視] 按鈕圖片 (」) 。或者，您可以在 FireFox 或 Chrome 中檢視本教學課程。

開啟 MvcMobile\Views\Shared\_Layout.Mobile.cshtml 檔案，並在呼叫之後 Html.Partial 直接新增下列標記：

<div data-role="header" align="center">
    @Html.ActionLink("Home", "Index", "Home")
    @Html.ActionLink("Date", "AllDates")
    @Html.ActionLink("Speaker", "AllSpeakers")
    @Html.ActionLink("Tag", "AllTags")
</div>

完整的 MvcMobile\Views\Shared\_Layout.Mobile.cshtml 檔案如下所示：

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

    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
        <div data-role="header" align="center">
            @Html.ActionLink("Home", "Index", "Home")
            @Html.ActionLink("Date", "AllDates")
            @Html.ActionLink("Speaker", "AllSpeakers")
            @Html.ActionLink("Tag", "AllTags")
        </div>
        <div data-role="header">
            <h1>@ViewBag.Title</h1>
        </div>

        <div data-role="content">
            @RenderSection("featured", false)
            @RenderBody()
        </div>

    </div>

</body>
</html>

建置應用程式，然後在您的行動瀏覽器模擬器中流覽至 AllTags 檢視。這時會顯示下列項目：

注意

您可以將 IE 或 Chrome 的使用者代理程式字串設定為 iPhone，然後使用 F-12 開發人員工具來偵錯行動特定程式代碼。如果您的行動瀏覽器未將 [首頁]、 [說話者]、 [卷標] 和 [ 日期 ] 鏈接顯示為按鈕，則 jQuery 行動腳本和 CSS 檔案的參考可能不正確。

除了樣式變更之外，您還會看到 [顯示行動檢視 ] 和可讓您從行動檢視切換至桌面檢視的連結。選擇 [ 桌面檢視 ] 連結，並顯示桌面檢視。

桌面檢視不提供直接巡覽回行動檢視的方式。您現在將會修正此問題。開啟 Views\Shared\_Layout.cshtml 檔案。在頁面 body 元素下方，新增下列程序代碼，以轉譯檢視切換器小工具：

@Html.Partial("_ViewSwitcher")

在行動瀏覽器中重新整理 AllTags 檢視。您現在可以在桌面和行動裝置檢視之間流覽。

注意

偵錯附註：您可以使用瀏覽器將使用者代理程式字串設定為行動裝置時，將下列程式代碼新增至 Views\Shared\_ViewSwitcher.cshtml，以協助偵錯檢視。

else
{
     @:Not Mobile/Get
}

並將下列標題新增至 Views\Shared\_Layout.cshtml 檔案。

<h1> Non Mobile Layout MVC4 Conference </h1>

瀏覽至桌面瀏覽器中的 AllTags 頁面。檢視切換器小工具不會顯示在桌面瀏覽器中，因為它只會新增至行動版面配置頁面。稍後在本教學課程中，您將瞭解如何將檢視切換器小工具新增至桌面檢視。

改善說話者清單

在行動瀏覽器中，選取 [演講者] 連結。因為沒有行動檢視 (AllSpeakers.Mobile.cshtml) ，所以預設喇叭會顯示 (AllSpeakers.cshtml) 使用行動版面配置檢視轉譯 (_Layout.Mobile.cshtml) 。

您可以在 Views\_ViewStart.cshtml 檔案中設定RequireConsistentDisplayMode為 true ，以全域停用預設 (非行動) 檢視，以在行動版面配置內轉譯，如下所示：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    DisplayModeProvider.Instance.RequireConsistentDisplayMode = true;
}

當設定為 true時RequireConsistentDisplayMode，行動版面配置 (_Layout.Mobile.cshtml) 只會用於行動檢視。 (也就是說，檢視檔的格式為 **ViewName。Mobile.cshtml.) 如果您的行動版面配置不適用於您的非行動檢視，您可能想要設定RequireConsistentDisplayModetrue為。下列螢幕快照顯示 [演講者] 頁面在設定true為時RequireConsistentDisplayMode呈現的方式。

您可以在檢視檔中將設定 RequireConsistentDisplayMode 為， false 以停用檢視中的一致顯示模式。 Views\Home\AllSpeakers.cshtml 檔案中的下列標記會設定RequireConsistentDisplayMode為 false：

@model IEnumerable<string>

@{
    ViewBag.Title = "All speakers";
    DisplayModeProvider.Instance.RequireConsistentDisplayMode = false;
}

建立行動說話者檢視

如您適才所見，行動裝置上的 [ 演講者 ] 檢視已可讀取，但是連結卻非常微小而不容易點選。在本節中，您將建立類似新式行動應用程式的行動裝置特定說話者檢視，它會顯示大型、容易點選的連結，並包含可快速尋找說話者的搜尋方塊。

將 AllSpeakers.cshtml 複製到 AllSpeakers.Mobile.cshtml。開啟 AllSpeakers.Mobile.cshtml 檔案，並移除 <h2> 標題元素。

在標記中 <ul> ，新增屬性並將其 data-role 值設定為 listview。就像其他 data-* 屬性一樣， data-role="listview" 讓大型清單專案更容易點選。這是已完成標記的外觀：

@model IEnumerable<string>

@{
    ViewBag.Title = "All speakers";
}
<ul data-role="listview">
    @foreach(var speaker in Model) {
        <li>@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker })</li>
    }
</ul>

重新整理行動瀏覽器。更新的檢視如下所示：

雖然行動檢視已改善，但很難瀏覽長清單的說話者。若要修正此問題，請在標記中 <ul> 新增屬性， data-filter 並將其設定為 true。下列程式代碼顯示 ul 標記。

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

下圖顯示來自屬性之頁面 data-filter 頂端的搜尋篩選方塊。

當您在搜尋方塊中輸入每個字母時，jQuery Mobile 會篩選顯示的清單，如下圖所示。

改善標籤清單

如同預設的 [說話者] 檢視， [卷標 ] 檢視是可讀取的，但連結很小且難以點選行動裝置。在本節中，您將以固定說話者檢視的相同方式修正卷標檢視。

拿掉 Views\Home\AllTags.Mobile.cshtml.hide 檔案的 “hide” 後綴，因此名稱為 Views\Home\AllTags.Mobile.cshtml。開啟重新命名的檔案，並移除 <h2> 元素。

data-role將和 data-filter 屬性新增至 <ul> 標籤，如下所示：

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

下圖顯示字母 J上的標記頁面篩選。

改善日期清單

您可以改善 [ 日期] 檢視，就像改善 [演講者 ] 和 [ 卷標 ] 檢視一樣，讓行動裝置更容易使用。

將 Views\Home\AllDates.cshtml 檔案複製到 Views\Home\AllDates.Mobile.cshtml。開啟新的檔案，並移除 <h2> 專案。

將新增 data-role="listview" 至 <ul> 標籤，如下所示：

<ul data-role="listview">

下圖顯示 [日期] 頁面的外觀與 data-role 屬性就地。

以下列程序代碼取代 Views\Home\AllDates.Mobile.cshtml 檔案的內容：

@model IEnumerable<DateTime>
@{
    ViewBag.Title = "All dates";
    DateTime lastDay = default(DateTime);
}
<ul data-role="listview">
    @foreach(var date in Model) {
        if (date.Date != lastDay) {
            lastDay = date.Date;
            <li data-role="list-divider">@date.Date.ToString("ddd, MMM dd")</li>
        }
        <li>@Html.ActionLink(date.ToString("h:mm tt"), "SessionsByDate", new { date })</li>
    }
</ul>

此程式代碼會依天數將所有會話分組。它會為每一天建立一個清單分隔符，並在分隔符下列出每天的所有會話。以下是此程式代碼執行時的外觀：

改善 SessionsTable 檢視

在本節中，您將建立會話的行動特定檢視。我們所做的變更會比我們所建立的其他檢視更廣泛。

在行動瀏覽器中，點選 [說話者 ] 按鈕，然後在搜尋方塊中輸入 Sc 。

點選 Scott Hanselman 連結。

如您所見，在行動瀏覽器上很難閱讀顯示器。日期數據行很難讀取，而且標記數據行不在檢視中。若要修正此問題，請將 Views\Home\SessionsTable.cshtml 複製到 Views\Home\SessionsTable.Mobile.cshtml，然後使用下列程式代碼取代檔案的內容：

@using MvcMobile.Models
@model IEnumerable<Session>

<ul data-role="listview">
    @foreach(var session in Model) {
        <li>
            <a href="@Url.Action("SessionByCode", new { session.Code })">
                <h3>@session.Title</h3>
                <p><strong>@string.Join(", ", session.Speakers)</strong></p>
                <p>@session.DateText</p>
            </a>
        </li>                                           
    }    
</ul>

此程式代碼會移除會議室和標記數據行，並垂直格式化標題、喇叭和日期，以便在行動瀏覽器中讀取所有資訊。下圖反映了程式碼變更。

改善 SessionByCode 檢視

最後，您將建立 SessionByCode 檢視的行動特定檢視。在行動瀏覽器中，點選 [說話者 ] 按鈕，然後在搜尋方塊中輸入 Sc 。

點選 Scott Hanselman 連結。 Scott Hanselman 的會話隨即顯示。

選擇 [MS Web Stack of Love] 連結的概觀 。

默認桌面檢視正常，但您可以加以改善。

將 Views\Home\SessionByCode.cshtml 複製到 Views\Home\SessionByCode.Mobile.cshtml ，並將 Views\Home\SessionByCode.Mobile.cshtml 檔案的內容取代為下列標記：

@model MvcMobile.Models.Session

@{
    ViewBag.Title = "Session details";
}
<h2>@Model.Title</h2>
<p>
    <strong>@Model.DateText</strong> in <strong>@Model.Room</strong>
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Speakers</li>
    @foreach (var speaker in Model.Speakers) {
        <li>@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker })</li>
    }
</ul>

<p>@Model.Description</p>
<h4>Code: @Model.Code</h4>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Tags</li>
    @foreach (var tag in Model.Tags) {
        <li>@Html.ActionLink(tag, "SessionsByTag", new { tag })</li>
    }
</ul>

新的標記會 data-role 使用屬性來改善檢視的配置。

重新整理行動瀏覽器。下圖反映您剛做的程式碼變更：

包裝和檢閱

本教學課程已介紹 ASP.NET MVC 4 開發人員預覽版的新行動功能。行動功能包括：

全域和個別檢視覆寫版面配置、檢視和部分檢視的能力。
使用 RequireConsistentDisplayMode 屬性控制版面配置和部分覆寫強制執行。
行動檢視的檢視切換工具小工具，也可以顯示在桌面檢視中。
支援支援特定瀏覽器，例如 iPhone 瀏覽器。