如何将列表作为参数传递给 blazor 页面

Question

我正在尝试通过单击按钮将两个 blazor 页面链接在一起。我想将字符串列表作为参数传递给其他页面。

现在我尝试在所需页面上添加路线：

@page "/page1/{filterValues}"

在代码部分我定义参数如下：

[Parameter]
public IEnumerable<String> filterValues { get; set; }

在另一个页面中，我只是尝试调用带有列表末尾的 url，如下所示：

NavManager.NavigateTo("/page1/"+filterValues);

但这似乎不起作用。网址如下所示： https://localhost:5001/page1/System.Collections.Generic.List%601[System.Object].Cast()

我在控制台中收到此错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Unable to set property 'filterValues' on object of type 'Proj.Client.Pages.page1'. The error was: Specified cast is not valid.
System.InvalidOperationException: Unable to set property 'filterValues' on object of type 'Proj.Client.Pages.page1'. The error was: Specified cast is not valid.

谁能解释我如何通过 url 将字符串列表作为参数传递？

Answer 1

你可以序列化列表：

调用组件

<a href="/somepage/@param1/@param2/@param3/@param4">Some Page</a>

@code {
    string[] list1 = new[] { "Id1", "FirstName1", "Surname1" };
    string[] list2 = new[] { "Id2", "FirstName2", "Surname2", "Value.value", "Value", "Value" };
    string[] list3 = new[] { "Id3", "FirstName3", "Surname3", "Value/value", "Value", "Value", "Value", "Value" };
    string[] list4 = new[] { "Id4", "FirstName4", "Surname4", "Value-value", "Value", "Value", "Value" };

    public string param1 => Serialize(list1);
    public string param2 => Serialize(list2);
    public string param3 => Serialize(list3);
    public string param4 => Serialize(list4);

    static string Serialize(string[] source) => 
        System.Net.WebUtility.UrlEncode(System.Text.Json.JsonSerializer.Serialize(source));
}

SomePage.razor

@page "/somepage/{List1Json}/{List2Json}/{List3Json}/{List4Json}"

<h3>SomePage</h3>

<ul>
    @foreach (var item in List1) { <li>@item</li> }
</ul>
<ul>
    @foreach (var item in List2) { <li>@item</li> }
</ul>
<ul>
    @foreach (var item in List3) { <li>@item</li> }
</ul>
<ul>
    @foreach (var item in List4) { <li>@item</li> }
</ul>
@code {
    [Parameter] public string List1Json { get; set; }
    [Parameter] public string List2Json { get; set; }
    [Parameter] public string List3Json { get; set; }
    [Parameter] public string List4Json { get; set; }

    public string[] List1 => Deserialize(List1Json);
    public string[] List2 => Deserialize(List2Json);
    public string[] List3 => Deserialize(List3Json);
    public string[] List4 => Deserialize(List4Json);

    static string[] Deserialize(string source) 
        => System.Text.Json.JsonSerializer.Deserialize<string[]>(System.Net.WebUtility.UrlDecode(source));
}