[ASP.NET MVC 小牛之路]12-java教程-PHP中文網

This is the default footer

This is the /Views/Home/List.cshtml View

首頁

Java

java教程

[ASP.NET MVC 小牛之路]12

黄舟

Dec 30, 2016 pm 04:22 PM

asp.net mvc

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

概括的講，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的名稱。執行程式後可以看到以下結果：

[ASP.NET MVC 小牛之路]12

注意，section只能在目前View或它的Layout中被呼叫。 @RenderSection方法沒有找到參數指定的section會拋異常，如果不確定section是否存在，則需要指定第二個參數的值為false，如下：

... 
@RenderSection("scripts", false) 
...

登入後複製

我們也可以透過IsSectionDefined 方法來判斷一個section是否被定義或在目前View中是否能調用得到，如：

... 
@if (IsSectionDefined("Footer")) { 
    @RenderSection("Footer") 
} else { 
    <h4 id="This-nbsp-is-nbsp-the-nbsp-default-nbsp-footer">This is the default footer</h4>    
} 
...

登入後複製

Partial View

Partial view（分部視圖）是將部分Razor 和Html 標籤放在一個獨立的視圖文件中，以便在不同的地方重複利用。接下來介紹如何使用 partial view。

我們先來建立一個partial view 。在/Views/Shared 目錄下新建一個名為MyPartial 的視圖文件，勾選“創建為分部視圖”，如下：

[ASP.NET MVC 小牛之路]12

添加好的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 id="This-nbsp-is-nbsp-the-nbsp-Views-Home-List-cshtml-nbsp-View">This is the /Views/Home/List.cshtml View</h3>
@Html.Partial("MyPartial")

登入後複製

視圖引擎將依照規定的順序先後在/Views/Home 和/Views/Shared 資料夾下尋找MyPartial 視圖。

運行程序導航到/Home/List，我們可以看到如下效果：

[ASP.NET MVC 小牛之路]12

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 id="This-nbsp-is-nbsp-the-nbsp-Views-Home-List-cshtml-nbsp-View">This is the /Views/Home/List.cshtml View</h3>
@Html.Partial("MyPartial", new[] { "Apple", "Orange", "Pear" })

登入後複製

和上面不同的是，這裡我們給@Html.Partial 指定了第二個參數，將一個數組傳遞給了MyPartial.cshtml 的model 物件。運作效果如下：

[ASP.NET MVC 小牛之路]12

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")

登入後複製

运行结果如下：

[ASP.NET MVC 小牛之路]12

我们通过 @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 })

登入後複製

以上就是[ASP.NET MVC 小牛之路]12 的内容，更多相关内容请关注PHP中文网（www.php.cn）！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

[ASP.NET MVC 小牛之路]12

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題