1. 程式人生 > >MVC檢視之【分部檢視】【佈局頁】初瞭解

MVC檢視之【分部檢視】【佈局頁】初瞭解

MVC專案中新建一個檢視,會出現以下介面:


之前一直不清楚【建立為分部檢視】和【使用佈局頁】選項的作用,今天看了一些資料,有了一點基本的瞭解,所以寫這篇文章,當筆記來用,避免以後忘記。

---------------------------------------------------------------------------------------------------

                                             1.分部檢視、佈局頁

---------------------------------------------------------------------------------------------------


網站的網頁上有一些部分是固定的,在每個頁面都要出現,如網站名稱、功能導航,這些通用的東西就可以寫在一個模版頁面裡面,供所有頁面所共用。

MVC專案新增檢視的時候,

1.如果不勾選【建立分部檢視】和【使用佈局頁】,新建的cshtml頁面上會出現:

@{
    Layout = null;
}
它的意思是:不使用任何模版。

這時候,頁面的程式碼即為執行後顯示的內容。

2.如果勾選【建立分部檢視】,新建的cshtml頁面是一個完全空白的頁面。

這時候,系統會自動把View資料夾下名為“_ViewStart.cshtml”的內容新增到新建的html最上面。

_ViewStart.cshtml”裡寫的是“

Layout = "~/Views/Shared/_Layout.cshtml";意思是使用“Shared”資料夾內名稱為“_Layout.cshtml”的模版。

明白了吧,不寫不代表不使用分部檢視(模版),而是使用預設的分部檢視。

不想使用任何分部檢視,需要標註Layout = null


_ViewStart.cshtml 中的內容
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

3.你或許會問:如果專案中有一些頁面要引用另外一個模板怎麼辦?

這時候就需要用到【使用佈局頁】選項了,勾選後,點選【新增】會讓你選擇一個專案中的html檔案,作為這個頁面的模板。

舉個例子,我新建了一個_test.cshtml,作為測試用的佈局頁(模板),它的內容如下,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>這個是測試的模板</h1>
    @RenderBody()
</body>
</html>
新建一個頁面index.cshtml,選用它(_test.cshtml)作為【佈局頁】,


index.cshtml內容入下,

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/_test.cshtml";
}

<h2>這是新建的index頁面</h2>

(上面@{ }中的內容是自動生成的。)

執行後的結果


總結:【分部檢視】【佈局頁】選項只會產生新建的檢視上面@{  }中的一點差異,也可以自己改動其中的程式碼,效果是一樣的。

---------------------------------------------------------------------------------------------------

                                       2. RenderBody RenderSection

---------------------------------------------------------------------------------------------------

1.RenderBody

       模版中的@RenderBody是一個佔位符,是留給子頁面的位置,子頁面使用這個模版,子頁面中的內容會被放到@RenderBody的位置。合併後當作一個整體載入。

2.RenderSection

RenderSection也是個佔位符,解決了只有一個RenderBody的問題。比如,子頁面要引入自己css檔案,而

@RenderBody寫在了模板的<body>的最下面,而css想要加到模板的<head>中,

這時候只需要在模板的head中加入

@RenderSection("CSS",false)
在子頁面上加入
@section CSS{
     //要引入的內容
}
便可以了。

RenderSection第一個引數是string型別,標明名稱;

第二個引數是boolean型別,表示子頁面是否必須要寫它。