ASP.NET MVC使用母版頁(yè)視圖
一、母版頁(yè)介紹和使用
母版頁(yè)的擴(kuò)展名為".cshtml",也叫做視圖布局頁(yè),它相當(dāng)于網(wǎng)頁(yè)的模板。在其他網(wǎng)頁(yè)中,只要引用了母版頁(yè),母版頁(yè)的頁(yè)面內(nèi)容就可以自動(dòng)顯示出來,設(shè)計(jì)者可以修改引用的母版頁(yè)中預(yù)留的部分,其他部分保持不變,這樣就可以使多個(gè)頁(yè)面的風(fēng)格保持一致,給網(wǎng)頁(yè)設(shè)計(jì)帶來了很大的方便。
1、創(chuàng)建母版頁(yè)視圖的要點(diǎn)
(1)、在Views的子文件夾Shared文件夾里面添加。
(2)、以“_”前綴作為開頭。
(3)、以"Layout.cshtml"作為結(jié)束。
2、MVC母版頁(yè)里的三個(gè)功能點(diǎn):
(1)、RenderBody-子頁(yè)面內(nèi)容占位符。
(2)、RenderPage-引用呈現(xiàn)一個(gè)頁(yè)面。
(3)、RenderSection-內(nèi)容占位符。
如果新建一個(gè)MVC程序,里面有沒有使用母版頁(yè)視圖呢?查看Index視圖:
從上面的截圖中可以看出,Index里面只有兩個(gè)DIV,但是一個(gè)基本的網(wǎng)頁(yè)代碼需要有HTML、head、body等元素標(biāo)簽組成,但是這里面并沒有。同時(shí),瀏覽index視圖:
這時(shí)查看網(wǎng)頁(yè)源代碼:
從上面的截圖中可以看到有HTML、head、body等HTML元素,到這里可以看出,MVC中已經(jīng)使用了母版頁(yè)。MVC中默認(rèn)使用Shared文件夾里面的_ViewStart.cshtml視圖。
二、RenderBody
RenderBody的作用是子頁(yè)面內(nèi)容占位符。即母版頁(yè)中使用了RenderBody的地方會(huì)使用子頁(yè)面的內(nèi)容來代替。以_Layout視圖為例:
在_Layout母版頁(yè)中使用了RenderBody,所以運(yùn)行的時(shí)候這部分內(nèi)容將會(huì)被Index里面的內(nèi)容代替。
下面我們自己重新定義一個(gè)母版頁(yè),同時(shí)定義一個(gè)子頁(yè)面來使用這個(gè)母版頁(yè)來查看RenderBody的作用。
1、添加母版頁(yè)
在Shared文件夾上面右鍵添加,選擇MVC5布局頁(yè)
2、命名為_TestLayout
生成的模板頁(yè)代碼如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> @RenderBody() </div> </body> </html>
3、修改母版頁(yè),修改后的母版頁(yè)代碼如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> 我是母版頁(yè),在子頁(yè)面中不允許更改 <!--內(nèi)容頁(yè)占位符--> @RenderBody() </div> </body> </html>
4、創(chuàng)建子頁(yè)面使用母版頁(yè)
在Home控制器里面添加一個(gè)ActionName為Test的Action方法,并添加視圖:
生成的Test視圖如下圖所示:
注意:如果Layout=null,則表示不使用母版頁(yè)視圖。
修改Test視圖也,修改后的代碼如下:
@{ ViewBag.Title = "Test"; Layout = "~/Views/Shared/_TestLayout.cshtml"; } <h2>Test</h2> <div> 我是子頁(yè)面-home控制器的Test方法 </div>
5、運(yùn)行程序,瀏覽Test視圖
通過運(yùn)行結(jié)果和查看網(wǎng)頁(yè)源代碼,可以看出是母版頁(yè)和子頁(yè)面組成的頁(yè)面。
三、RenderPage
RenderPage:引用呈現(xiàn)一個(gè)頁(yè)面,即在一個(gè)頁(yè)面中引用呈現(xiàn)另外一個(gè)頁(yè)面,也就是說另外一個(gè)頁(yè)面是這個(gè)頁(yè)面的一部分。
以網(wǎng)頁(yè)尾部布局為例說明RenderPage。
1、在Shared文件夾里面新添加一個(gè)分部頁(yè),并命名為FooterPartial。
2、修改分部頁(yè)
修改后的代碼如下:
<div> 我是頁(yè)腳 </div>
3、在母版頁(yè)中使用分部頁(yè)
在RenderBody的下面使用RenderPage,RenderPage方法的參數(shù)如下圖所示:
從上圖中可以看出,使用RenderPage()方法的時(shí)候,只需知道分部頁(yè)的路徑即可,修改后的母版頁(yè)代碼如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> 我是母版頁(yè),在子頁(yè)面中不允許更改 <!--內(nèi)容頁(yè)占位符--> @RenderBody() @RenderPage("_FooterPartial.cshtml") </div> </body> </html>
4、運(yùn)行結(jié)果
四、RenderSection
先來看下面一個(gè)例子:
在Test視圖里面添加一段腳本,修改后的Test視圖代碼如下:
這是在運(yùn)行程序,結(jié)果如下:
通過運(yùn)行結(jié)果發(fā)現(xiàn)腳本在視圖內(nèi)容呈現(xiàn)之前先執(zhí)行了,這顯示不是我們想要的效果。我們希望是在整個(gè)頁(yè)面都加載完成之后再執(zhí)行腳本。修改布局頁(yè)代碼如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> 我是母版頁(yè),在子頁(yè)面中不允許更改 <!--內(nèi)容頁(yè)占位符--> @RenderBody() <div style="color:blue"> <p> <!----> @RenderSection("SectionContent") </p> </div> @RenderPage("_FooterPartial.cshtml") </div> </body> </html>
子頁(yè)面修改如下:
運(yùn)行結(jié)果:
如果在母版頁(yè)中定義了RenderSection,而在子頁(yè)面中并沒有對(duì)定義的RenderSection進(jìn)行處理,那么結(jié)果是怎樣的呢?
從上圖中可以看出,如果在子頁(yè)面中沒有對(duì)定義的RenderSection進(jìn)行處理,程序運(yùn)行的時(shí)候直接就報(bào)錯(cuò)了:SectionContent節(jié)未定義。如果不想處理RenderSection該如何修改呢?
RenderSection方法截圖如下:
如果不想處理RenderSection,那么required參數(shù)設(shè)置為false就可以了,修改后的布局頁(yè)代碼如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> 我是母版頁(yè),在子頁(yè)面中不允許更改 <!--內(nèi)容頁(yè)占位符--> @RenderBody() <div style="color:blue"> <p> <!----> @RenderSection("SectionContent",false) </p> </div> @RenderPage("_FooterPartial.cshtml") </div> </body> </html>
這時(shí)在運(yùn)行程序就可以正常運(yùn)行了。
通過上面的例子,我們可以使用下面的方法解決開頭例子中遇到的問題:在body元素的結(jié)束標(biāo)簽上面定義RenderSection,這時(shí)無論在子頁(yè)面的任何位置定義script腳本,都會(huì)在頁(yè)面全部加載完成以后才執(zhí)行腳本。
布局頁(yè)定義如下:
五、總結(jié)
1、RenderBody
在Razor引擎中沒有“母版頁(yè)”,取而代之的是叫做“布局”的頁(yè)面(_Layout.cshtml)放在了共享視圖文件夾中。在這個(gè)頁(yè)面中,會(huì)看到標(biāo)簽里面有這樣一條語句:
@RenderBody()
其實(shí)它的作用和母版頁(yè)中的服務(wù)器控件類似,當(dāng)創(chuàng)建基于此布局頁(yè)面的視圖時(shí),視圖的內(nèi)容會(huì)和布局頁(yè)面合并,而新創(chuàng)建視圖的內(nèi)容會(huì)通過布局頁(yè)面的@RenderBody()方法呈現(xiàn)在標(biāo)簽之間。
這個(gè)方法不需要參數(shù),而且只能出現(xiàn)一次。
2、RenderPage
從名稱可以猜出來這個(gè)方法是要呈現(xiàn)一個(gè)頁(yè)面。比如網(wǎng)頁(yè)中固定的頭部可以單獨(dú)放在一個(gè)共享的視圖文件中,然后在布局頁(yè)面中通過這個(gè)方法調(diào)用,用法如下:
@RenderPage("_FooterPartial.cshtml")
可以帶參數(shù)
@RenderPage("_FooterPartial.cshtml",new {parm="my",parm2="you"})
調(diào)用頁(yè)面獲取參數(shù):
//獲取RenderPage()傳遞過來的參數(shù)
@PageData["param"]
3、RenderSection
布局頁(yè)面還有節(jié)(Section)的概念,也就是說:如果某個(gè)視圖模板中定義了一個(gè)節(jié),那么可以把它單獨(dú)呈現(xiàn)出來,用法如下:@RenderBody()
@RenderPage("_FooterPartial.cshtml")
//模板里添加了一個(gè)節(jié)@RenderSection("head")
當(dāng)然還要在視圖中定義節(jié),否則會(huì)出現(xiàn)異常:
@secion head{ //do }
為了防止因缺少節(jié)而出現(xiàn)異常,可以給RenderSection()提供第2個(gè)參數(shù):@RenderSection("head",false)
或者
@if(IsSectionDefined("head")) { @RenderSection("head",false) } else { <p>head Section is not defined!</p> }
4、@Html.Partial
Partial每次都會(huì)創(chuàng)建自己的TextWriter實(shí)例并且把內(nèi)容緩存到內(nèi)存中,最后把所有write輸出的內(nèi)容發(fā)送到一個(gè)MvcString對(duì)象中。
更多時(shí)候我們會(huì)使用@{Html.RenderPartial("Details");}而不是@Html.Partial。
Html.RenderPartial()和@Html.Partial的區(qū)別:
Html.RenderPartial()直接輸出至當(dāng)前HttpContext(因?yàn)槭侵苯虞敵觯孕阅芎茫?br />Html.Partial 將視圖內(nèi)容直接生成一個(gè)字符串并返回(相當(dāng)于有個(gè)轉(zhuǎn)義的過程)。
RenderPage()和RenderPartial()的區(qū)別
RenderPage()調(diào)用的頁(yè)面只能使用其傳遞過去的數(shù)據(jù)。
RenderPartial()是可以使用ViewData、model等數(shù)據(jù)的。
如:@{Html.RenderPartial("BasicChart",model);}
用這個(gè)重載可以在部分視圖里使用強(qiáng)類型,然后在主視圖中使用第二個(gè)參數(shù)傳model過去。
@{Html.RenderPartial("BasicChart",ViewData["myData"]);}
到此這篇關(guān)于ASP.NET MVC使用母版頁(yè)視圖的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解Asp.Net母版頁(yè)元素ID不一致的體現(xiàn)
- Asp.Net套用母版頁(yè)后元素ID不一致(個(gè)人總結(jié))
- 淺談Asp.Net母版頁(yè)和內(nèi)容頁(yè)運(yùn)行機(jī)制
- 淺談Asp.Net母版頁(yè)的相關(guān)知識(shí)
- 在ASP.NET 2.0中操作數(shù)據(jù)之三:創(chuàng)建母版頁(yè)和站點(diǎn)導(dǎo)航
- asp.net母版頁(yè)如何使用
- ASP.NET母版頁(yè)基礎(chǔ)知識(shí)介紹
- ASP.NET中母版頁(yè)和shtml實(shí)例入門
- ASP.Net巧用窗體母版頁(yè)實(shí)例
- asp.net使用母版頁(yè)中使用ajax腳本取數(shù)據(jù)
- ASP.NET下母版頁(yè)和內(nèi)容頁(yè)中的事件發(fā)生順序整理
- ASP.NET 2.0 中的創(chuàng)建母版頁(yè)
相關(guān)文章
ASP.NET MVC如何使用Unity實(shí)現(xiàn)Ioc詳解
這篇文章主要給大家介紹了關(guān)于ASP.NET MVC如何使用Unity實(shí)現(xiàn)Ioc的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07.NET讀寫Excel工具Spire.Xls使用 重量級(jí)的Excel圖表功能(5)
這篇文章主要為大家詳細(xì)介紹了.NET讀寫Excel工具Spire.Xls使用,重量級(jí)的Excel圖表功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Asp.Net實(shí)現(xiàn)的通用分頁(yè)函數(shù)
這篇文章主要介紹了Asp.Net實(shí)現(xiàn)的通用分頁(yè)函數(shù),結(jié)合實(shí)例形勢(shì)分析了asp.net分頁(yè)函數(shù)的功能,定義及使用技巧,需要的朋友可以參考下2016-04-04微信公眾平臺(tái)開發(fā)之認(rèn)證"成為開發(fā)者".Net代碼解析
這篇文章主要為大家詳細(xì)解析了微信公眾平臺(tái)開發(fā)之認(rèn)證"成為開發(fā)者".Net代碼,感興趣的小伙伴們可以參考一下2016-06-06asp.net下Response.ContentType類型匯總
asp.net下Response.ContentType類型匯總...2007-04-04asp.net基于session實(shí)現(xiàn)購(gòu)物車的方法
這篇文章主要介紹了asp.net基于session實(shí)現(xiàn)購(gòu)物車的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了asp.net使用session存儲(chǔ)臨時(shí)數(shù)據(jù)實(shí)現(xiàn)購(gòu)物車功能的相關(guān)技巧,需要的朋友可以參考下2015-11-11ASP.NET服務(wù)器端控件RadioButtonList,DropDownList,CheckBoxList的取值、賦值
這三個(gè)控件都有一個(gè)Items集合,可以用 RepeatLayout 和 RepeatDirection 屬性來控制列表的呈現(xiàn)形式2013-10-10