19二月/120

Razor 學習筆記 - RenderBody, RenderPartial 和 RenderSection

前言

ASP.Net MVC3 中新增了 Razor 這一個 View Engine ，讓我們在開發的時候可以有更簡潔的 View，而首先要學 Razor 最先要了解的就是關於 Layout 的方法（RenderBody, RenderPartial 和 RenderSection）了。

說明

RenderBody

RenderBody 只能用在當做 MasterPage（Layout ）的 View 上面，而且一個頁面也只能有一個，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderBody()
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

</head>

<body>

@RenderBody()

</body>

</html>

也就是在 View 中要呈現主要內容的地方寫上 @RenderBody() 就可以了。

RenderPartial

通常設計版面的時候一定會包含 Header 或是 Footer 區塊，而為了避免整個 View 過於龐大，我們可以把部分區塊特別獨立出來，這時候就可以使用 RenderPartial 來呈現這些區塊，而我們也可以傳需要的資料進去給這些區塊使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderBody()
    <footer>
        @if (true) {
            Html.RenderPartial("ViewName");
        }
        @Html.Partial("ViewName")
        @RenderPage("~/Views/Shared/ViewName.cshtml")
     </footer>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

</head>

<body>

@RenderBody()

@if (true) {

Html.RenderPartial("ViewName");

}

@Html.Partial("ViewName")

@RenderPage("~/Views/Shared/ViewName.cshtml")

</footer>

</body>

</html>

因為我們有使用 @ 來輸出資料，因此在頁面使用時要用 @Html.Partail("ViewName") ，如果是在程式碼區塊的時候就可以使用 Html.RenderPartial("ViewName")，而除此之外如果我們想直接指定路徑的方式來呈現 PartialView 的話就可以使用 @RenderPage("~/Path/ViewName.cshtml") 來呈現區塊。

RenderSection

有時候設計版面的時候不會所有要呈現的內容都會在 RenderBody 的位置，比如說要掛上該頁面才會用到的 JavaScript，這時候就可以在Layout 使用 RenderSection 語法來放置這些區塊。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    @RenderSection("head")
</head>
<body>
    @RenderBody()
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

@RenderSection("head")

</head>

<body>

@RenderBody()

</body>

</html>

而在 Action 的 View 則可以用 @section name 來放這一區塊的內容。

@section head {
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
}

@section head {

}

Boby Content

但是我們有可能會不需要這一個區塊的時候，但是又不想在每一個 View 中加入 @section 這時候就可以替＠RenderSection 加上第二個參數，指定是否是必要的區塊，如此一來就可以在需要的 View 中才放上 @section 語法。

@RenderSection("head",false)

1	@RenderSection("head",false)

結論

Razor 語法對於在撰寫 View 的時候真的是又簡潔又快速，只是在第一次接觸的時候會很不習慣，但是熟悉之後，一定會愛上這樣子的寫法的。之後再來繼續介紹更多 Razor 語法。

參考資料

ASP.NET MVC 3 Razor Syntax - RenderBody, RenderPage and RenderSection

標籤： ASP.Net MVC, Razor 回覆此文章

回覆 (0) 引用 (0) ( 訂閱此篇文章的回覆 )

還沒有回覆。

文章彙整

文章分類

其他 (9)
未分類 (1)
程式開發技術 (7)
- C# (4)
- Linq (4)
網路程式設計 (20)
- ASP.Net (5)
- ASP.Net MVC (17)
- WCF (1)
網頁開發技術 (8)
- CSS (1)
- JavaScript (1)
- jQuery (4)
- Mobile Web (2)
開發相關軟體 (4)
- Internet Information Service (2)
- SQL Server (1)
- Visual Studio (1)

鏈結

網站資訊

授權聲明

姓名標示-非商業性-禁止改作 3.0
姓名標示 - 您必須保留原作姓名標示
非商業性 - 您不得為商業使用本著作
禁止改作 - 您不得改變或改作本著作

Coding 之路，不由分說 .Net,MVC,jQuery

Razor 學習筆記 - RenderBody, RenderPartial 和 RenderSection

前言

說明

RenderBody

RenderPartial

RenderSection

Boby Content

結論

參考資料

Leave a comment 取消回覆

文章彙整

文章分類

標籤

鏈結

近期文章

近期迴響

網站資訊

授權聲明