CODEWITHSUNDEEP
blazorblazor-server-side
Shiva Naru
Shiva Naru

Reputation: 1205

Pass Navigation Parameter to Nav or Layout component in blazor

On the Blazor (server side) app, I have a nested layout. When we go to the page in the nested layout, i have the nav for navigating to other pages. The landing page's url is /items/3 where 3 is {id:int}. Now to navigate to other pages, I need to pass this id to the Nav/Layout component - so that then i can use the id on the other s. How to pass this id to the Nav or Layout component?

Tried putting the [Parameter] tag on the Nav or Layout component but the param is not populated.

Upvotes: 4

Views: 3597

Answers (1)

enet
enet

Reputation: 45596

I don't think you can pass a value from a component to your layout component. No such feature exist... But, I guess you can employ some hacking. However, you should use IUriHelper to navigate to another page, something like this: 

@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper

<button onclick=@Navigate>Click me to navigate to another page</button>


@functions {
    private void Navigate()
    {
        UriHelper.NavigateTo("/hello-world");
    }
}

Edit: As I've written above, there is no way to pass a parameter from a child component to a parent component. You should adjust your app to the features, behaviors and limitations provided by Blazor. Below is a link to an issue in Github, which you can read and understand the mechanism of passing parameters. There's also a comment by Steve Anderson in which he suggests how you can hack around this: https://github.com/aspnet/Blazor/issues/857

Hope this helps...

Upvotes: 4

Related Questions