欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ASP.NET MVC使用母版頁(yè)視圖

 更新時(shí)間：2022年03月08日 14:27:51   作者：.NET開發(fā)菜鳥  
這篇文章介紹了ASP.NET MVC使用母版頁(yè)視圖的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、母版頁(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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論