ASP.NET Razor Pages を最初から(6)
はじめに
部分ビューは、<partial />タグを使うことで埋め込むことができる事を確認した。
次は部分ビューに呼び出し元からデータを渡す方法を確認する。
オフィシャルドキュメントを参考に進める。
渡すためのデータを作成する
Modelsフォルダを作成して、Product.csを作る。
namespace ZennSample.Models;
public class Product
{
public int Number { get; set;}
public string Name { get; set;}
public string Description { get; set;}
}
Hoge.cshtml.csにProductプロパティ追加。
OnGetメソッド内でインスタンスを作成する。
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using ZennSample.Models;
namespace ZennSample.Pages
{
public class HogeModel : PageModel
{
public Product? Product{ get; set; }
public void OnGet()
{
Product = new Product
{
Number = 1,
Name = "Test Product",
Description = "これはテストです"
};
}
}
}
プロパティの型をProductにするとVisualStudioに怒られるので回避するためにProduct?にしておく。
部分ビューに渡すデータは用意できた。
部分ビューにデータを渡す
タグヘルパーとHTMLヘルパーの両方で可能だが、ここではタグヘルパーを使用する。
個人的にタグヘルパーのほうが好みだからというだけの理由。
渡し方は、<partial />タグのfor属性に渡したい値を指定するだけ。
<partial name="Partial/_HogePartial" for="Product" />
for属性は、@Modelが推測される。
<partial name="Partial/_HogePartial" for="＠Model.Product" /> @*これでもよい*@
forと似たような使い方ができるmodel属性も用意されている。
これらはどちらかしか使えないようになっている。
詳しくはわからない。
<partial name="" for="Product" />ではエラーが出たが
<partial name="" for="＠Model.Product" />だと問題がなかったので、forと違い@Modelが推論され無い事は確認できた。
どのように使い分けるかは一旦置いておく。
部分ビュー側で渡されたデータにアクセスする
部分ビュー側でも、普通の@modelで渡されたデータにアクセスできる。
@model ZennSample.Models.Product @*ここで渡されるデータを指定*@
@{}
<div>
<p>Hoge Partial</p>
<p>
<ul>
<li>@Model.Number</li> @*@ModelでProductプロパティにアクセス*@
<li>@Model.Name</li>
<li>@Model.Description</li>
</ul>
</p>
</div>
表示された。
部分ビューの作成とデータの渡し方・データへのアクセスを確認した。
ただ、これだといちいち部分ビューにデータを渡さなくてはならない。
Web広告などのように部分ビューにロジックを持たせる場合はどうするのか？
次回は、ASP.NETが提供しているビューコンポーネントという手段を確認する。
Discussion