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
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
@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; }
}
}
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
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();