ASP.NET MVC 4 (十一) Bundles和顯示模式

Bundles用于打包CSS和javascript腳本文件，優化對它們的組織管理。顯示模式則允許我們為不同的設備顯示不同的視圖。

默認腳本庫

在VS創建一個MVC工程，VS會為我們在scripts目錄下添加很多腳本庫，下面來簡單了解下這些腳本庫的作用：

腳本文件	說明
jquery-1.7.1.js	jquery的基本類庫
jquery-ui-1.8.20.js	jquery的UI類庫，方便我們創建豐富的用戶控件，基于jquery基本類庫
jquery.mobile-1.1.0.js	用于移動設備UI控件的類庫，在創建移動模板的工程時添加
jquery-validate.js	用于客戶端驗證的類庫
knockout-2.1.0.js	客戶端的模型-視圖-視圖模式類庫，在客戶端將顯示數據和沒模型分開，可以認為是瀏覽器上的MVC
modernizr-2.5.3.js	用于檢測瀏覽器對HTML5和CSS3的支持
jquery-1.7.1.intellisense.js	用于Visual studio在編寫jQuery代碼時提供函數名稱的提示
jquery.unobtrusive-ajax.js	用于MVC框架的unobtrusive Ajax功能
jquery.validate-vsdoc.js	用于Visual studio在編寫jQuery驗證函數時提示函數名稱
jquery.validate.unobtrusive.js	用于MVC的客戶端驗證，依賴jquery-validate.js

一些腳本文件有常規和最小化兩個版本，最小化版本刪除注釋剪短變量名以縮小文件尺寸，在功能上和正常版本一致。正常版本的jquery-1.7.1.js文件大小252K，而縮小版的jquery-1.7.1.min.js只有92K，如果網站每天數以百萬計的訪問量，帶來的流量節省還是很巨大的。縮小版的腳本很難閱讀，所以開發時我們使用正常版本的腳本庫方便調試，發布時再切換為縮小版本。

打包腳本和風格

Bundles定義在/App_Start/BundleConfig.cs文件，VS為我們創建的默認實現：

public class BundleConfig {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles) {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*","~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }

ScriptBundle創建腳本包，StyleBundle創建CSS風格包，兩者都使用Include包含一組文件。VS創建的默認包并不一定適合我們的需要，我們可以自行定義：

