.Net Core Blazor How to pass multiple parameters?

Question

Click the a TAB to pass multiple parameters. How to receive

<a href="../navigatetopage?id="1"&key="img"></a>

In the page you want to navigate to, add the parameter to your route:

@page "/navigatetopage/"

[Parameter]
private string myvalue{ get; set; }

Answer 1

The easiest way is to use Route parameters instead of QueryString:

@page "/navigatetopage/{id:int}/{key}"

@code {
    [Parameter] public int Id{get;set;}
    [Parameter] public string Key{get;set;}

    ...
}

And the url looks like:

<a href="../navigatetopage/1/img"></a>

Or if you do want to query string, set the property/field within OnParametersSet():

@page "/navigatetopage/"

@code {
    public int Id{get;set;}
    public string Key{get;set;}

    protected override void OnParametersSet(){
        var qs= navManager.ToAbsoluteUri(navManager.Uri).Query;
        var query = Microsoft.AspNetCore.WebUtilities.QueryHelpers.ParseQuery(qs);
        if (query.TryGetValue("id", out var id_str)) {
            if (Int32.TryParse(id_str, out var id)){
                this.Id = id;
            }
        }
        if (query.TryGetValue("Key", out var key)) {
            this.Key = key;
        }
    }
}

Answer 2

Using Blazor Server I wanted to be able to pass multiple route parameters using NavigateTo. It took me way longer than it should have to get an answer that worked for me so I thought I would share:

On the component I want to navigate to:

@page "/nextpage/caseId/{caseId:int}/showSecrets/{showSecrets:bool}

On the component, I want to navigate from after injecting NavigationManager nav:

int caseID = 17;  //for example <br>
nav.NavigateTo("nextpage/caseId/" + caseId +"/showSecrets/" + true);

Hope this helps someone.