概括的講,View中的內容可以分為靜態和動態兩部分。靜態內容一般是html元素,而動態內容指的是在應用程序運行的時候動態創建的內容。給View添加動態內容的方式可歸納為下面幾種:
- Inline code,小的代碼片段,如 if 和 foreach 語句。
- Html helper方法,用來生成單個或多個HTML元素,如view model、ViewBag等。
- Section,在指定的位置插入創建好的一部分內容。
- Partial view,存在於一個單獨的視圖文件中,作為子內容可在多個視圖中共享。
- Child action,相當於一個包含了業務邏輯的UI組件。當使用child action時,它調用 controller 中的 action 來返回一個view,並將結果插入到輸出流中。
這個分類不是絕對的。前兩種很簡單,在前面的文章中也使用過。本文主要介紹后三種方式的應用。
本文目錄
Section
Razor視圖引擎支持將View中的一部分內容分離出來,以便在需要的地方重復利用,減少了代碼的冗余。下面來演示如何使用Section。
創建一個MVC應用程序,選擇基本模板。添加一個HomeController,編輯生成的Index方法如下:
public ActionResult Index() { string[] names = { "Apple", "Orange", "Pear" }; return View(names); }
右擊Index方法,添加視圖,編輯該視圖如下:
@model string[] @{ ViewBag.Title = "Index"; } @section Header { <div class="view"> @foreach (string str in new [] {"Home", "List", "Edit"}) { @Html.ActionLink(str, str, null, new { style = "margin: 5px" }) } </div> } <div class="view"> This is a list of fruit names: @foreach (string name in Model) { <span><b>@name</b></span> } </div> @section Footer { <div class="view"> This is the footer </div> }
我們通過@section標簽加section的名稱來定義一個Section,這里創建了兩個section:Header 和 Footer,習慣上一般把section放在View文件的開頭或結尾以方便閱讀。下面我們在 /Views/Shared/_Layout.cshtml 文件中來使用它們。
編輯 /Views/Shared/_Layout.cshtml 文件如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <style type="text/css"> div.layout { background-color: lightgray;} div.view { border: thin solid black; margin: 10px 0;} </style> <title>@ViewBag.Title</title> </head> <body> @RenderSection("Header") <div class="layout"> This is part of the layout </div> @RenderBody() <div class="layout"> This is part of the layout </div> @RenderSection("Footer") <div class="layout"> This is part of the layout </div> </body> </html>
我們通過 @RenderSection 方法來調用section的內容,參數指定了section的名稱。運行程序后可以看到如下結果:
注意,section只能在當前View或它的Layout中被調用。@RenderSection方法沒有找到參數指定的section會拋異常,如果不確定section是否存在,則需要指定第二個參數的值為false,如下:
...
@RenderSection("scripts", false)
...
我們還可以通過 IsSectionDefined 方法來判斷一個section是否被定義或在當前View中是否能調用得到,如:
... @if (IsSectionDefined("Footer")) { @RenderSection("Footer") } else { <h4>This is the default footer</h4> } ...
Partial View
Partial view(分部視圖)是將部分 Razor 和 Html 標簽放在一個獨立的視圖文件中,以便在不同的地方重復利用。接下來介紹如何使用 partial view。
我們先來創建一個partial view 。在 /Views/Shared 目錄下新建一個名為 MyPartial 的視圖文件,勾選“創建為分部視圖”,如下:
添加好的 partial view 文件是一個空文件,我們在這個文件中添加如下代碼:
<div> This is the message from the partial view. @Html.ActionLink("This is a link to the Index action", "Index") </div>
這個 MyPartial.cshtml 視圖用將創建一個回到首頁的連接。當然這里的 @Html.ActionLink 方法也是一種(Html helper)動態加載View內容的方式。
然后在 HomeController 中添加一個List action方法,如下:
public ActionResult List() { return View(); }
繼續為此添加一個 List.cshtml 視圖,並通過@Html.Partial方法來調用我們要呈現的分部視圖,如下:
@{ ViewBag.Title = "List"; Layout = null; } <h3>This is the /Views/Home/List.cshtml View</h3> @Html.Partial("MyPartial")
視圖引擎將按照規定的順序先后在 /Views/Home 和 /Views/Shared 文件夾下查找 MyPartial 視圖。
運行程序導航到 /Home/List,我們可以看到如下效果:
Partial view 和普通和 View 的使用沒有什么區別,也可以使用強類型,如我們在 MyPartial.cshtml 中通過 @model 指定 model 的類型:
@model IEnumerable<string> <div> This is the message from the partial view. @Html.ActionLink("This is a link to the Index action", "Index") <ul> @foreach (string str in Model) { <li>@str</li> } </ul> </div>
並修改調用 MyPartial.cshtml 視圖的主視圖 List.cshtml 如下:
@{ ViewBag.Title = "List"; Layout = null; } <h3>This is the /Views/Home/List.cshtml View</h3> @Html.Partial("MyPartial", new[] { "Apple", "Orange", "Pear" })
和上面不同的是,這里我們給 @Html.Partial 指定了第二個參數,將一個數組傳遞給了 MyPartial.cshtml 的 model 對象。運行效果如下:
Child Action
Child action 和 Patial view 類似,也是在應用程序的不同地方可以重復利用相同的子內容。不同的是,它是通過調用 controller 中的 action 方法來呈現子內容的,並且一般包含了業務的處理。任何 action 都可以作為子 action 。接下來介紹如何使用它。
在 HomeController 中添加一個 action,如下:
[ChildActionOnly] public ActionResult Time() { return PartialView(DateTime.Now); }
這個 action 通過調用 PartialView 方法來返回一個 partial view。ChildActionOnly 特性保證了該 action 只能作為子action被調用(不是必須的)。
接着我們繼續為這個action添加一個相應的 Time.cshtml 視圖,代碼如下:
@model DateTime <p>The time is: @Model.ToShortTimeString()</p>
在 List.cshtml 視圖中添加如下代碼來調用 Time action 方法 :
...
@Html.Action("Time")
運行結果如下:
我們通過 @Html.Action 方法來調用了 Time action 方法來呈現子內容。在這個方法中我們只傳了一個action名稱參數,MVC將根據當前View所在Controller去查找這個action。如果是調用其它 controller 中的 action 方法,則需要在第二個參數中指定 controller 的名稱,如下:
...
@Html.Action("Time", "MyController")
該方法也可以給 action 方法的參數傳值,如對於下面帶有參數的 action:
... [ChildActionOnly] public ActionResult Time(DateTime time) { return PartialView(time); }
我們可以這樣使用 @Html.Action 方法:
... @Html.Action("Time", new { time = DateTime.Now })
參考:《Pro ASP.NET MVC 4 4th Edition》