C#•4mo ago

Blazor Static SSR - redirect after form submission

I woudl like to redirect user after successful login. However, after NavigationManager.NavigateTo, it throws an exception. I tried to find any useful information, but I found nothing. Here's my HTML form:

<EditForm Enhance="true" Model="LoginEmployee" OnSubmit="HandleSubmit" FormName="Login">
        <div class="login">
            @*img logo?*@
            <h2 style="text-align: center; font-family: NunitoSans-Regular, serif">Login</h2>
            <div>
                <label class="usernameLabel">
                    Username:
                    <InputText style="height: 27px; margin-top: 8px;" type="text" @bind-Value="LoginEmployee!.Login"></InputText>
                </label>
            </div>
            <div>
                <label class="passwordLabel">
                    Password:
                    <InputText style="height: 27px; margin-top: 8px;" type="password" @bind-Value="LoginEmployee!.Password"></InputText>
                </label>
            </div>
            <div class="buttons">
                <button class="loginButton" type="submit">Login</button>
            </div>
        </div>
    </EditForm>

<EditForm Enhance="true" Model="LoginEmployee" OnSubmit="HandleSubmit" FormName="Login">
        <div class="login">
            @*img logo?*@
            <h2 style="text-align: center; font-family: NunitoSans-Regular, serif">Login</h2>
            <div>
                <label class="usernameLabel">
                    Username:
                    <InputText style="height: 27px; margin-top: 8px;" type="text" @bind-Value="LoginEmployee!.Login"></InputText>
                </label>
            </div>
            <div>
                <label class="passwordLabel">
                    Password:
                    <InputText style="height: 27px; margin-top: 8px;" type="password" @bind-Value="LoginEmployee!.Password"></InputText>
                </label>
            </div>
            <div class="buttons">
                <button class="loginButton" type="submit">Login</button>
            </div>
        </div>
    </EditForm>

C# code:

public partial class Login : ComponentBase
{
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }
    [SupplyParameterFromForm] 
    private LoginEmployeeCommand? LoginEmployee { get; set; } = new();
    private string ErrorMessage { get; set; } = string.Empty;

    /// <inheritdoc />
    protected override void OnInitialized()
    {
        LoginEmployee ??= new LoginEmployeeCommand();
        var isAuthenticated = HttpContext!.User.Identity!.IsAuthenticated;
        ErrorMessage = string.Empty;
        if (isAuthenticated)
        {
            NavigationManager.NavigateTo("/", forceLoad: true);
        }
    }

    private async Task HandleSubmit()
    {
        if (string.IsNullOrWhiteSpace(LoginEmployee.Login) || string.IsNullOrWhiteSpace(LoginEmployee.Password))
        {
            ErrorMessage = "Username and password are required.";
        }
        else
        {
            try
            {
                var user = await Mediator.Send(LoginEmployee);
                await CookieService.SignInAsync(user);
            }
            catch (NotFoundException)
            {
                Logger.LogWarning("User not found error");
                ErrorMessage = "Invalid login credentials";
            }
            catch (InvalidOperationException)
            {
                Logger.LogWarning($"Login failed: User: [{LoginEmployee.Login}]");
                ErrorMessage = "Invalid login credentials";
            }
            catch (Exception ex)
            {
                Logger.LogError(ex, "Login failure");
                ErrorMessage = "Something went wrong";
            }
        }
    }
}

public partial class Login : ComponentBase
{
    [CascadingParameter]
    private HttpContext? HttpContext { get; set; }
    [SupplyParameterFromForm] 
    private LoginEmployeeCommand? LoginEmployee { get; set; } = new();
    private string ErrorMessage { get; set; } = string.Empty;

    /// <inheritdoc />
    protected override void OnInitialized()
    {
        LoginEmployee ??= new LoginEmployeeCommand();
        var isAuthenticated = HttpContext!.User.Identity!.IsAuthenticated;
        ErrorMessage = string.Empty;
        if (isAuthenticated)
        {
            NavigationManager.NavigateTo("/", forceLoad: true);
        }
    }

    private async Task HandleSubmit()
    {
        if (string.IsNullOrWhiteSpace(LoginEmployee.Login) || string.IsNullOrWhiteSpace(LoginEmployee.Password))
        {
            ErrorMessage = "Username and password are required.";
        }
        else
        {
            try
            {
                var user = await Mediator.Send(LoginEmployee);
                await CookieService.SignInAsync(user);
            }
            catch (NotFoundException)
            {
                Logger.LogWarning("User not found error");
                ErrorMessage = "Invalid login credentials";
            }
            catch (InvalidOperationException)
            {
                Logger.LogWarning($"Login failed: User: [{LoginEmployee.Login}]");
                ErrorMessage = "Invalid login credentials";
            }
            catch (Exception ex)
            {
                Logger.LogError(ex, "Login failure");
                ErrorMessage = "Something went wrong";
            }
        }
    }
}

4 Replies

Richard•4mo ago

What's the exception?

hunterlanOP•4mo ago

Microsoft.AspNetCore.Components.NavigationException: Exception of type 'Microsoft.AspNetCore.Components.NavigationException' was thrown.

hunterlanOP•4mo ago

All right, the fix for this solution is remove NavigationManager from try...catch, because it navigates with help of exception, according to this comment on GitHub: https://github.com/dotnet/aspnetcore/issues/53996#issuecomment-1971734784

GitHub

.NET 8 Blazor - NavigationManager.NavigateTo() Inconsistent Behavio...

Is there an existing issue for this? I have searched the existing issues Describe the bug A very common use case in web applications is that the user may need to navigate to another Url. Usually th...

mindhardt•4mo ago

I've faced this thing, my solution was to add

catch (NavigationException)
{
  throw;
}

catch (NavigationException)
{
  throw;
}

before catch-all branch Navigation exception is not a real exception and its annoying Or, to write less code, change your catch-all to

catch (Exception ex) when (ex is not NavigationException)
{
   Logger.LogError(ex, "Login failure");
   ErrorMessage = "Something went wrong";
}

catch (Exception ex) when (ex is not NavigationException)
{
   Logger.LogError(ex, "Login failure");
   ErrorMessage = "Something went wrong";
}

@hunterlan

Gaming

Programming

Blazor Static SSR - redirect after form submission