Tag: blazor

@page "/RouteParameter/{text}"

<h1>Blazor is @Text!</h1>

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

Optional parameters

@page "/RouteParameter/{text?}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

Permit app navigation to the same component with a different optional parameter value

protected override void OnParametersSet()
{
    Text = Text ?? "fantastic";
}

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing#route-parameters
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/#route-parameters
https://blazor-university.com/routing/route-parameters/
https://blazor-university.com/routing/optional-route-parameters/

Apply a layout to a component

@page "/episodes"
@layout DoctorWhoLayout

<h2>Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sun Makers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

Apply a layout to a folder of components

_Imports.razor:

@layout DoctorWhoLayout
...

Apply a default layout to an app

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Apply a layout to arbitrary content (LayoutView component)

App.razor:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0#apply-a-layout
https://blazor-university.com/layouts/using-layouts/

Navigating from link

<h3>Anchor Link</h3>
<p>
    <a href="/navigate1">Navigate 1</a><br />
</p>

<h3>Nav Link</h3>
<p>
    <NavLink href="/navigate2">Navigate 2</NavLink><br />
</p>

Navigate from code

@page "/page1"
@inject NavigationManager UriHelper

<h3>Naviagte to another component Programatically</h3>
<button @onclick=@Navigate>Navigate</button>


@code {
void Navigate()
{
    UriHelper.NavigateTo("page2");
}
}

References
https://www.syncfusion.com/faq/blazor/routing/how-do-you-navigate-from-one-component-to-another-component-in-asp-net-core-blazor