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

Question

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

Error: System.InvalidOperationException: 'Router' cannot find any component with a route for '/confirmemail'.

我的页面路由定义为：

@page "/confirmemail/{Token}/{UserId}"

和 @functions{...} 部分包含以下属性：

[Parameter]
string Token { get; set; }
[Parameter]
string UserId { get; set; }

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

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

我怎样才能做到这一点？

Answer 1

可以试试吗？

http://localhost:50466/confirmemail/SomeReallyLargeToken/SomeGuidUserId

我觉得应该可以。

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

Answer 2

这 ( /{Token}/{UserId} ) 不是查询字符串的模式。它是路由模板url（路由参数）的一部分。这是一个查询字符串：?Token=SomeReallyLargeToken&UserId=SomeGuidUserId。

我现在不确定，但这可能有效：http://localhost:50466/confirmemail/SomeReallyLargeToken/SomeGuidUserId

如果你想访问查询参数（不是路由参数），你想像这样使用 IUriHelper：

var uri = new Uri(UriHelper.GetAbsoluteUri());

请注意，您应该解析返回值...我曾经看到 Blazor 社区创建的一个实用程序可以执行此操作。

希望这对您有所帮助...

Answer 3

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

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();
     }
}

记得添加以下内容

@inject NavigationManager navigationManager
@using Microsoft.AspNetCore.WebUtilities @*for QueryHelpers*@

我正在使用 preview-9

Answer 4

我建议使用此处介绍的扩展方法：

https://chrissainty.com/working-with-query-strings-in-blazor/

我只是放了更多类型：

public static class NavigationManagerExtensions
{
    public static bool TryGetQueryString<T>(this NavigationManager navManager, string key, out T value)
    {
        var uri = navManager.ToAbsoluteUri(navManager.Uri);

        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue(key, out var valueFromQueryString))
        {
            if (typeof(T) == typeof(int) && int.TryParse(valueFromQueryString, out var valueAsInt))
            {
                value = (T)(object)valueAsInt;
                return true;
            }

            if (typeof(T) == typeof(int?) && int.TryParse(valueFromQueryString, out var valueAsNullableInt))
            {
                value = (T)(object)valueAsNullableInt;
                return true;
            }

            if (typeof(T) == typeof(bool) && bool.TryParse(valueFromQueryString, out var valueAsBool))
            {
                value = (T)(object)valueAsBool;
                return true;
            }

            if (typeof(T) == typeof(bool?) && bool.TryParse(valueFromQueryString, out var valueAsNullableBool))
            {
                value = (T)(object)valueAsNullableBool;
                return true;
            }

            if (typeof(T) == typeof(string))
            {
                value = (T)(object)valueFromQueryString.ToString();
                return true;
            }

            if (typeof(T) == typeof(decimal) && decimal.TryParse(valueFromQueryString, out var valueAsDecimal))
            {
                value = (T)(object)valueAsDecimal;
                return true;
            }

            if (typeof(T) == typeof(decimal?) && decimal.TryParse(valueFromQueryString, out var valueAsNullableDecimal))
            {
                value = (T)(object)valueAsNullableDecimal;
                return true;
            }

        }

        value = default;
        return false;
    }
}

关于：“处理查询字符串值的更新”部分...我确实喜欢这样：

<a class="dropdown-item" @onclick='() => GotoLink("thepage?intValue=0&boolValue=true&stringValue=blahBlah")'>goGoGo</a>

GotoLink 方法是这样的：

private void GotoLink(string url)
{
    NavManager.NavigateTo(url, forceLoad: true);
}

顺便说一句，组件的路由更干净：

@page "/ThePage"

Answer 5

老问题新答：2022年1月时，可以使用补充属性SupplyParameterFromQuery处理查询字符串参数。

[Parameter] [SupplyParameterFromQuery]
public string Token { get; set; }
[Parameter] [SupplyParameterFromQuery]
public string UserId { get; set; }

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

Multiple query string parameters in Blazor routing

.net-core

blazor