在Blazor中使用查询字符串

在Blazor应用程序中的URL中传递数据时,大部分时间都会定义包含参数占位符的路由模板,将值传递为URL段。您可能还发现您需要能够使用查询字符串值,因此您如何在Blazor应用程序中执行此操作?

要尝试一下,请为列表名为的Blazor WASM项目添加新的剃刀组件 querystringdemo.razor.。如果您想在Blazor应用程序中使用URL,则需要使用 the NavigationManager component which is registered as a service by 默认。因此,下一步是将其注入组件:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

@code{

}

然后将连接的按钮添加到何时单击按钮时执行的事件处理程序:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

<button @onclick="Navigate">Click</button>

@code{

}

Next, you will add an implementation for the Navigate method that's been assigned to the button's onclick 事件。实现将向该查询字符串添加一个查询字符串 当前的URL,并将用户导航到修正的URL。你可以使用字符串 插值/连接生成查询字符串,但有一些 ASP.NET核心框架内提供的帮助程序方法,用于使用查询字符串。他们没有本地 可用于Blazor Apps,因此您需要安装其他包:

PM> install-package Microsoft.AspNetCore.WebUtilities

Now add a using statement to bring the Microsoft.AspNetCore.WebUtilities namespace into scope. 您可以按组件的组件在组件上执行此操作。更好,你可以在这方面做到这一点 _imports.razor. 属于应用程序根目录的文件。然后,命名空间将可用于需要它的所有组件:

@using Microsoft.AspNetCore.WebUtilities

Having done that, you can now provide an implementation for the Navigate method that uses both the injected instance of the NavigationManager and a 来自厕所包的方法:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

<button @onclick="Navigate">Click</button>

@code{
    void Navigate()
    {
        var query = new Dictionary<string, string> { { "name", "Mike" } };
        navManager.NavigateTo(QueryHelpers.AddQueryString(navManager.Uri, query));
    }
}

The QueryHelper.AddQueryString method, which comes from the WebUtilities package that you just installed, ensures that name/value pairs are encoded properly and added to a query string. The NavigateTo method provided by the NavigationManager navigates the user to the specified URL. If you run the application, navigate to /querystring-demo 然后点击这一点 按钮,您应该看到浏览器地址栏中的URL已更改:

请求参数

既然你可以生成查询字符串值,现在是时候看读它们了。要演示这一点,请为组件添加私有属性以表示 name 值和一些HTML呈现值:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

<button @onclick="Navigate">Click</button>

<div>Name = @name</div>

@code{
    string name { get; set; }
    void Navigate()
    {
        var query = new Dictionary<string, string> { { "name", "Mike" } };
        navManager.NavigateTo(QueryHelpers.AddQueryString(navManager.Uri, query));
    }
}

Finally, amend the Navigate method to parse the URI and obtain 查询字符串值:

@page "/querystring-demo"
@inject NavigationManager navManager

<h3>Query String Demo</h3>

<button @onclick="Navigate">Click</button>

<div>Name = @name</div>

@code{
    string name { get; set; }
    void Navigate()
    {
        var query = new Dictionary<string, string> { { "name", "Mike" } };
        navManager.NavigateTo(QueryHelpers.AddQueryString(navManager.Uri, query));
        
        var uri = navManager.ToAbsoluteUri(navManager.Uri);

        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("name", out var param))
        {
            name = param.First();
        }
    }
}

如果您引用,您可以安全地在查询字符串上获取 Query property of the Uri data type. The Uri property of the NavigationManager 相当困惑地让URL作为一个字符串。所以 the first step is to convert the string to a Uri type, which is accomplished courtesy of the ToAbsoluteUri method of the NavigationManager.

The ParseQuery method returns a Dictionary<string, StringValues>. You use the TryGetValue method to obtain the item with the key "name" if it exists. Finally, the value is assigned to the private field that you added earlier.

概括

使用查询字符串可能不是Blazor应用程序中的常见要求,但如果您需要管理旧路由或传入的URL,则您对该功能查询字符串的控制很少,您需要的工具将在其中找到 Microsoft.AspNet.Core.WebUtilities 包裹。