[ASP.NET MVC マーベリックスロード]12-＆＃＆チュートリアル-php.cn

[ASP.NET MVC マーベリックスロード]12

黄舟

リリース： 2016-12-30 16:22:16

オリジナル

1360 人が閲覧しました

[ASP.NET
MVC Mavericks Road] 12 - セクション、部分ビュー、および子アクション

要約すると、ビューのコンテンツは静的部分と動的部分に分けることができます。静的コンテンツは通常 HTML 要素ですが、動的コンテンツはアプリケーションの実行中に動的に作成されるコンテンツを指します。動的コンテンツを View に追加する方法は次のように要約できます:

インラインコード、if ステートメントや foreach ステートメントなどの小さなコードスニペット。
HTML ヘルパーメソッド。ビューモデル、ViewBag などの単一または複数の HTML 要素を生成するために使用されます。
セクション、作成したコンテンツの一部を指定した場所に挿入します。
部分ビュー。別のビューファイルに存在し、サブコンテンツとして複数のビュー間で共有できます。
子アクションは、ビジネスロジックを含む UI コンポーネントに相当します。子アクションが使用される場合、コントローラ内のアクションを呼び出してビューを返し、結果を出力ストリームに挿入します。

この分類は絶対的なものではありません。最初の 2 つは非常に単純で、以前の記事でも使用されています。この記事では主に後者の 3 つの方法の応用例を紹介します。

目次

セクション

Razor ビューエンジンは、必要に応じて再利用できるように、ビュー内のコンテンツの一部の分離をサポートし、コードの冗長性を削減します。セクションの使用方法を説明しましょう。

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 タグとセクションの名前を追加してセクションを定義します。ここでは、ヘッダーとフッターという 2 つのセクションが作成され、読みやすくするためにビューファイルの先頭または末尾にセクションが配置されます。以下では、/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 メソッドを通じてセクションのコンテンツを呼び出し、パラメーターでセクションの名前を指定します。プログラムを実行すると、次の結果が表示されます。

[ASP.NET MVC マーベリックスロード]12

セクションは、現在のビューまたはそのレイアウトでのみ呼び出すことができることに注意してください。 @RenderSection メソッドは、パラメーターで指定されたセクションが見つからない場合に例外をスローします。セクションが存在するかどうか不明な場合は、次のように 2 番目のパラメーターの値を false に指定する必要があります。 IsSectionDefined メソッドを使用して、セクションが定義されているかどうかを確認することもできます。または、次のように現在のビューで呼び出すこともできます。別のビューファイルを作成して、別の場所で再利用できるようにします。次に部分表示の使い方を紹介します。

まず部分ビューを作成しましょう。 /Views/Shared ディレクトリに MyPartial という名前の新しいビューファイルを作成し、次のように「部分ビューとして作成」にチェックを入れます:

追加された部分ビューファイルは空のファイルです。このファイルに追加します。次のコード:

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

ログイン後にコピー

この MyPartial.cshtml ビューは、ホームページに戻るリンクを作成します。もちろん、ここでの @Html.ActionLink メソッドは、View コンテンツを動的にロードする (Html ヘルパー) 方法でもあります。

次に、次のように HomeController に List アクションメソッドを追加します。 [ASP.NET MVC マーベリックスロード]12

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

ログイン後にコピー

引き続き List.cshtml ビューを追加し、@Html.Partial メソッドを通じて表示したい部分ビューを次のように呼び出します。

<div>
    This is the message from the partial view.
    @Html.ActionLink("This is a link to the Index action", "Index")
</div>

ログイン後にコピー

View エンジンは、指定された順序で /Views/Home フォルダーと /Views/Shared フォルダー内の MyPartial ビューを検索します。

プログラムを実行し、/Home/List に移動すると、次の効果が確認できます:

部分ビューと通常のビューの使用に違いはありません。渡すなどの強力なタイプを使用することもできます。 MyPartial.cshtml モデルの @ は、モデルのタイプを指定します:

public ActionResult List()
{
    return View();
}

ログイン後にコピー

そして、MyPartial.cshtml ビューを呼び出すメインビュー List.cshtml を次のように変更します:

@{
    ViewBag.Title = "List";
    Layout = null;
}
<h3>This is the /Views/Home/List.cshtml View</h3>
@Html.Partial("MyPartial")

ログイン後にコピー

上記との違いは、ここでは 2 番目のパラメーターを指定していることです。 @Html.Partial (配列) MyPartial.cshtml に渡されるモデルオブジェクト。操作効果は以下の通りです: [ASP.NET MVC マーベリックスロード]12

[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）！

[ASP.NET MVC マーベリックス ロード]12

[ASP.NET MVC マーベリックスロード]12