🐦
ASP.NET Razor Pages を最初から(8)
はじめに
今回は趣向を変えて、Razor Pagesのルーティングを取り扱う。
オフィシャルを確認したが、難しくてよくわからなかったので
初期設定されているルーティング規則と、ルートへのパラメータの追加に関して確認をしていく。
Razor Pagesのデフォルトルーティング
| Path | Page |
|---|---|
| / | Index.cshtml |
| /Index | Index.cshtml |
| /Privacy | Privacy.cshtml |
| /Error | Error.cshtml |
デフォルトのルートは、Pagesのフォルダ構成と一致している。
Indexのみ特別でフォルダアクセス時に呼び出されるようになっている。
カスタムルートパラメータ
/Hogeに/Hoge/10のようにパラメータを渡したいときに使用する機能の事をカスタムルートと呼んでいるようだ。
カスタムルートに関しては下記ページが詳しかった。
メソッド引数で渡す
まずはHoge.cshtmlに整数値を渡してみる。
/Hogeに対して/Hoge/1、/Hoge/999のようにアクセスするには、@pageディレクティブに値を受け取る変数名を設定する。
Hoge.cshtml
@page "{number?}"
@model ZennSample.Pages.HogeModel
<div>
<h1>Hoge見出し</h1>
</div>
HogeModelのほうでは、OnGetメソッドで受け取るためにnumber引数を追加する。
Hoge.cshtml.cs
public void OnGet(int number)
{
Product = new Product
{
Number = number,
Name = "Test Product",
Description = "これはテストです"
};
}
/Hoge/100にアクセスを行うとちゃんと100がNumberに入っている事が確認できた。
プロパティを通じて渡す
カスタムルートには、メソッド引数ではなくプロパティに直接渡す方法も用意されている。
Hoge.cshtml.cs
public class HogeModel : PageModel
{
public Product? Product{ get; set; }
[BindProperty(SupportsGet=true)] // BindProperty属性を指定する
public int Number { get; set; } // @page "{number?}"なのでこちらもNumberにする
public void OnGet()
{
Product = new Product
{
Number = this.Number,
Name = "Test Product",
Description = "これはテストです"
};
}
}
どちらを使うかというと適材適所としか言いようがなさそう。
QueryStringのパラメータを取得する
/?param1=value1¶m2=value2のようなURLにアクセスした場合のパラメータの取得方法。
この場合も、カスタムルートと同様にメソッドに引数を与えることで取得できる。
Hoge.cshtml.cs
public class HogeModel : PageModel
{
public string Param1 { get; set; } = string.Empty;
public string Param2 { get; set; } = string.Empty;
// QueryStringのパラメータと同じ名前の引数
public void OnGet(string param1, string param2)
{
Param1= param1;
Param2= param2;
}
}
Hoge.cshtml
@page
@model ZennSample.Pages.HogeModel
<div>
<h1>Hoge見出し</h1>
<ul>
<li>Param1 = @Model.Param1</li>
<li>Param2 = @Model.Param2</li>
</ul>
</div>
/Hoge?param1=hoge¶m2=fugaにアクセス。
ちゃんと取れている。
カスタムルートと合わせた場合もとることができる。
Hoge.cshtml.cs
public class HogeModel : PageModel
{
public int Number { get; set; }
public string Param1 { get; set; } = string.Empty;
public string Param2 { get; set; } = string.Empty;
public void OnGet(int number=0, string param1="", string param2 = "")
{
Number = number;
Param1= param1;
Param2= param2;
}
}
Hoge.cshtml
@page "{number?}"
@model ZennSample.Pages.HogeModel
<div>
<h1>Hoge見出し</h1>
<ul>
<li>Number = @Model.Number</li>
<li>Param1 = @Model.Param1</li>
<li>Param2 = @Model.Param2</li>
</ul>
</div>
/Hoge/100?param1=hoge¶m2=fugaにアクセス。
凄く便利。
Discussion