Blazor Web Assembly表单如何绑定嵌套复杂模型？

直接上可落地的代码方案，包含模型定义、表单绑定、验证全流程：

1. 嵌套模型定义（带验证） #

注意给主模型里的嵌套属性加[ValidateComplexType]，不然嵌套模型的验证规则不会生效，同时初始化嵌套对象避免空引用：

// 嵌套模型MOD1
public class MOD1
{
    [Required(ErrorMessage = "名称不能为空")]
    public string Name { get; set; }

    [Range(18, 100, ErrorMessage = "年龄需在18-100之间")]
    public int Age { get; set; }
}

// 嵌套模型MOD2
public class MOD2
{
    [Required(ErrorMessage = "地址不能为空")]
    public string Address { get; set; }

    [Phone(ErrorMessage = "请输入有效的手机号")]
    public string Phone { get; set; }
}

// 主模型CLASS1
public class CLASS1
{
    [ValidateComplexType]
    public MOD1 MOD1 { get; set; } = new MOD1();

    [ValidateComplexType]
    public MOD2 MOD2 { get; set; } = new MOD2();
}

2. EditForm绑定嵌套属性 #

直接通过@bind-Value="Model.嵌套模型.属性名"的层级写法绑定，验证消息也可以精准定位到嵌套属性：

@page "/nested-model-form"
@using YourProjectNamespace.Models; <!-- 替换成你的模型命名空间 -->

<h3>嵌套模型表单</h3>

<EditForm Model="@formModel" OnValidSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <!-- 绑定MOD1的属性 -->
    <div class="mb-3">
        <label class="form-label">名称:</label>
        <InputText @bind-Value="formModel.MOD1.Name" class="form-control" />
        <ValidationMessage For="@(() => formModel.MOD1.Name)" />
    </div>

    <div class="mb-3">
        <label class="form-label">年龄:</label>
        <InputNumber @bind-Value="formModel.MOD1.Age" class="form-control" />
        <ValidationMessage For="@(() => formModel.MOD1.Age)" />
    </div>

    <hr />

    <!-- 绑定MOD2的属性 -->
    <div class="mb-3">
        <label class="form-label">地址:</label>
        <InputText @bind-Value="formModel.MOD2.Address" class="form-control" />
        <ValidationMessage For="@(() => formModel.MOD2.Address)" />
    </div>

    <div class="mb-3">
        <label class="form-label">手机号:</label>
        <InputText @bind-Value="formModel.MOD2.Phone" class="form-control" />
        <ValidationMessage For="@(() => formModel.MOD2.Phone)" />
    </div>

    <button type="submit" class="btn btn-primary">提交</button>
</EditForm>

@code {
    private CLASS1 formModel = new CLASS1();

    private void HandleSubmit()
    {
        // 这里写表单提交逻辑，比如保存数据到后端
        Console.WriteLine($"名称: {formModel.MOD1.Name}, 年龄: {formModel.MOD1.Age}");
        Console.WriteLine($"地址: {formModel.MOD2.Address}, 手机号: {formModel.MOD2.Phone}");
    }
}

关键注意点 #

• 嵌套属性绑定无需特殊语法，直接用层级访问即可，Blazor双向绑定完全支持
• 必须初始化嵌套模型（= new MOD1()），否则会触发空引用异常
• [ValidateComplexType]是嵌套模型验证生效的核心，别漏加

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