Blazor中如何获取查询字符串QueryString的值

上一篇中提到了Blazor中的路由设置，我们使用类似 @page “/users/{id}” 的指令来定义路由参数，那么Blazor能不能使用查询字符串QueryString呢？笔者特意试了以下形式的路由设置： @page “/users?id={id}” 很不幸，这样是不行的。

但是查询字符串实在是太常用了，比如列表的查询页面，很可能会有多种不同的参数组合，如果完全依靠路由定义就会很繁琐。 那么应该如何才能取到QueryString里面的值呢？ 回顾上一篇，里面提到了NavigationManager类，我们看看她的定义，里面除了导航的方法，还包含一个Uri属性，她表示当前的URL地址，既然有了地址，那就有办法取出QueryString的值了。

首先我们定义一个NavigationManager的扩展方法负责提取QueryString里面的值，如下所示：

using Microsoft.AspNetCore.Components; using System.Web; public static class NavExtension { public static string QueryString(this NavigationManager nav, string paramName) { var uri = nav.ToAbsoluteUri(nav.Uri); string paramValue = HttpUtility.ParseQueryString(uri.Query).Get(paramName); return paramValue ?? ""; } }

然后修改页面代码：

@page "/users/{id}" @page "/user" @inject NavigationManager navigationManager <h1>User @Id</h1> @code { [Parameter] public string Id { get; set; } protected override void OnInitialized() { if (string.IsNullOrEmpty(Id)) { this.Id = navigationManager.QueryString("id"); } } }

这里定义了两个路由，表示可以同时接受两种地址

/users/xxxx(id)/user?id=xxx

然后在OnInitialized里面，首先检查有没有id参数，没有的话则尝试用扩展方法从QueryString里面获取id的值。