I'm working with a Blazor web assembly project, but having an issue while submitting form after inputting email and password still asking for email and password
Email is required
Password is required
I think issue with model and values of input are not binding properly..
Is there any way to get out out this issue might I'm using this very first time
Here is my code for login.razor
:
@page "/login" @using System.ComponentModel.DataAnnotations
@inject NavigationManager NavigationManager
<div class="login-container">
<div class="login-card">
<h2>Sign In</h2>
<EditForm Model="@_loginModel" OnValidSubmit="@HandleSignIn" FormName="login">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group">
<label for="emailInput">Email Address</label>
<InputText
id="emailInput"
class="form-control"
@bind-Value="_loginModel.Email"
placeholder="Enter your email" />
<ValidationMessage For="@(() => _loginModel.Email)" />
</div>
<div class="form-group">
<label for="passwordInput">Password</label>
<InputText
id="passwordInput"
type="password"
class="form-control"
@bind-Value="_loginModel.Password"
placeholder="Enter your password" />
<ValidationMessage For="@(() => _loginModel.Password)" />
</div>
<div class="form-group form-check">
<InputCheckbox
id="rememberMeCheckbox"
class="form-check-input"
@bind-Value="_loginModel.RememberMe" />
<label class="form-check-label" for="rememberMeCheckbox">Remember me</label>
<a href="/forgotpassword" class="forgot-password-link">Forgot Password?</a>
</div>
<button type="submit" class="btn btn-primary btn-block">Sign In</button>
@if (_loginErrorMessage != null)
{
<div class="alert alert-danger mt-3">
@(_loginErrorMessage)
</div>
}
</EditForm>
<div class="footer-links">
<a href="/SetNewPassword">Change Password</a>
<span>Don't have an account? <a href="/register">Create Account</a></span>
</div>
</div> </div>
@code {
private LoginModel _loginModel = new LoginModel();
private string? _loginErrorMessage;
public class LoginModel
{
[Required(ErrorMessage = "Email is required")]
[EmailAddress(ErrorMessage = "Invalid email format")]
public string Email { get; set; } = string.Empty;
[Required(ErrorMessage = "Password is required")]
[MinLength(6, ErrorMessage = "Password must be at least 6 characters")]
public string Password { get; set; } = string.Empty;
public bool RememberMe { get; set; }
}
private async Task HandleSignIn()
{
// Simulate authentication process
var isAuthenticated = AuthenticateUser(_loginModel.Email, _loginModel.Password);
if (isAuthenticated)
{
// Simulate successful login - Redirect to the homepage or dashboard
NavigationManager.NavigateTo("/");
}
else
{
// If authentication fails, display an error message
_loginErrorMessage = "Invalid email or password. Please try again.";
}
await Task.Delay(1500); // Simulate a delay for the login process
}
private bool AuthenticateUser(string email, string password)
{
// Mock authentication logic (replace this with real authentication logic)
var mockUserEmail = "user@example.com";
var mockPassword = "password123"; // This should be hashed in a real app!
return email.Equals(mockUserEmail, StringComparison.OrdinalIgnoreCase) && password == mockPassword;
}
}
Your project may be for WebAssembly (WebApp) but your page isn't.
To verify, put <div>@RendererInfo.Name</div>
at the top of your page (dotnet 9+).
To fix it, add @rendermode InteractiveWebAssembly
.
Your code needs an interactive rendermode.