MVC 模板頁和布局


我們在以前的Asp.NET課程中已經學習過母版頁了,在MVC中WebForm視圖使用母版頁的方法與以前基本相同。

創建一個項目MvcMasterPageDemo。 添加Home控制器,生成Index視圖。 在生成視圖的選框中,我們選擇Aspx視圖引擎,然后可以看到有“使用布局或母版頁”的選項,給我們指向一個后綴為Master的文件(並不存在,所以無法完成視圖添加)。 現在我們自己去創建它。

找到對應的目錄,添加一個母版頁

我們將母版頁的內容部分按視圖選項卡下的名稱來命名,這樣就能在生成的視圖中,將頁面內容默認關聯到母版頁的內容部分。

 

Razor 布局 

還是通過Index生成視圖,但這次我們選擇Razor視圖引擎,繼續選擇使用“布局與母版頁”,按照提示上來說,布局頁的文本框,可以留空。它默認引用的_Layout.cshtml頁面的布局。

_ViewStart.cshtml文件里已經對頁面進行了配置,所有的Razor引擎頁面在執行之前,都會來執行這個ViewStart頁面,Layout關鍵字就是用來指向默認頁面布局的代碼。

默認布局

我們可以看到生成的視圖比之前的Aspx頁面要干凈許多。在視圖中與_Layout.cshtml中分別添加一些文字來完成Razor布局頁的測

 

自定義布局頁

我們還可以在視圖頁面頭部自定義需要的布局頁,同樣用Layout來聲明,這樣可以覆蓋默認的Layout布局頁面。

觀察發現,我們在子視圖頁面中編寫的內容,都是出現在布局頁@RenderBody定義的位置。 @RenderBody當創建基於此布局頁面的視圖時,視圖的內容會和布局頁面合並,而新創建視圖的內容會通過布局頁面的@RenderBody()方法呈現在標簽之間。

布局頁中

@RenderSection布局頁面還有節(Section)的概念,也就是說,如果某個視圖模板中定義了一個節,那么可以把它單獨呈現出來。 @RenderSection(“MySection”)

視圖頁中

當然還要在視圖中定義節,否則會出現異常: @section MySection{ //do }

注意:為了防止因缺少節而出現異常,可以給@RenderSection() 第2個參數設置為Flase

*壓縮器*

@Styles.Render("~/Content/css")

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

這兩句代碼是將“樣式表”與“腳本庫” 通過壓縮器封裝,並在頁面上調用。

在 MVC 中,Bundle 對象可以用來將 js 和 css 進行壓縮(多個文件可以打包成一個文件)。 並且可以區分調試和非調試,在調試時不進行壓縮,以原始方式顯示出來,以方便查找問題。

*在項目的 App_Start 文件夾中,會有一個 BundleConfig.cs 類文件,從類文件的靜態函數RegisterBundles 中我們可以看到該函數中缺省包含很多代碼都使用了 bundles.Add 函數和Include 函數。

其中的bundles.Add是在向網站的BundleTable中添加Bundle項,這里主要有ScriptBundle和 StyleBundle,分別用來壓縮腳本和樣式表。

 bundles.Add(new StyleBundle("虛擬路徑").Include("真實路徑1",“真實路徑2”)

 

我們可以到 Global.asax 文件中 Application_Start 函數中查看到該函數的調用。

自己創建變壓器:

在項目的 Content 文件夾下的 themes 文件夾建立一個自己的文件夾,命名為 mycss,並在其中新建里三個樣式表文件分別是 a.css、b.css 和 c.css。

然后我們來到 BundleConfig 中的 RegisterBundles 函數中,將缺省代碼全部刪除或者注釋掉,編寫自己的壓縮樣式表。 由於Global.asax中本身就有一個壓縮器注冊,所以我們寫完代碼編譯后就可以直接使用了。(腳本壓縮同理)

 

我把這三個樣式表壓縮到了一個不存在的路徑~/bundle/mycss 中。 新建一個控制器和視圖,在視圖中通過@Styles.Render(“ ~/bundle/mycss ”)來引用樣式。  

壓縮器的安全特性 

可以看到三條樣式表引用全部顯示在頁面上。還差一步,Bundle 對象在調試時候是不執行壓縮的,所以我們得需要將web.config配置文件中 <compilation debug=“true” targetFramework=“4.5.1” />的 debug 改為 false,讓 Web應用程序在非調試環境下運行。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM