CODEWITHSUNDEEP
c#asp.net-coreblazorasp.net-core-3.0
001
001

Reputation: 65147

How to get input parameter in MainLayout?

  1. Blazor App: I have custom header logo and custom footer links that will change, based on the input parameter {id}.

  2. Input parameter ID is used in a query to retrieve company logo, and footer link information from database.

The dynamic header and footer is apart of the mainlayout, how do I get the input parameter via mainlayout?

Upvotes: 5

Views: 3166

Answers (1)

enet
enet

Reputation: 45626

Suppose you've created a Company parent component which can get a route parameter to represent a company ID, the value of which is used to retrieve the company's details that may be displayed in a child component. You may define the parent component like this:

Company.razor

@page "/company"
@page "/company/{ID}"

@code {
    [Parameter]
    public string ID { get; set; }
}

Note: The two route templates above are necessary...

Answering your question... Add this code to the MainLayout component

@code{

    public string ID { get; set; }

    protected override void OnParametersSet()
    {
        // pull out the "ID" parameter from the route data
        object id = null;
        if ((this.Body.Target as RouteView)?.RouteData.RouteValues?.TryGetValue("ID", out id) == true)
        {
            ID = id?.ToString();
        }

    }
}

Note: The code above extricates the value of the ID parameter from the RouteData, and stores it in the ID property. Now you can do with it, whatever you want... including passing it to the the NavMenu Component if it's necessary there. This is how you can do it:

Add a Component Parameter property to the NavMenu Component, like this: 

[Parameter]
public string ID { get; set; }

And add an ID component parameter attribute to the NavMenu component instance (located at the top of the MainLayout component. It should be now <NavMenu ID="@ID"/>

Are you happy now ?

Upvotes: 12

Related Questions