Blazor University （23）路由 —— 路由参数

Posted 2022-05-23 dotNET跨平台

原文链接：https://blazor-university.com/routing/route-parameters/

路由参数

源代码^[1]

到目前为止，我们已经了解了如何将静态 URL 链接到 Blazor 组件。静态 URL 只对静态内容有用，如果我们希望同一个组件根据 URL 中的信息（例如客户 ID）呈现不同的视图，那么我们需要使用路由参数。

在添加组件的 @page 声明时，通过将其名称包装在一对 大括号 中来在 URL 中定义路由参数。

@page "/customer/CustomerId

捕获参数值

捕获参数的值就像添加具有相同名称的属性并用 [Parameter] 属性装饰它一样简单。

@page "/"
@page "/customer/CustomerId"

<h1>
  Customer:
  @if (string.IsNullOrEmpty(CustomerId))
  
    @:None
  
  else
  
    @CustomerId
  
</h1>
<h3>Select a customer</h3>
<ul>
  <li><a href="/customer/Microsoft">Microsoft</a></li>
  <li><a href="/customer/Google">Google</a></li>
  <li><a href="/customer/IBM">IBM</a></li>
</ul>

@code 
  [Parameter]
  public string CustomerId  get; set; 

请注意，当导航到解析为与当前页面相同类型的组件的新 URL 时，组件不会在导航之前被销毁，并且不会执行 OnInitialized* 生命周期方法。导航被简单地视为对组件参数的更改。

路由参数约束

源代码^[2]

除了能够指定包含参数的 URL 模板外，还可以确保 Blazor 仅在参数值满足特定条件时才将 URL 与组件匹配。

例如，在采购订单编号始终为整数的应用程序中，我们希望 URL 中的参数与我们的组件相匹配，以便仅当 OrderNumber 的 URL 值实际上是一个数字时才显示采购订单。

要为参数定义约束，它以冒号后缀，然后是约束类型。例如 :int 只会匹配在正确的位置包含一个有效的整数值的 URL。

@page "/"
@page "/purchase-order/OrderNumber:int"

<h1>
  Order number:
  @if (!OrderNumber.HasValue)
  
    @:None
  
  else
  
    @OrderNumber
  
</h1>
<h3>Select a purchase order</h3>
<ul>
  <li><a href="/purchase-order/1/">Order 1</a></li>
  <li><a href="/purchase-order/2/">Order 2</a></li>
  <li><a href="/purchase-order/42/">Order 42</a></li>
</ul>

@code 
  [Parameter]
  public int? OrderNumber  get; set; 

约束类型

约束	.NET 类型	有效值	无效值
:bool	System.Boolean	true false	1 Hello
:datetime	System.DateTime	2001-01-01 02-29-2000	29-02-2000
:decimal	System.Decimal	2.34 0.234	2,34 ૦.૨૩૪
:double	System.Double	2.34  0.234	2,34 ૦.૨૩૪
:float	System.Single	2.34 0.234	2,34 ૦.૨૩૪
:guid	System.Guid	99303dc9-8c76-42d9-9430-de3ee1ac25d0	99303dc9-8c76-42d9-9430-de3ee1ac25d0
:int	System.Int32	-1 42 299792458	12.34 ૨૩
:long	System.Int64	-1 42 299792458	12.34 ૨૩

本地化

Blazor 约束当前不支持本地化。

• 数字只有在 0..9 的形式下才被认为是有效的，而不是来自非英语语言，例如 ૦..૯（古吉拉特语）。

• 日期仅以 MM-dd-yyyy、MM-dd-yy 或 ISO 格式 yyyy-MM-dd 的形式有效。

• 布尔值必须为 true 或 false。

不支持的约束类型

Blazor 约束不支持以下约束类型，但希望将来会支持：

• 贪心参数

  在 ASP.NET MVC 中，可以提供一个以星号开头的参数名称，并捕获包括正斜杠在内的 URL 块。

  /articles/Subject/*TheRestOfTheURL

• 正则表达式

  Blazor 当前不支持基于正则表达式约束参数的能力。

• 枚举

  目前不可能约束参数以匹配枚举的值。

• 自定义约束

  无法定义自定义类来确定传递给参数的值是否有效。

参考资料

[1]

源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Routing/CapturingAParameterValue

[2]

源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Routing/ConstrainingRouteParameters