How can I use <MudNavLink> as a POST <form> with an <AntiferyToken> in Blazor?

I have a <MudNavMenu> with several <MudNavLink>s. I want to create a logout button in the navigation menu, like the following form with an AntiferyToken:

<form>:

    <Authorized>
        <form action="authentication/logout" method="post">
            <AntiferyToken />
            <input type="hidden" name="ReturnUrl" value="@currentUrl" />
            <button type="submit" class="nav-link">
                <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout @context.User.Identity?.Name
            </button>
        </form>
    </Authorized>

How can I achieve the above using a <MudNavLink>? I have tried to embed it in a <MudButton> of submit type, but that looks bad.

<MudNavLink>:

    <Authorized>
        <MudNavLink Href="authentication/logout" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Logout">Logout</MudNavLink>
    </Authorized>

How can I use <MudNavLink> as a POST <form> with an <AntiferyToken> in Blazor?

I have a <MudNavMenu> with several <MudNavLink>s. I want to create a logout button in the navigation menu, like the following form with an AntiferyToken:

<form>:

    <Authorized>
        <form action="authentication/logout" method="post">
            <AntiferyToken />
            <input type="hidden" name="ReturnUrl" value="@currentUrl" />
            <button type="submit" class="nav-link">
                <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout @context.User.Identity?.Name
            </button>
        </form>
    </Authorized>

How can I achieve the above using a <MudNavLink>? I have tried to embed it in a <MudButton> of submit type, but that looks bad.

<MudNavLink>:

    <Authorized>
        <MudNavLink Href="authentication/logout" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Logout">Logout</MudNavLink>
    </Authorized>

• c#
• asp-core
• blazor
• mudblazor

Share Improve this question Follow edited Mar 25 at 5:52 Qiang Fu 9,38711 gold badge66 silver badges1616 bronze badges asked Mar 23 at 18:24 ShuzhengShuzheng 14.2k2929 gold badges121121 silver badges232232 bronze badges 1

• You could try to make the “authentication/logout" action also work for a GET request, so a form isn't needed. – Peter B Commented Mar 23 at 18:31

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You could use JS Interop to submit the form. Prevent the default behaviour of MudNavLink if you want "Match" attribute works.

@inject IJSRuntime JS

<span @onclick=SubmitLogoutForm>
    <MudNavLink Href="authentication/logout" @onclick:preventDefault="true" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Logout">Logout</MudNavLink>
</span>

    <form id="logoutForm" action="authentication/logout" method="post" style="display: none;">
        <AntiferyToken />
        <input type="hidden" name="ReturnUrl" value="currentUrl" />
    </form>

@code {
    private async Task SubmitLogoutForm()
    {
        await JS.InvokeVoidAsync("eval", "document.getElementById('logoutForm').submit();");
    }
}