原文链接: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