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

時間  2019-12-10
標籤 asp.net asp mvc 十一 bundles 顯示 模式 欄目 ASP 简体版
原文   原文鏈接

Bundles用於打包CSS和javascript腳本文件，優化對它們的組織管理。顯示模式則容許咱們爲不一樣的設備顯示不一樣的視圖。javascript

默認腳本庫

在VS建立一個MVC工程，VS會爲咱們在scripts目錄下添加不少腳本庫，下面來簡單瞭解下這些腳本庫的做用：css

腳本文件 說明
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，若是網站天天數以百萬計的訪問量，帶來的流量節省仍是很巨大的。縮小版的腳本很難閱讀，因此開發時咱們使用正常版本的腳本庫方便調試，發佈時再切換爲縮小版本。html

打包腳本和風格

Bundles定義在/App_Start/BundleConfig.cs文件，VS爲咱們建立的默認實現：java

複製代碼 
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建立的默認包並不必定適合咱們的須要，咱們能夠自行定義：jquery

複製代碼 
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」，兩個版本號都會被髮送給客戶端反而形成混淆。web

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

複製代碼 
<!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節來包含腳本文件：app

複製代碼 
@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，這樣咱們就能夠單爲某種設備建立自定義的視圖。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程