🐦

ASP.NET Razor Pages を最初から(6)

2023/02/14に公開

はじめに

部分ビューは、<partial />タグを使うことで埋め込むことができる事を確認した。
次は部分ビューに呼び出し元からデータを渡す方法を確認する。

オフィシャルドキュメントを参考に進める。
https://learn.microsoft.com/ja-jp/aspnet/core/mvc/views/tag-helpers/built-in/partial-tag-helper?view=aspnetcore-7.0

渡すためのデータを作成する

Modelsフォルダを作成して、Product.csを作る。
Models.Product

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メソッド内でインスタンスを作成する。

Hoge.cshtml.cs
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属性に渡したい値を指定するだけ。

Hoge.cshtml
<partial name="Partial/_HogePartial" for="Product" />

for属性は、@Modelが推測される。

Hoge.cshtml
<partial name="Partial/_HogePartial" for="@Model.Product" /> @*これでもよい*@

forと似たような使い方ができるmodel属性も用意されている。
これらはどちらかしか使えないようになっている。
詳しくはわからない。
<partial name="" for="Product" />ではエラーが出たが
<partial name="" for="@Model.Product" />だと問題がなかったので、forと違い@Modelが推論され無い事は確認できた。
どのように使い分けるかは一旦置いておく。

部分ビュー側で渡されたデータにアクセスする

部分ビュー側でも、普通の@modelで渡されたデータにアクセスできる。

_HogePartial.cshtml
@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が提供しているビューコンポーネントという手段を確認する。

https://zenn.dev/akilab/articles/7e8f9d5dd52302

Discussion