MVC學習隨筆----如何在頁面中添加JS和CSS文件

http://blog.csdn.net/xxjoy_777/article/details/39050011

1.如何在頁面中添加Js和CSS文件。

我們只需要在模板頁中添加JS和CSS文件，然后子頁面調用模板頁即可。

@{
    ViewBag.Title = "用戶注冊";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

第二句話便是指定該頁面的模板頁。我們只需要在模板頁中進行js和css的引用。

 

下面來看_Layout.cshtml的代碼。

 

@Styles.Render("~/Css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

第一條的作用是引入了一個捆綁的css文件，第二個引入一個捆綁的modernizr文件，modernizr是一個javascript文件庫，它主要作用是為了兼容各類瀏覽器之間的差異。第三條語句引入一個捆綁的jquery文件。第四條語句@renderSection的作用是在模板頁中占用一個位置，這個位置的名字就叫做scripts，然后讓用戶在子頁面中去呈現這個叫做scripts的Section。false的意思是在子頁面中並不要求一定要實現這個Section的呈現。關於@RenderSection的更多知識，可以參考這里。http://blog.csdn.net/xxjoy_777/article/details/39050667

 

值得注意的是，這些引用語句中的路徑並不是真實在我們項目文件中的路徑，比如我們的項目中並沒有~/Css、~、bundles/modernizr這樣的文件。那么文件到底在什么地方呢？

是通過App_start中的BundleConfig.cs來設置的。打開App_start中的Bundleconfig.cs文件，可以看到如下代碼：

 

public class BundleConfig
   {
       // 有關 Bundling 的詳細信息，請訪問 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", "~/Scripts/jquery.ui.datepicker-zh-CN.js", "~/Scripts/jquery.layout-latest.js"));

           bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                       "~/Scripts/jquery.unobtrusive*",
                       "~/Scripts/jquery.validate*"));

           bundles.Add(new ScriptBundle("~/bundles/kindeditor").Include(
                       "~/Scripts/kindeditor/kindeditor-min.js", "~/Scripts/kindeditor/lang/zh_CN.js"));

           bundles.Add(new ScriptBundle("~/bundles/ztree").Include(
                       "~/Scripts/Ztree/jquery.ztree.core-{version}.js"));

           //Admin

           // 使用 Modernizr 的開發版本進行開發和了解信息。然后，當你做好
           // 生產准備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
           bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                       "~/Scripts/modernizr-*"));

           bundles.Add(new StyleBundle("~/Css").Include("~/Content/Default/Style.css"));
           bundles.Add(new StyleBundle("~/UserCss").Include("~/Content/Default/User/Style.css"));
           //bundles.Add(new StyleBundle("~/AdminCss").Include("~/Content/Admin/Style.css"));
           //bundles.Add(new StyleBundle("~/EasyUi/icon").Include("~/Scripts/EasyUi/themes/icon.css"));
           bundles.Add(new StyleBundle("~/JqueryUiMetro").Include("~/Content/JqueryUi/Metro/jquery-ui-{version}.css"));
           bundles.Add(new StyleBundle("~/ZtreeCss").Include("~/Content/zTree/Default.css"));
           //Admin
           bundles.Add(new StyleBundle("~/Css/Admin").Include("~/Areas/Admin/Content/Style.css"));
           //bundles.Add(new StyleBundle("~/Css/Admin/Easyui").Include("~/Areas/Admin/Content/Easyui/icon.css", "~/Areas/Admin/Content/Easyui/metro-blue/easyui.css"));
       }
   }

看了上面的代碼，應該很容易明白bundles的運行機制，new ScriptBundle().include().前面的括號里的路徑是虛擬路徑，而后面的是真實的路徑，我們發現，真實路徑里的有時候並不一定只是一個文件，還有可能是一個文件組。比如

bundles.Add(new ScriptBundle("~/bundles/jQuery").Include("~/Scripts/jquery-{version}.js"));

綁定的就是各個版本的jQuery。

 

這樣，假如我們的一個頁面引用了模板頁，那么這個頁面也就引用了模板頁中添加的CSS和Jquery文件。我們來看看頁面運行后的源文件。

 

<link href="/Content/Default/Style.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.6.2.js"></script>

<script src="/Scripts/jquery-2.0.3.js"></script>

這是頁面源文件，可以看到css和js文件都已經添加進去了。

另外，因為我們子頁面中有一句：

 

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

這一句通過

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

來填充模板頁中的@RenderSection部分，所以我們還引用了虛擬路徑為~/bundles/jqueryval的腳本文件。

 

所以，網頁的源文件里，還有下面幾句。

    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

只要看看bundle.cs的源碼就可以知道是為什么了。

 

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                       "~/Scripts/jquery.unobtrusive*",
                       "~/Scripts/jquery.validate*"));

這兩句指定了所添加的文件是

 

 

"~/Scripts/jquery.unobtrusive*"和<pre code_snippet_id="463872" snippet_file_name="blog_20140904_3_3751162" name="code" class="html">"~/Scripts/jquery.validate*"

 

這兩個文件中包含了源文件中所列出的那三個文件。*的意思應該是指這類文件的集合。