Razor Page创建表单如何绑定嵌套模型并保存ClassLocation数据？

1. 确保模型结构合规 #

模型必须包含无参数构造函数，且列表属性初始化空集合，保证模型绑定器能正确实例化：

public class NewHireClassModel
{
    // 其他业务属性示例
    public string ClassName { get; set; }
    
    // 初始化空列表，避免空引用异常
    public List<ClassLocationModel> class_locations { get; set; } = new List<ClassLocationModel>();

    public NewHireClassModel() { }
}

public class ClassLocationModel
{
    public int Id { get; set; }
    public string Location { get; set; }
    public DateTime StartTime { get; set; }

    public ClassLocationModel() { }
}

2. 页面模型（PageModel）配置 #

在Create.cshtml.cs中，用[BindProperty]标记主模型，并在OnGet方法初始化至少一个嵌套列表项：

public class CreateModel : PageModel
{
    // 标记为绑定属性，接收表单提交数据
    [BindProperty]
    public NewHireClassModel NewHireClass { get; set; }

    public void OnGet()
    {
        // 初始化带一个空地点的模型，确保视图有默认输入项
        NewHireClass = new NewHireClassModel
        {
            class_locations = new List<ClassLocationModel> { new ClassLocationModel() }
        };
    }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            // 验证失败返回页面，保留用户输入
            return Page();
        }

        // 此处执行保存逻辑，NewHireClass.class_locations已包含提交的地点数据
        return RedirectToPage("./Index");
    }
}

3. 视图中正确绑定嵌套列表 #

必须使用索引器绑定列表项，Razor Pages模型绑定依赖索引识别列表元素，推荐用for循环而非foreach：

@page
@model CreateModel

<form method="post">
    <!-- 主模型属性输入 -->
    <div class="form-group">
        <label asp-for="NewHireClass.ClassName"></label>
        <input asp-for="NewHireClass.ClassName" class="form-control" />
        <span asp-validation-for="NewHireClass.ClassName" class="text-danger"></span>
    </div>

    <!-- 嵌套地点列表输入 -->
    <div class="mt-4">
        <h5>班级地点</h5>
        @for (int i = 0; i < Model.NewHireClass.class_locations.Count; i++)
        {
            <div class="border p-3 mb-3">
                <input type="hidden" asp-for="NewHireClass.class_locations[i].Id" />
                
                <div class="form-group">
                    <label asp-for="NewHireClass.class_locations[i].Location"></label>
                    <input asp-for="NewHireClass.class_locations[i].Location" class="form-control" />
                    <span asp-validation-for="NewHireClass.class_locations[i].Location" class="text-danger"></span>
                </div>

                <div class="form-group">
                    <label asp-for="NewHireClass.class_locations[i].StartTime"></label>
                    <input asp-for="NewHireClass.class_locations[i].StartTime" type="datetime-local" class="form-control" />
                    <span asp-validation-for="NewHireClass.class_locations[i].StartTime" class="text-danger"></span>
                </div>
            </div>
        }
    </div>

    <!-- 可选：动态添加地点项的按钮 -->
    <button type="button" id="addLocationBtn" class="btn btn-secondary mb-3">添加新地点</button>

    <button type="submit" class="btn btn-primary">保存</button>
</form>

@* 动态添加地点的JS逻辑 *@
<script>
    document.getElementById('addLocationBtn').addEventListener('click', function() {
        const container = document.querySelector('.mt-4');
        const index = container.querySelectorAll('.border').length;
        
        // 生成带正确索引的表单元素
        const newLocationHtml = `
            <div class="border p-3 mb-3">
                <input type="hidden" name="NewHireClass.class_locations[${index}].Id" value="" />
                
                <div class="form-group">
                    <label>地点</label>
                    <input type="text" name="NewHireClass.class_locations[${index}].Location" class="form-control" />
                </div>

                <div class="form-group">
                    <label>开始时间</label>
                    <input type="datetime-local" name="NewHireClass.class_locations[${index}].StartTime" class="form-control" />
                </div>
            </div>
        `;
        
        container.insertAdjacentHTML('beforeend', newLocationHtml);
    });
</script>

4. 常见问题排查 #

• 确认NewHireClass属性标记了[BindProperty]，否则表单数据无法绑定
• 检查表单元素的name属性格式是否为NewHireClass.class_locations[索引].属性名，asp-for会自动生成正确格式，尽量避免手动写name
• 验证失败时，在视图添加@Html.ValidationSummary(true)查看具体错误
• 确保模型有无参数构造函数，模型绑定器无法实例化无默认构造的对象

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