public class BundleConfig {
        public static void RegisterBundles(BundleCollection bundles) {

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/*.css"));

            bundles.Add(new ScriptBundle("~/bundles/clientfeaturesscripts")
                .Include("~/Scripts/jquery-{version}.js",
                        "~/Scripts/jquery.validate.js",
                        "~/Scripts/jquery.validate.unobtrusive.js",
                        "~/Scripts/jquery.unobtrusive-ajax.js"));

        }
    }

注意這里的“~/Scripts/jquery-{version}.js”，{version}匹配對應文件的任何版本并通過工程配置文件選擇正常版本還是縮小版，具體是web.config中的debug設置，如果為true選擇正常版本，false則是縮小版。需要注意的是我們不能把相同文件的不同版本號放在一起，比如“jquery-1.7.2.js”和“jquery-1.7.1.js”，兩個版本號都會被發送給客戶端反而造成混淆。

在布局文件中使用Scripts.Render()輸出腳本包，Styles.Render()輸出風格包：

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

    @Scripts.Render("~/bundles/clientfeaturesscripts")

    @RenderSection("scripts", required: false)
</body>
</html>

生成的HTML文件會通過<link href="XXX" rel="stylesheet"/>包含所有包里的CSS文件，所有的腳本文件則通過<script src="XXX"></script>引用。

上面的例子中還使用“@RenderSection("scripts", required: false)”輸出一個節，requried=false表示不是必須的，只有在視圖文件中定義了這個節才會渲染，我們可以利用它來包含視圖需要的額外腳本文件，比如我們在MakeBooking.cshtml中定義Scripts節來包含腳本文件：

@model ClientFeatures.Models.Appointment

@{
    ViewBag.Title = "Make A Booking";
    AjaxOptions ajaxOpts = new AjaxOptions {
        OnSuccess = "processResponse"
    };
}
<h4>Book an Appointment</h4>
@section scripts {
    <script src="~/Scripts/Home/MakeBooking.js" type="text/javascript"></script>
}
...

使用這種可選節我們可以有選擇的視圖中包含視圖僅需的腳本文件。

面向移動設備

人們越來越多的使用移動設備瀏覽網站，MVC應用也要考慮如何兼容這些移動設備以提供的更好的閱讀體驗。我們可以使用安卓、蘋果手機訪問開發測試網站，更方便的是從www.opera.com/developer/tools/mobile下載模仿移動版本的Opera瀏覽器，用它可以模仿不同設備設置不同屏幕大小的顯示分辨率來測試。

在MVC WEB應用中我們在普通的視圖文件外可以添加面向移動設備的視圖，視圖文件名里在文件后綴名前加入“.Mobile”表示這是移動設備專用，比如“/Views/Home/MakeBooking.Mobile.cshtml”：

@model ClientFeatures.Models.Appointment

@{
    ViewBag.Title = "Make A Booking";
    AjaxOptions ajaxOpts = new AjaxOptions {
        OnSuccess = "processResponse"
    };
}
<h4>This is the MOBILE View</h4>
@section scripts {
    <script src="~/Scripts/Home/MakeBooking.js" type="text/javascript"></script>
}

<div id="formDiv" class="visible">
    @using (Ajax.BeginForm(ajaxOpts)) {
        @Html.ValidationSummary(true)    
        <p>@Html.ValidationMessageFor(m => m.ClientName)</p>
        <p>Name:</p><p>@Html.EditorFor(m => m.ClientName)</p>
        <p>@Html.ValidationMessageFor(m => m.Date)</p>
        <p>Date:</p><p>@Html.EditorFor(m => m.Date)</p>
        <p>@Html.ValidationMessageFor(m => m.TermsAccepted)</p>
        <p>@Html.EditorFor(m => m.TermsAccepted) Terms & Conditions</p>    
        <input type="submit" value="Make Booking" />
    }
</div>
<div id="successDiv" class="hidden">
    <h4>Your appointment is confirmed</h4>
    <p>Your name is: <b id="successClientName"></b></p>
    <p>The date of your appointment is: <b id="successDate"></b></p>
    <button id="backButton">Back</button>
</div>

這里適當調整控件布局以更適合在移動設備上瀏覽，其他和桌面版基本一致。當我們從移動設備瀏覽時，MVC自動為我們應用移動版本的視圖，MVC依賴C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers目錄下的各種瀏覽器的描述文件檢查瀏覽器版本，主要是匹配文件中定義的user agent特性，你會發現UC瀏覽器赫然在列。

自定義顯示模式

上面的方法將所有的移動設備歸為一類，如果我們還需要更細分具體是哪種移動設備，我們可以通過創建自定義顯示模式來實現，這是在Application_start中注冊的：

    public class MvcApplication : System.Web.HttpApplication {
        protected void Application_Start() {

            DisplayModeProvider.Instance.Modes.Insert(0,
                new DefaultDisplayMode("OperaTablet") {
                    ContextCondition = (context => context.Request.UserAgent.IndexOf("Opera Tablet", StringComparison.OrdinalIgnoreCase) >= 0)
                });

            AreaRegistration.RegisterAllAreas();
...

這里通過比較請求的User agent是否包含“Opera tablet”來標識OperaTablet顯示模式，如果請求來自于這樣的設備，MVC會查找包含OperaTablet的視圖文件比如/Views/Home/MakeBooking.OperaTable.cshtml，這樣我們就可以單為某種設備創建自定義的視圖。

以上為對《Apress Pro ASP.NET MVC 4》第四版相關內容的總結，不詳之處參見原版 http://www.apress.com/9781430242369。

posted @ 2016-09-02 22:30 閆寶平閱讀(1163) 評論(0) 收藏舉報

刷新頁面返回頂部

GetZ

ASP.NET MVC 4 (十一) Bundles和顯示模式

默認腳本庫

打包腳本和風格

面向移動設備

自定義顯示模式

公告