Blazor获取Url路由参数的方法
2024-10-13
21
这里整理了两种获取参数值的方法: 通过NavigationManager服务获取参数值和配置路由参数获取参数值。
在Blazor Server和WebAssembly中,可以通过注入 NavigationManager服务获取Uri转化为Uri对象得到Query. 然后使用HttpUtility或者QueryHelpers提供的方法获取参数值。
注入NavigationManager服务获取参数值
@code{
public string? Id { get; set; }
public string? Url { get; set; }
protected override void OnInitialized()
{
Url = NavManager.BaseUri;
// 获取Uri对象
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
// HttpUtility 获取参数值
Id = HttpUtility.ParseQueryString(uri.Query).Get("id");
// QueryHelpers 获取参数值
Id = QueryHelpers.ParseQuery(uri.Query).GetValueOrDefault("id");
StringValues extraTopping;
// QueryHelpers TryGetValue获取参数值
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("id", out extraTopping))
{
Id = System.Convert.ToString(extraTopping);
}
}
}
配置路由参数获取参数值
将参数名声明为路由参数
使用 @page 指令指定将作为路由参数传递给组件的 URI 部分。 在组件的代码中,你可以像获取组件参数的值一样获取路由参数的值:
@page "/article/{id}"
使用可选路由参数
这样的话如果没有id参数会找不到路由。如果id可以不传,那么可以使用可选路由参数:
@page "/article/{id?}"
根据微软的建议,为可选参数设置默认值是很好的做法。
为路由参数指定类型
如果需要限制参数的类型,可以为路由参数指定类型:
@page "/article/{id:int?}"
@code {
[Parameter]
public int? Int{ get; set; }
}
设置捕获全部路由参数
如果要同时获得几个同名参数的话可以设置捕获全部路由参数
@page "@page "/{*name}""
@code {
[Parameter]
public string? Name { get; set; }
}
此时我们传递多个参数 https://localhost:7096/paul/mary/peter
获取的Name值为: paul/mary/peter
更新于:23天前赞一波!
相关文章
- Blazor的N种渲染模式原理和常见问题说明
- .NET Blazor 2024年发展趋势
- Blazor ServerPrerendered模式OnInitialized{Async}执行两次
- ASP.NET Core Blazor EditForm内置表单验证显示ValidationMessage
- Blazor NavigateTo报错Microsoft.AspNetCore.Components.NavigationException:“Exception_WasThrown”
- Blazor的5种render-mode的区别
- Blazor使用内存中状态容器服务保存和验证登陆状态
- .NET的Razor和Blazor有什么区别和联系?
- .NET的Blazor值得学习吗?Blazor的优缺点和使用场景
- Blazor适合大型项目吗?
- .NET8 Blazor三种模式的区别和使用场景
- .NET用Blazor的公司多吗?
- .NET8 Blazor的Auto渲染模式
文章评论
评论问答