url - How to pass a list as a parameter to blazor page

Question

I am trying to link two blazor pages together by the click of a button. I want to pass a list of strings as a parameter to the other page.

Right now I have tried to add a route on the desired page:

@page "/page1/{filterValues}"

and in the code section I define the parameter as follows:

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

In the other page, I simply try to call the url with the list at the end like this:

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

This however doesnt seem to work. The url looks as follows: https://localhost:5001/page1/System.Collections.Generic.List%601[System.Object].Cast()

and I get this error in the console:

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.

Can anyone explain how I can pass a list of strings as a parameter via url?

question from:https://stackoverflow.com/questions/65644327/how-to-pass-a-list-as-a-parameter-to-blazor-page

Answer 1

You could serialize the list :

Calling Component

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