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 @Idh1>

@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的值。