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

  • [アーティクル]

作成者: Scott Addie

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

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

概要

部分タグ ヘルパーは、Razor Pages と MVC アプリで部分ビューをレンダリングするために使用します。 考慮事項:

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

部分ビューをレンダリングするための HTML ヘルパー オプション:

Product モデルがこのドキュメント全体でサンプルとして使用されます。

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 フォルダーから読み込まれることを示しています。 for 属性を使用し、バインディングのために部分ビューにモデルが渡されます。

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

対象

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 属性によって、部分ビューに渡すモデル インスタンスが割り当てられます。 model 属性は for 属性と共に使用できません。

次のマークアップでは、新しい 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" />
}

その他の技術情報