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示します。 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 、部分ビューに渡す a 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" />
}