Mudblazor library is not able to handle my login request

Question

I'm using mudblazor library to make a client side blazor webapp. But, whenever I'm clicking the button of the form that I created using mudblazor library, form dosen't respond with either the request completion or any kind of error.

@page "/login"

@using AutoCRMClinet.Services.UserService
@using Models.User

@inject IUserService _userService

<PageTitle>Landing Page</PageTitle>

<div class="centered-container">
    <MudCard Class="pa-4" Style="min-width: 300px; max-width: 400px;">
        <MudCardContent>
            <MudText Typo="Typo.h5" Align="Align.Center">Login</MudText>
            <MudTextField T="string" Label="Email" @bind-Value="email" InputType="InputType.Email" Required="true" Immediate="true" />
            <MudTextField T="string" Label="Password" @bind-Value="password" InputType="InputType.Password" Required="true" Immediate="true" />
            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="HandleValidSubmit" Class="mt-4" FullWidth="true">Login</MudButton>
            <MudText Typo="Typo.body2">Email: @email</MudText>
            <MudText Typo="Typo.body2">Password: @password</MudText>
        </MudCardContent>
        <MudCardActions>
        </MudCardActions>
    </MudCard>
</div>

@code {
    private string email;
    private string password;

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

    [Parameter]
    public EventCallback<bool> IsLoggedInChanged { get; set; }


    private async Task HandleValidSubmit()
    {
        bool loginSuccessful = await HandleLogin();

        if (loginSuccessful)
        {
            // Update the IsLoggedIn parameter and notify the parent component
            IsLoggedIn = true;
            await IsLoggedInChanged.InvokeAsync(IsLoggedIn);
            // Redirect or perform any action upon successful login
        }
        else
        {
            // Display an error message or handle login failure
            Console.WriteLine("Login failed");
            StateHasChanged(); // Ensure UI updates if necessary
        }
    }

    private async Task<bool> HandleLogin()
    {
        Console.WriteLine($"Submitted Email: {email}");
        Console.WriteLine($"Submitted Password: {password}");

        UserCredential loginCred = new() { Email = email, Password = password };
        var response = await _userService.Login(loginCred);

        // Assuming response contains the login status, adjust accordingly
        return response.IsSuccessStatusCode; // Adjust this based on your response
    }


}

Here is the form I've created and the IUserService sents the request to web api. But whenever I'm clicking the login button the debugger point which is set at HandleValidSubmit function is not being hit.Also whatever I type in textfield not renders properly(basically it's text I wrote and email/password being overlapped) but whenever I see example in Mudblazor library the text behavior is correct. Also I'm using Mudblazor Webapplication template and so I assume my libraries are correctly setup.

Here is the code for MainLayout file:

@inherits LayoutComponentBase

<MudThemingProvider />

@if (!isLoggedIn)
{
    <AutoCrmClinet.Components.LoginComps.LoginComponent IsLoggedIn="isLoggedIn" IsLoggedInChanged="HandleIsLoggedInChanged" />
}
else
{

<MudLayout>
    <MudAppBar Elevation="1">
        <MudText Typo="Typo.h5" Class="ml-3">Application</MudText>
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
    <MudMainContent Class="mt-16 pa-4">
        @Body
    </MudMainContent>
</MudLayout>
}

@code {
    private bool _drawerOpen = true;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }

    private bool isLoggedIn = false;

    private void HandleIsLoggedInChanged(bool value)
    {
        isLoggedIn = value;
        StateHasChanged();
    }
}

Answer 1

I am assuming you're on .NET 8. Then this is most likely due to the chosen render mode and has nothing to do with MudBlazor. By default that is Static Server meaning you don't get any interactivity, you have to opt in to that by either changing the render mode globally, per page or per component. It's not an easy topic you will absolutely need to understand, because you need to know when does which code run where and especially with render mode Interactive Auto that's not always trivial.

Supported render modes are (quoted from MS Docs):

Name	Description	Render location	Interactive
Static Server	Static server-side rendering (static SSR)	Server	❌No
Interactive Server	Interactive server-side rendering (interactive SSR) using Blazor Server.	Server	✔️Yes
Interactive WebAssembly	Client-side rendering (CSR) using Blazor WebAssembly†.	Client	✔️Yes
Interactive Auto	Interactive SSR using Blazor Server initially and then CSR on subsequent visits after the Blazor bundle is downloaded.	Server, then client	✔️Yes

So depending on your use case you need to choose one of the render modes that supports interactivity. In my opinion the easiest option to get started is Interactive server, but again, please consider pros and cons of each render mode and choose wisely.

For how to switch render modes please refer to the Microsoft documentation since there are many ways on how to do it, again, depending on your use case per page, per component or globally for the whole app.

MS Docs - Blazor render modes.

If you prefer a video I recommend watching Full stack web UI with Blazor in .NET 8 | .NET Conf 2023 which is the official introduction of all these render modes with .NET 8 at .NET Conf 2023. Since then, there are now plenty of videos and other resources that explain the render modes online.