CODEWITHSUNDEEP
c#routesblazor
Bercovici Adrian
Bercovici Adrian

Reputation: 9360

Redirecting in blazor with parameter

Hello how can you redirect to another page in Blazor with a parameter?

@page "/auth"
@using Microsoft.AspNetCore.Blazor.Services;
@inject AuthService auth
@inject IUriHelper urihelper;

<input type="text" bind="@Username" />
<button onclick="@AuthAsync">Authenticate</button>



@functions{

    public string Username { get; set; }
    public string url = "/home";

    public async Task AuthAsync()
    {
        var ticket=await this.auth.AuthenticateAsync(Username);
        urihelper.NavigateTo(url); //i see no overload that accepts parameters
    }
}

In this case i want to navigate to the /home page giving it a string as parameter.

Upvotes: 21

Views: 54997

Answers (2)

enet
enet

Reputation: 45586

Do this:

  • Create a home.cshtml file page like this: Note that two @page directive are employed since optional parameters are not supported yet. The first permits navigation to the component without a parameter. The second @page directive takes the {username} route parameter and assigns the value to the Username property.

Pages/home.cshtml

@page "/home"
@page "/home/{username}"

<h1>@Username is authenticated!</h1>

@functions {
    // Define a property to contain the parameter passed from the auth page
    [Parameter]
    private string Username { get; set; };
}
  • Do this in your auth.cshtml
    @functions{

        public string Username { get; set; }
        public string url = "/home";

        public async Task AuthAsync()
        {
            var ticket=await this.auth.AuthenticateAsync(Username);
            // Attach the parameter to the url
            urihelper.NavigateTo(url + "/" + Username); 
        }
    }

Hope this helps...

Upvotes: 22

Chris Sainty
Chris Sainty

Reputation: 8521

You can only pass parameters in the URL at present.

So, if your home component was expecting [Parameter] string Name you would need to provide a URL of /home/fred and fred would be passed into the Name parameter of the home component.

If you are looking to pass more complex data then you would have to look at doing it via some kind of service.

Here is the link to the official docs on routing parameters: https://blazor.net/docs/routing.html#route-parameters

Upvotes: 4

Related Questions