MudBlazor EditForm无法获取输入值，提交模型为空如何解决？

问题根源分析 #

从终端输出能看到，提交的guest对象所有属性都是null，核心问题包括：

1. 前端表单未添加数据验证规则，DataAnnotationsValidator未生效，空值直接提交到API
2. 表单缺失Phone字段的输入框，但API要求Phone为必填项，这是400错误的直接诱因之一
3. 双向绑定未正确捕获用户输入，导致提交空对象

解决方案步骤 #

1. 为Guest模型添加数据验证特性

在API的Guest类中添加[Required]等验证特性，让前后端都能校验数据合法性：

using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;
using System.ComponentModel.DataAnnotations; // 必须引用此命名空间

namespace HavblikkAPI.Models
{
    [BsonIgnoreExtraElements]
    public class Guest
    {
        [BsonElement("firstName")]
        [Required(ErrorMessage = "请输入名字")]
        public string FirstName { get; set; }

        [BsonElement("lastName")]
        [Required(ErrorMessage = "请输入姓氏")]
        public string LastName { get; set; }

        [BsonElement("email")]
        [Required(ErrorMessage = "请输入邮箱")]
        [EmailAddress(ErrorMessage = "邮箱格式不正确")]
        public string Email { get; set; }

        [BsonElement("phone")]
        [Required(ErrorMessage = "请输入手机号")]
        public string Phone { get; set; }

        [BsonElement("password")]
        [Required(ErrorMessage = "请输入密码")]
        public string Password { get; set; }
    }
}

2. 完善Blazor表单，补充缺失字段与验证提示

修改EditForm，添加Phone输入框和验证消息组件，确保用户输入错误时能及时收到提示：

<EditForm Model="@guest" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary Class="text-danger mb-3" /> <!-- 显示所有验证错误汇总 -->
    <MudGrid>
        <MudItem xs="12" sm="7">
            <MudCard>
                <MudCardContent>
                    <MudTextField Label="名字" Class="mt-3"
                                  @bind-Value="guest.FirstName" 
                                  For="@(() => guest.FirstName)" />
                    <ValidationMessage For="@(() => guest.FirstName)" Class="text-danger" />

                    <MudTextField Label="姓氏" Class="mt-3"
                                  @bind-Value="guest.LastName" 
                                  For="@(() => guest.LastName)" />
                    <ValidationMessage For="@(() => guest.LastName)" Class="text-danger" />

                    <MudTextField Label="邮箱" Class="mt-3"
                                  @bind-Value="guest.Email" 
                                  For="@(() => guest.Email)" />
                    <ValidationMessage For="@(() => guest.Email)" Class="text-danger" />

                    <!-- 补充缺失的Phone输入框 -->
                    <MudTextField Label="手机号" Class="mt-3"
                                  @bind-Value="guest.Phone" 
                                  For="@(() => guest.Phone)" />
                    <ValidationMessage For="@(() => guest.Phone)" Class="text-danger" />

                    <MudTextField Label="密码" HelperText="请设置强密码" Class="mt-3"
                                  @bind-Value="guest.Password" 
                                  For="@(() => guest.Password)" 
                                  InputType="InputType.Password" />
                    <ValidationMessage For="@(() => guest.Password)" Class="text-danger" />
                </MudCardContent>
                <MudCardActions>
                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">注册</MudButton>
                </MudCardActions>
            </MudCard>
        </MudItem>
    </MudGrid>
</EditForm>

3. 优化组件内的Guest对象定义

将组件中的public Guest guest = new Guest();改为private Guest guest = new Guest();，符合Blazor组件最佳实践：

@code {
    bool success;
    private Guest guest = new Guest(); // 修改为private

    public async Task HandleValidSubmit()
    {
        Console.WriteLine($"Guest info: First name: {guest.FirstName}, Last name: {guest.LastName}");

        try
        {
            Console.WriteLine($"Guest object: {JsonSerializer.Serialize(guest)}");
            var response = await Http.PostAsJsonAsync("Guests", guest);
            Console.WriteLine($"Response status code: {response.StatusCode}");
            if (response.IsSuccessStatusCode)
            {
                Console.WriteLine("保存成功");
                guest = new Guest();
                StateHasChanged();
                var responseBody = await response.Content.ReadAsStringAsync();
                Console.WriteLine($"响应内容: {responseBody}");
            }
            else
            {
                Console.WriteLine($"保存失败: {response.StatusCode}");
                string responseBody = await response.Content.ReadAsStringAsync();
                Console.WriteLine($"API响应: {responseBody}");
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"保存出错: {ex.Message}");
        }
    }
}

4. 确认API请求地址配置正确

在Program.cs中配置HttpClient的BaseAddress，确保请求指向正确的API：

builder.Services.AddScoped(sp => new HttpClient 
{ 
    BaseAddress = new Uri("https://localhost:5001/") // 替换为你的API实际地址
});

验证效果 #

修改完成后测试：

1. 输入为空时，前端会直接显示验证错误，无法提交
2. 填写所有必填字段后，提交的guest对象会包含正确属性值，API返回成功响应

内容的提问来源于stack exchange，提问作者Yeat Supremacy