13,234
回編集
「Blazor - ルーティング」の版間の差分
ナビゲーションに移動
検索に移動
→パラメータの受け渡し
(→概要) |
|||
| 65行目: | 65行目: | ||
ルートパラメータは波括弧で囲んで指定して、対応するプロパティに<code>[Parameter]</code>属性を付与する。<br> | ルートパラメータは波括弧で囲んで指定して、対応するプロパティに<code>[Parameter]</code>属性を付与する。<br> | ||
<br> | <br> | ||
Blazorのパラメータ受け渡しには、3つの方法がある。<br> | |||
<br> | |||
==== ルートパラメータ ==== | |||
<syntaxhighlight lang="c#"> | <syntaxhighlight lang="c#"> | ||
@page "/user/{Id}" | @page "/user/{Id:int}" | ||
@code { | @code { | ||
[Parameter] | [Parameter] | ||
public | public int Id { get; set; } | ||
// 整数以外の値が渡された場合は404エラー | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
==== 複数パラメータ ==== | |||
<syntaxhighlight lang="c#"> | |||
@page "/orders/{CustomerId:int}/{OrderId:int}" | |||
@code { | |||
[Parameter] | |||
public int CustomerId { get; set; } | |||
[Parameter] | |||
public int OrderId { get; set; } | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
==== クエリパラメータ ==== | |||
<syntaxhighlight lang="c#"> | |||
// URL: /search?query=blazor&page=1 | |||
@page "/search" | |||
@inject NavigationManager Navigation | |||
@code { | |||
private string SearchQuery; | |||
private int Page; | |||
protected override void OnInitialized() | |||
{ | |||
var uri = Navigation.ToAbsoluteUri(Navigation.Uri); | |||
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("query", out var query)) | |||
{ | |||
SearchQuery = query; | |||
} | |||
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("page", out var page)) | |||
{ | |||
Page = Convert.ToInt32(page); | |||
} | |||
} | |||
} | } | ||
</syntaxhighlight> | |||
<br> | |||
==== 制約パターンの使用 ==== | |||
制約パターンも使用できる。<br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/date/{date:datetime}" | |||
@page "/products/{id:guid}" | |||
@page "/blog/{*slug}" // catch-allパラメータ | |||
</syntaxhighlight> | |||
<br> | |||
==== カスケード ==== | |||
これらのパラメータは、コンポーネント間でのカスケード時にも使用可能である。<br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
<ChildComponent CustomerId="@CustomerId" /> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br><br> | <br><br> | ||