跟我學ASP.NET MVC之八：SportsStrore移動設備
摘要：
現在的web程序開發避免不了智能手機和平板電腦上的使用，如果你希望發布你的應用程序給更廣大客戶使用的話，你將要擁抱可移動web瀏覽器的世界。向移動設備用戶發布一個好的使用體驗是很困難的-比只是發布桌面內容要難得多。它需要認真的計劃，設計以及大量的測試。甚至很容易被新的移動設備或平板電腦困住。
MVC框架確實有一些特征幫助移動開發。但是MVC框架是一個服務端框架，接收HTTP請求並發出HTTP響應。你在開發移動客戶端的時候，會碰到很多的困難，而它對這些的作用卻很受限。MVC框架使用不同的移動設備策略，可以幫助到不同層面。有三個基本的你可以使用的移動設備策略，下面將分別介紹它們。
什麽都不做（盡量少地做）
看起來像一個奇怪的主意，但是一些移動設備是能夠處理那些為桌面客戶端開發的內容的。許多的移動設備-不得不承認當今最新的-有高屏幕分辨率，很大的內存，可以快速地呈現HTML以及運行JavaScript。
響應式設計
另一個策略是為適應支持它將顯示的設備，而創建頁面內容。被稱為響應式設計。CSS標準有能力讓你根據設備的性能改變應用在元素上的樣式，它是一個經常被使用的根據屏幕尺寸改變內容的排版的技術。
響應式設計是使用CSS處理的東西，它不直接由MVC框架管理。這篇文章將介紹如何使用Bootstrap庫裏包含的響應式設計，來裝飾SportsStore應用程序。
創建響應式設計的頁面頭部
修改_Layout.cshtml文件。
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link href="~/Content/bootstrap.css" rel="stylesheet" /> 7 <link href="~/Content/bootstrap-theme.css" rel="stylesheet" /> 8 <link href="~/Content/ErrorStyles.css" rel="stylesheet" /> 9 <title>@ViewBag.Title</title> 10 <style> 11 .navbar-right { 12 float: right !important; 13 margin-right: 15px; 14 margin-left: 15px; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="navbar navbar-inverse" role="navigation"> 20 <a class="navbar-brand" href="#"> 21 <span class="hidden-xs">SPORTS STORE</span> 22 <div class="visible-xs">SPORTS</div> 23 <div class="visible-xs">STORE</div> 24 </a> 25 @Html.Action("Summary", "Cart") 26 </div> 27 <div class="row panel"> 28 <div id="categories" class="col-xs-3"> 29 @Html.Action("Menu", "Nav") 30 </div> 31 <div class="col-xs-8"> 32 @RenderBody() 33 </div> 34 </div> 35 </body> 36 </html>
我將顯示SPORTS STORE品牌的鏈接，改成了現在這個樣子。
<a class="navbar-brand" href="#">SPORTS STORE</a>
BootStrap使用一種稱為media查詢的方式定義了一系列的樣式，hidden-xx和visible-xx。xx可以使用xs、sm、md、lg代替，分別表示超小屏幕、小屏幕、中等屏幕和大屏幕。
.col-xs- 超小屏幕 手機 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面顯示器 (≥992px)
.col-lg- 大屏幕 大桌面顯示器 (≥1200px)
這裏使用的是hidden-xs和visible-xs。
hidden-xs：在超小屏幕上隱藏該元素。
visible-xs：在超小屏幕上顯示該元素。
運行程序，在大屏幕尺寸上，頁面內容沒有變化。如果將瀏覽器縮小到小於768px，SPORTS STORE鏈接文字將變成兩行。
創建響應式布局的購物車摘要
修改Summary.cshtml文件。
1 @model SportsStore.Domain.Entities.Cart 2 3 <div class="navbar-right hidden-xs"> 4 @Html.ActionLink("My Cart", "Index", "Cart", new { returnUrl = Request.Url.PathAndQuery }, new { @class = "btn btn-default navbar-btn" }) 5 </div> 6 <div class="navbar-right visible-xs"> 7 <a href[email protected]("Index", "Cart", new { returnUrl = Request.Url.PathAndQuery }) class="btn btn-default navbar-btn"> 8 <span class="glyphicon glyphicon-shopping-cart"></span> 9 </a> 10 </div> 11 <div class="navbar-text navbar-right"> 12 <b class="hidden-xs">Your cart:</b> 13 @Model.CartLines.Sum(x => x.Quantity) item(s), 14 @Model.ComputeTotalValue().ToString("c") 15 </div>
首先，在不希望在手機屏幕上(<768px)顯示的頁面元素，添加hidden-xs樣式。這樣，這兩個元素在手機屏幕上將不會顯示。
<div class="navbar-right hidden-xs"> @Html.ActionLink("My Cart", "Index", "Cart", new { returnUrl = Request.Url.PathAndQuery }, new { @class = "btn btn-default navbar-btn" }) </div> <b class="hidden-xs">Your cart:</b>
然後，為手機屏幕顯示的導航到購物車明細超鏈接，定義自己的樣式。
<div class="navbar-right visible-xs"> <a href[email protected]("Index", "Cart", new { returnUrl = Request.Url.PathAndQuery }) class="btn btn-default navbar-btn"> <span class="glyphicon glyphicon-shopping-cart"></span> </a> </div>
這裏直接寫<a></a>元素。因為需要使用<span></span>元素定義超鏈接文字樣式。
class="glyphicon glyphicon-shopping-cart"是定義在BootStrap裏的文字樣式，它將顯示一個小的購物車圖標。
運行程序，在大屏幕尺寸上，頁面內容沒有變化。如果將瀏覽器縮小到小於768px，購物車摘要將顯示成下面截圖那樣的購物車圖標。
創建響應式布局的產品列表
在超小屏幕上，左邊的導航菜單占用寬度有點大。我希望在超小屏幕上隱藏左邊的導航菜單，而是將導航菜單做成按鈕組顯示在頁面頭部。
繼續修改_Layout.cshtml文件。
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link href="~/Content/bootstrap.css" rel="stylesheet" /> 7 <link href="~/Content/bootstrap-theme.css" rel="stylesheet" /> 8 <link href="~/Content/ErrorStyles.css" rel="stylesheet" /> 9 <title>@ViewBag.Title</title> 10 <style> 11 .navbar-right { 12 float: right !important; 13 margin-right: 15px; 14 margin-left: 15px; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="navbar navbar-inverse" role="navigation"> 20 <a class="navbar-brand" href="#"> 21 <span class="hidden-xs">SPORTS STORE</span> 22 <div class="visible-xs">SPORTS</div> 23 <div class="visible-xs">STORE</div> 24 </a> 25 @Html.Action("Summary", "Cart") 26 </div> 27 <div class="visible-xs"> 28 @Html.Action("Menu", "Nav", new { horizontalLayout = true }) 29 </div> 30 <div class="row panel"> 31 <div id="categories" class="col-sm-4 hidden-xs"> 32 @Html.Action("Menu", "Nav") 33 </div> 34 <div class="col-sm-8 col-xs-12"> 35 @RenderBody() 36 </div> 37 </div> 38 </body> 39 </html>
- 首先，修改左邊導航菜單所在的DIV元素樣式，添加hidden-xs，指定它再超小屏幕上不顯示。修改右邊產品列表所在的DIV元素樣式，添加col-xs-12，指定在超小屏幕，寬度上占全部12列顯示。
- 然後，重新修改在小屏幕以及以上屏幕上，這兩個DIV所占的寬度。col-sm-4指定左邊菜單導航欄占三列。col-sn-8指定右邊產品列表占8列。
- 最後，使用visible-xs重新定義在超小屏幕上的產品導航欄。它仍舊以DIV顯示，但是他的位置在頁面頭部，所以講他寫到class="row"所在的DIV上面。
- 向Html.Action方法傳入第三個參數，它是一個動態類型對象，定義了一個自定義屬性horizontalLayout。將修改Menu視圖，在Menu視圖上能夠獲得傳入視圖的動態類型對象的動態屬性值，根據屬性值顯示不同樣式的菜單。
修改Menu.cshtml文件，根據傳入的動態屬性值，顯示不同的菜單樣式
1 @model IEnumerable<string> 2 3 @{ 4 var horizontalLayout = (bool)(ViewContext.RouteData.Values["horizontalLayout"] ?? false); 5 var wrapperClass = horizontalLayout ? "btn-group btn-group-justified btn-group-md" : null; 6 } 7 8 <div class=@wrapperClass > 9 @Html.RouteLink("Home", new { controller = "Product", action = "List" }, new { @class = horizontalLayout ? "btn btn-default btn-sm" : "btn btn-block btn-default btn-lg" }) 10 @foreach (var link in Model) 11 { 12 @Html.RouteLink(link, new 13 { 14 controller = "Product", 15 action = "List", 16 category = link, 17 page = 1 18 }, new 19 { 20 @class = (horizontalLayout ? "btn btn-default btn-sm" : ("btn btn-block btn-default btn-lg")) + (link == ViewBag.SelectedCategory ? " btn-primary" : "") 21 }) 22 } 23 </div>
- 通過ViewContext對象，獲得傳入到視圖的動態類型對象ViewContext.RoutData，再通過ViewContext.RoutData.Values這個Dictionary，獲得動態類型對象的動態屬性值。
- wrapperClass定義了超小屏幕上的按鈕組樣式。如果是超小屏幕，則按新的樣式顯示。否則它的值為null，MVC系統將在頁面上自動刪除這個class屬性（將只顯示成<div>）。
- 超小屏幕的按鈕組樣式定義：btn-group btn-group-justified btn-group-sm，定義它是一個按鈕組，自動對齊方式以及按鈕組每個按鈕尺寸。
- 因為超小屏幕上顯示成按鈕組，而不是每個按鈕單獨一行btn-block的按鈕，所有需要重新修改每個按鈕的樣式。使用條件表達式 horizontal?: 重新定義分組按鈕樣式為：btn btn-default btn-sm。與中等屏幕上的按鈕不同的地方是尺寸，以及刪除了btn-block。
運行程序，在大屏幕尺寸上，頁面內容沒有變化。如果將瀏覽器縮小到小於768px，導航菜單將變成下面截圖的頁面這樣。
使用針對Mobile的視圖
響應式設計向所有設備發布相同的內容，並使用CSS自己來決定內容怎樣被呈現。這個過程不需要引入服務端部分的代碼，前提是你想使用基本相同的主題對待所有不同的設備。另一個可選的方法是使用服務器端訪問客戶端瀏覽器的功能，向不同的瀏覽器發送不同的HTML。如果你計劃發送和桌面客戶端完全不同的應用程序頁面，這樣做很方便。
MVC框架支持一個名叫顯示模式的ASP.NET框架功能，它讓你根據發送請求的客戶端，創建不同的視圖。這篇文章不打算介紹它了，讀者可以搜索更多的文章對它進行完整的介紹。
跟我學ASP.NET MVC之八：SportsStrore移動設備