not getting values on form submit

Mayur Nagrale 0 Reputation points
2024-12-21T14:00:11.6066667+00:00
@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; }
	}
}
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,635 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. AgaveJoe 28,961 Reputation points
    2024-12-21T20:48:51.17+00:00

    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://zcusa.951200.xyz/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0

    1 person found this answer helpful.
    0 comments No comments

  2. Bruce (SqlWork.com) 68,716 Reputation points
    2024-12-21T21:31:33.6066667+00:00

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

    https://zcusa.951200.xyz/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0

    fix:

        [SupplyParameterFromForm]
        private LoginModel loginModel {get; set; } = new LoginModel();
    
    
    1 person found this answer helpful.
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.