not getting values on form submit

Question

@page "/login"
@using System.ComponentModel.DataAnnotations
<h3>Login</h3>
<div class="card" style="max-width: 400px; margin: auto; margin-top: 50px;">
<div class="card-body">
    <h5 class="card-title text-center">Login</h5>
    <EditForm Model="loginModel" OnValidSubmit="HandleLogin" FormName="login">
        <DataAnnotationsValidator />
        <ValidationSummary class="text-danger" />
        <div class="form-group">
            <label for="username">Username</label>
            <InputText class="form-control" id="username" @bind-Value="loginModel.Username" placeholder="Enter your username" />
        </div>
        <div class="form-group" style="margin-top: 10px;">
            <label for="password">Password</label>
            <InputText class="form-control" id="password" @bind-Value="loginModel.Password" placeholder="Enter your password" type="password" />
        </div>
        <button class="btn btn-primary btn-block" type="submit" style="margin-top: 20px; width: 100%;">Login</button>
    </EditForm>
    <div class="text-center" style="margin-top: 15px;">
        <a href="/register" class="text-muted">Don't have an account? Register</a>
    </div>
</div>
</div>

@code {
	private LoginModel loginModel = new LoginModel();

	private void HandleLogin()
	{
	    Console.WriteLine("Hello");
	    Console.WriteLine($"Username: {loginModel.Username}");
	    Console.WriteLine($"Password: {loginModel.Password}");
	}

	public class LoginModel
	{
	    public string Username { get; set; }
	    public string Password { get; set; }
	}
}

Answer 1

You did not tell us what kind of Blazor application you are building... I think the problem is a missing render mode. Below is a CSR (client side render) example that writes the username and password to the browser's console.

@page "/login"
@using System.ComponentModel.DataAnnotations
@rendermode InteractiveWebAssembly
<h3>Login</h3>
<div class="card" style="max-width: 400px; margin: auto; margin-top: 50px;">
    <div class="card-body">
        <h5 class="card-title text-center">Login</h5>
        <EditForm Model="loginModel" OnValidSubmit="HandleLogin" FormName="login">
            <DataAnnotationsValidator />
            <ValidationSummary class="text-danger" />
            <div class="form-group">
               <label for="username">Username</label>
                <InputText class="form-control" id="username" @bind-Value="loginModel.Username" placeholder="Enter your username" />
            </div>
            <div class="form-group" style="margin-top: 10px;">
                <label for="password">Password</label>
                <InputText class="form-control" id="password" @bind-Value="loginModel.Password" placeholder="Enter your password" type="password" />
            </div>
            <button class="btn btn-primary btn-block" type="submit" style="margin-top: 20px; width: 100%;">Login</button>
        </EditForm>
        <div class="text-center" style="margin-top: 15px;">
            <a href="/register" class="text-muted">Don't have an account? Register</a>
        </div>
    </div>
</div>
@code {
    private LoginModel loginModel = new LoginModel();
    private void HandleLogin()
    {
        Console.WriteLine("Hello");
        Console.WriteLine($"Username: {loginModel.Username}");
        Console.WriteLine($"Password: {loginModel.Password}");
    }
    public class LoginModel
    {
        public string Username { get; set; }
        public string Password { get; set; }
    }
}

Reference documentation

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0

Answer 2

you should read the docs. the two way binding model must be a property, not a field, and requires a binding attribute:

https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0

fix:

    [SupplyParameterFromForm]
    private LoginModel loginModel {get; set; } = new LoginModel();