ASP.NET Core の部分タグ ヘルパー

作成者: Scott Addie

タグヘルパーの概要については、ASP.NET Core の「タグヘルパー」を参照してください。

サンプル コード を表示またはダウンロードする (のダウンロード方法)

Overview

部分タグ ヘルパーは、 Pages および MVC アプリで Razor をレンダリングするために使用されます。 考慮事項:

• ASP.NET Core 2.1 以降が必要です。
• HTML ヘルパー構文の代替です。
• 部分ビューを非同期的にレンダリングします。

部分ビューをレンダリングするための HTML ヘルパー オプションは次のとおりです。

• @await Html.PartialAsync
• @await Html.RenderPartialAsync
• @Html.Partial
• @Html.RenderPartial

製品 モデルは、このドキュメント全体のサンプルで使用されます。

namespace TagHelpersBuiltIn.Models
{
    public class Product
    {
        public int Number { get; set; }

        public string Name { get; set; }

        public string Description { get; set; }
    }
}

部分タグ ヘルパー属性のインベントリは次のとおりです。

name

name 属性が必要です。 これは、レンダリングする部分ビューの名前またはパスを示します。 部分ビュー名を指定すると、ビューの検出 プロセスが開始されます。 このプロセスは、明示的なパスが指定されるとバイパスされます。 受け入れ可能なすべての name 値については、部分ビュー検出を参照してください。

次のマークアップでは、_ProductPartial.cshtml が Shared フォルダーから読み込まれることを示す明示的なパスを使用します。 属性の を使用して、バインディング用の部分ビューにモデルが渡されます。

<partial name="Shared/_ProductPartial.cshtml" for="Product">

for

for 属性は、現在のモデルに対して評価される ModelExpression を割り当てます。 ModelExpression は、@Model. 構文を推論します。 たとえば、for="Product"の代わりに for="@Model.Product" を使用できます。 この既定の推論動作は、@ シンボルを使用してインライン式を定義することによってオーバーライドされます。

次のマークアップは、_ProductPartial.cshtml を読み込みます。

<partial name="_ProductPartial" for="Product">

部分ビューは、関連付けられているページ モデルの Product プロパティにバインドされます。

using Microsoft.AspNetCore.Mvc.RazorPages;
using TagHelpersBuiltIn.Models;

namespace TagHelpersBuiltIn.Pages
{
    public class ProductModel : PageModel
    {
        public Product Product { get; set; }

        public void OnGet()
        {
            Product = new Product
            {
                Number = 1,
                Name = "Test product",
                Description = "This is a test product"
            };
        }
    }
}

モデル

model 属性は、部分ビューに渡すモデル インスタンスを割り当てます。 model 属性は、属性の では使用できません。

次のマークアップでは、新しい Product オブジェクトがインスタンス化され、バインドのために model 属性に渡されます。

<partial name="_ProductPartial"
         model='new Product { Number = 1, Name = "Test product", Description = "This is a test" }'>

view-data

view-data 属性は、部分ビューに渡す ViewDataDictionary を割り当てます。 次のマークアップは、ViewData コレクション全体を部分ビューからアクセスできるようにします。

@{
    ViewData["IsNumberReadOnly"] = true;
}

<partial name="_ProductViewDataPartial" for="Product" view-data="ViewData">

前のコードでは、IsNumberReadOnly キーの値が true に設定され、ViewData コレクションに追加されます。 その結果、次の部分ビュー内で ViewData["IsNumberReadOnly"] にアクセスできます。

@model TagHelpersBuiltIn.Models.Product

<div class="form-group">
    <label asp-for="Number"></label>
    @if ((bool)ViewData["IsNumberReadOnly"])
    {
        <input asp-for="Number" type="number" class="form-control" readonly />
    }
    else
    {
        <input asp-for="Number" type="number" class="form-control" />
    }
</div>
<div class="form-group">
    <label asp-for="Name"></label>
    <input asp-for="Name" type="text" class="form-control" />
</div>
<div class="form-group">
    <label asp-for="Description"></label>
    <textarea asp-for="Description" rows="4" cols="50" class="form-control"></textarea>
</div>

この例では、ViewData["IsNumberReadOnly"] の値によって、Number フィールドが読み取り専用として表示されるかどうかが決まります。

HTML ヘルパーからの移行

次の非同期 HTML ヘルパーの例を考えてみましょう。 製品のコレクションが反復処理され、表示されます。 PartialAsync メソッドの最初のパラメーターに従って、_ProductPartial.cshtml 部分ビューが読み込まれます。 バインドのために、Product モデルのインスタンスが部分ビューに渡されます。

@foreach (var product in Model.Products)
{
    @await Html.PartialAsync("_ProductPartial", product)
}

次の部分タグ ヘルパーは、PartialAsync HTML ヘルパーと同じ非同期レンダリング動作を実現します。 model 属性には、部分ビューにバインドするための Product モデル インスタンスが割り当てられます。

@foreach (var product in Model.Products)
{
    <partial name="_ProductPartial" model="@product" />
}

その他のリソース

• ASP.NET Core の部分ビュー
• ASP.NET Core MVC のビュー