Blazor 路由中的多个查询字符串参数

Gre*_*egH 9 .net-core blazor

我在当前的项目中有多个从 url 检索 1 个查询参数的工作示例,但是当尝试对多个 url 参数遵循相同的约定时,我在 chrome 调试器控制台中收到以下错误:

Error: System.InvalidOperationException: 'Router' cannot find any component with a route for '/confirmemail'.
Run Code Online (Sandbox Code Playgroud)

我的页面路由定义为:

@page "/confirmemail/{Token}/{UserId}"
Run Code Online (Sandbox Code Playgroud)

并且该@functions{...}部分包含以下属性:

[Parameter]
string Token { get; set; }
[Parameter]
string UserId { get; set; }
Run Code Online (Sandbox Code Playgroud)

我正在尝试为如下所示的 url 检索查询字符串参数:

http://localhost:50466/confirmemail?Token=SomeReallyLargeToken&UserId=SomeGuidUserId

我怎样才能做到这一点?

Ant*_*eia 26

对于任何对如何在查询字符串样式中传递和获取参数感兴趣的人

http://localhost:50466/confirmemail?Token=SomeReallyLargeToken&UserId=SomeGuidUserId

页面路由不会改变

@page "/confirmemail/"

你应该得到像这样的参数

protected override void OnInitialized()
{
     var uri = navigationManager.ToAbsoluteUri(navigationManager.Uri); //you can use IURIHelper for older versions

     if(QueryHelpers.ParseQuery(uri.Query).TryGetValue("Token", out var token))
     {
         var token_par = token.First();
     }

     if(QueryHelpers.ParseQuery(uri.Query).TryGetValue("UserId", out var userid))
     {
         var userid_par = userid.First();
     }
}
Run Code Online (Sandbox Code Playgroud)

记得添加以下内容

@inject NavigationManager navigationManager
@using Microsoft.AspNetCore.WebUtilities @*for QueryHelpers*@
Run Code Online (Sandbox Code Playgroud)

我正在使用 preview-9

  • 只是为了补充上面的答案,如果您使用的是 wasm,请注意您需要在客户端项目中安装 nuget 包“Microsoft.AspNetCore.WebUtilities”(因为它不是默认 blazor 包的一部分。) (2认同)

Dir*_*aus 12

老问题的新答案:从 2022 年 1 月起,可以使用补充属性 SupplyParameterFromQuery 处理查询字符串参数。

[Parameter] [SupplyParameterFromQuery]
public string Token { get; set; }
[Parameter] [SupplyParameterFromQuery]
public string UserId { get; set; }
Run Code Online (Sandbox Code Playgroud)


Eug*_*kov 5

你可以试试吗?

http://localhost:50466/confirmemail/SomeReallyLargeToken/SomeGuidUserId
Run Code Online (Sandbox Code Playgroud)

我认为它应该工作。

更新:如果您想从查询参数中准确获取值,这里是一个很好的例子https://learn-blazor.com/pages/router/