コンテンツにスキップ

Index

最小限の使用方法

最小限必要なものは以下の内容です。

  • [BlazorPath]属性を付与したクラスを用意します。この際、クラス定義にはpartial属性が必要です。
  • そのクラス内のメンバーとしてconst string型の定数を定義します。
  • メンバーの属性として、[Page<PageComponent>]を付与します。

BlazorPathHelperは上記の内容を満たすクラス定義を自動で走査して、URLビルダー関数を生成します。

WebPaths.cs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
using BlazorPathHelper;
using Microsoft.AspNetCore.Components;

[BlazorPath]
public partial class WebPaths
{
  [Page<Home>]
  public const string Index = "/";
}

// 各コンポーネントの定義（実際には各コンポーネントに記述されます）
public partial class Home : ComponentBase;
生成されたコード
Auto Generated Code
1
2
3
// <auto-generated />
[Route("/")]
public partial class Home;

結果として、Homeコンポーネントには@page属性が自動で付与されるのと同じ効果が得られます。

注意！

最後に元々定義されていた@page属性を削除する必要があります。

パラメーター・クエリサポート

URLにパラメーター定義が含まれている場合、自動で[Parameter]属性が付与されます。

WebPaths.cs
1
2
3
4
5
6
7
8
using BlazorPathHelper;

[BlazorPath]
public partial class WebPaths
{
  [Page<Counter>]
  public const string CounterWithState = "/counter/{count:int}";
}
生成されたコード
Auto Generated Code
1
2
3
4
5
6
7
// <auto-generated />
[Route("/counter/{count:int}")]
public partial class Counter
{
  [Parameter]
  public int Count { get; set; }
}

同様に、Query<QueryRecord>属性を付与することで、自動で[SupplyParameterFromQuery]属性が付与されます。

WebPaths.cs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
using BlazorPathHelper;

[BlazorPath]
public partial class WebPaths
{
  [Query<QueryRecord>, Page<Counter2>]
  public const string CounterWithQuery = "/counter/query";
}

public record QueryRecord(string query = "hello", int page = 0, bool? opt = null);
生成されたコード
Auto Generated Code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// <auto-generated />
[Route("/counter/query")]
public partial class Counter2
{
  [SupplyParameterFromQuery]
  public string Query { get; set; }

  [SupplyParameterFromQuery]
  public int Page { get; set; }

  [SupplyParameterFromQuery]
  public bool? Opt { get; set; }
}

クエリ名の短縮にも対応しています。

WebPaths.cs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
using BlazorPathHelper;

[BlazorPath]
public partial class WebPaths
{
  [Query<QueryRecord>, Page<Counter3>]
  public const string CounterWithQuery = "/counter/query";
}

public record QueryRecord
{
  [SupplyParameterFromQuery(Name = "q")]
  public string Query { get; init; } = "hello";

  [SupplyParameterFromQuery(Name = "p")]
  public int Page { get; init; } = 0;

  [SupplyParameterFromQuery(Name = "o")]
  public bool? Opt { get; init; }
}
生成されたコード
Auto Generated Code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// <auto-generated />
[Route("/counter/query")]
public partial class Counter3
{
  [SupplyParameterFromQuery(Name = "q")]
  public string Query { get; set; }

  [SupplyParameterFromQuery(Name = "p")]
  public int Page { get; set; }

  [SupplyParameterFromQuery(Name = "o")]
  public bool? Opt { get; set; }
}

仕組み

TODO