I have asked this question once before on my account, but I thought I`d ask again due to the recent changes I have added to my code. The issue which happens here is when I enter values into input fields on my Blazor app, the values are not being binded to their respective variables? I have added debug lines which output to the terminal to try and see what happens with the values, but they just print out completely empty? Not even null, just empty. I have skimmed through multiple articles, but cannot seem to find the root of the issue? It is connected to an API backend which will communicate with my MongoDB database, and this connection works considering I have tested it with Swagger. In my first attempt I tried directly binding the values to the guest model in my API, but then I got the bright idea to try and see if having personal input variables for the form, and then later in my code block attach these to the guest model variables. This changed the output in the terminal from null to blank.
Here is the form I am using on my page:
<EditForm Model="@registerForm" OnSubmit="HandleValidSubmit" FormName="RegisterForm"><DataAnnotationsValidator /> <MudCard><MudGrid><MudItem xs="12" sm="6"><MudTextField Label="First name" @bind-Value="registerForm.FirstName" For="@(() => registerForm.FirstName)" Required="true" T="string" RequiredError="First name is required" InputType="@InputType.Text" Class="form-text-field" /></MudItem><MudItem xs="12" sm="6"><MudTextField Label="Last name" @bind-Value="registerForm.LastName" For="@(() => registerForm.LastName)" Required="true" T="string" RequiredError="Last name is required" InputType="@InputType.Text" Class="form-text-field" /></MudItem><MudItem xs="12" sm="6"><MudTextField Label="Email" @bind-Value="registerForm.Email" For="@(() => registerForm.Email)" Required="true" T="string" RequiredError="Email is required" InputType="@InputType.Text" Class="form-text-field" /></MudItem><MudItem xs="12" sm="6"><MudTextField Label="Phone number" @bind-Value="registerForm.Phone" For="@(() => registerForm.Phone)" Required="true" T="string" RequiredError="Phone number is required" InputType="@InputType.Telephone" Class="form-text-field" /></MudItem><MudItem xs="12" sm="6"><MudTextField Label="Password" @bind-Value="registerForm.Password" For="@(() => registerForm.Password)" Required="true" T="string" RequiredError="Password is required" InputType="@InputType.Password" Class="form-text-field" /></MudItem><MudCardActions><MudButton ButtonType="ButtonType.Submit" Color="Color.Primary" Variant="Variant.Filled" Class="ml-auto">Submit</MudButton></MudCardActions></MudGrid></MudCard></EditForm>And here is the updated code for the C# code block:
@code { bool success; private RegisterForm registerForm = new RegisterForm(); private Guest guest = new Guest(); public class RegisterForm { [Required(ErrorMessage = "First name is required")] [StringLength(36, ErrorMessage = "First name is too long", MinimumLength = 2)] public string FirstName { get; set; } = string.Empty; [Required(ErrorMessage = "Last name is required")] [StringLength(36, ErrorMessage = "Last name is too long", MinimumLength = 2)] public string LastName { get; set; } = string.Empty; [Required(ErrorMessage = "Email is required")] [StringLength(36, ErrorMessage = "Email is too long", MinimumLength = 2)] public string Email { get; set; } = string.Empty; [Required(ErrorMessage = "Phone number is required")] [StringLength(10, ErrorMessage = "Phone number is too long", MinimumLength = 2)] public string Phone { get; set; } = string.Empty; [Required(ErrorMessage = "Password is required")] [StringLength(36, ErrorMessage = "Password is too long", MinimumLength = 2)] public string Password { get; set; } = string.Empty; } public async Task HandleValidSubmit() { guest.FirstName = registerForm.FirstName; guest.LastName = registerForm.LastName; guest.Email = registerForm.Email; guest.Phone = registerForm.Phone; guest.Password = registerForm.Password; Console.WriteLine($"Guest info: First name: {registerForm.FirstName}, Last name: {registerForm.LastName}"); try { Console.WriteLine($"Guest object: {JsonSerializer.Serialize(guest)}"); var response = await Http.PostAsJsonAsync("api/Guests", guest); Console.WriteLine($"Response status code: {response.StatusCode}"); if (response.IsSuccessStatusCode) { Console.WriteLine("Saved successfully"); var responseBody = await response.Content.ReadAsStringAsync(); Console.WriteLine($"Response body: {responseBody}"); } else { Console.WriteLine($"Failed to save guest: {response.StatusCode}"); string responseBody = await response.Content.ReadAsStringAsync(); Console.WriteLine($"API Response: {responseBody}"); } } catch (Exception ex) { Console.WriteLine($"Error saving guest: {ex.Message}"); } }}I will also provide the terminal output when I try to submit this form:
Guest info: First name: , Last name:Guest object: {"FirstName":"","LastName":"","Email":"","Phone":"","Password":""}Response status code: BadRequestFailed to save guest: BadRequestAPI Response: {"type":"https://tools.ietf.org/html/rfc9110#section-15.5.1","title":"One or more validation errors occurred.","status":400,"errors":{"Email":["The Email field is required.","The Email field is not a valid e-mail address."],"Phone":["The Phone field is required."],"LastName":["The LastName field is required."],"Password":["The Password field is required."],"FirstName":["The FirstName field is required."]},