Razor 學習筆記 - RenderBody, RenderPartial 和 RenderSection
前言
ASP.Net MVC3 中新增了 Razor 這一個 View Engine ,讓我們在開發的時候可以有更簡潔的 View,而首先要學 Razor 最先要了解的就是關於 Layout 的方法(RenderBody, RenderPartial 和 RenderSection)了。
說明
RenderBody
RenderBody 只能用在當做 MasterPage(Layout )的 View 上面,而且一個頁面也只能有一個,如下所示:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> </head> <body> @RenderBody() </body> </html> |
也就是在 View 中要呈現主要內容的地方寫上 @RenderBody() 就可以了。
RenderPartial
通常設計版面的時候一定會包含 Header 或是 Footer 區塊,而為了避免整個 View 過於龐大,我們可以把部分區塊特別獨立出來,這時候就可以使用 RenderPartial 來呈現這些區塊,而我們也可以傳需要的資料進去給這些區塊使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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> |
因為我們有使用 @ 來輸出資料,因此在頁面使用時要用 @Html.Partail("ViewName") ,如果是在程式碼區塊的時候就可以使用 Html.RenderPartial("ViewName"),而除此之外如果我們想直接指定路徑的方式來呈現 PartialView 的話就可以使用 @RenderPage("~/Path/ViewName.cshtml") 來呈現區塊。
RenderSection
有時候設計版面的時候不會所有要呈現的內容都會在 RenderBody 的位置,比如說要掛上該頁面才會用到的 JavaScript,這時候就可以在Layout 使用 RenderSection 語法來放置這些區塊。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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> |
而在 Action 的 View 則可以用 @section name 來放這一區塊的內容。
1 2 3 |
@section head { <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> } |
Boby Content
但是我們有可能會不需要這一個區塊的時候,但是又不想在每一個 View 中加入 @section 這時候就可以替 @RenderSection 加上第二個參數,指定是否是必要的區塊,如此一來就可以在需要的 View 中才放上 @section 語法。
1 |
@RenderSection("head",false) |
結論
Razor 語法對於在撰寫 View 的時候真的是又簡潔又快速,只是在第一次接觸的時候會很不習慣,但是熟悉之後,一定會愛上這樣子的寫法的。之後再來繼續介紹更多 Razor 語法。
參考資料
ASP.NET MVC 3 Razor Syntax - RenderBody, RenderPage and RenderSection
Leave a comment