C#•3mo ago

Disable Blazor NavLink

Is there any way to disable a NavLink in Blazor? While my application is doing some long calculations I want to prevent the user to navigate to another page.

5 Replies

Nefario•3mo ago

you can add loading bar and pop up?.

Häng•3mo ago

Do you mean like adding an overlapping loading animation that prevents the user from clicking on anything else? I have a button that cancels the calculations though.

Nefario•3mo ago

well in that case add an overlapping loading animation and add Cancel button on that popup... :awesome: or add a.. State? like if State A then disable this if State B then enable it?. i often do this on Unity whenever i want to playaround with the unity prefab, but im not so sure if this OK in blazor. :TeBeCat:

Häng•3mo ago

I'll try that Thank you =)))

Apache•3mo ago

AdvancedNavLink.razor:

@(Disabled)
{
    <div class="@DisabledClass">
        @ChildContent
    </div>
}
else
{
    <NavLink href="@Href" class="@Class" ActiveClass="@ActiveClass" Match="@Match">
        @ChildContent
    </NavLink>
}

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

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

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

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

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

    [Parameter]
    public NavLinkMatch Match { get; set; }

    [Parameter]
    public bool Disabled { get; set; }
}

@(Disabled)
{
    <div class="@DisabledClass">
        @ChildContent
    </div>
}
else
{
    <NavLink href="@Href" class="@Class" ActiveClass="@ActiveClass" Match="@Match">
        @ChildContent
    </NavLink>
}

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

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

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

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

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

    [Parameter]
    public NavLinkMatch Match { get; set; }

    [Parameter]
    public bool Disabled { get; set; }
}

Usage:

<AdvancedNavLink Disabled="@_disableLinks"
                 Href="https://..."
                 Class="text-lg font-semibold"
                 ActiveClass="text-lg font-bold text-blue-700"
                 DisabledClass="text-lg font-medium text-grey-300">
    Click Me!
</AdvancedNavLink>

<AdvancedNavLink Disabled="@_disableLinks"
                 Href="https://..."
                 Class="text-lg font-semibold"
                 ActiveClass="text-lg font-bold text-blue-700"
                 DisabledClass="text-lg font-medium text-grey-300">
    Click Me!
</AdvancedNavLink>

Gaming

Programming

Disable Blazor NavLink