[ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action

時間 2019-11-16

標籤 asp.net asp mvc 小牛之路 section partial view child action 欄目 ASP 简体版

原文原文鏈接

歸納的講，View中的內容能夠分爲靜態和動態兩部分。靜態內容通常是html元素，而動態內容指的是在應用程序運行的時候動態建立的內容。給View添加動態內容的方式可概括爲下面幾種：css

Inline code，小的代碼片斷，如 if 和 foreach 語句。
Html helper方法，用來生成單個或多個HTML元素，如view model、ViewBag等。
Section，在指定的位置插入建立好的一部份內容。
Partial view，存在於一個單獨的視圖文件中，做爲子內容可在多個視圖中共享。
Child action，至關於一個包含了業務邏輯的UI組件。當使用child action時，它調用 controller 中的 action 來返回一個view，並將結果插入到輸出流中。

這個分類不是絕對的。前兩種很簡單，在前面的文章中也使用過。本文主要介紹後三種方式的應用。html

本文目錄數組

Section

Razor視圖引擎支持將View中的一部份內容分離出來，以便在須要的地方重複利用，減小了代碼的冗餘。下面來演示如何使用Section。ui

建立一個MVC應用程序，選擇基本模板。添加一個HomeController，編輯生成的Index方法以下：spa

public ActionResult Index() {
    string[] names = { "Apple", "Orange", "Pear" };
    return View(names);
}

右擊Index方法，添加視圖，編輯該視圖以下：3d

@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 文件中來使用它們。code

編輯 /Views/Shared/_Layout.cshtml 文件以下：htm

<!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，以下：blog

... 
@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》

相關標籤/搜索

mvc+httpclient+asp.net

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。