ASP.NET Core表单提交后Model的tvList属性为NULL的问题问询

我正在开发一个ASP.NET Core Web应用，需要实现一个从数据库读取数据生成的大型树形选择表单。但表单提交后，MeasureModel中的tvList属性始终为NULL。

树形表单HTML代码 #

<form method="post" action="/Launch/Home/retrieveSelection">
    <input type="number" name="Id" value="1234" style="display:none" />
    @*MIRAR PERQUE tvList SEMPRE ESTA A NULL*@
    <ul>
        @foreach (TVStandard tvstandard in Model.tvList.StandardsList) {
            int i = 0;
            <li>
                <span class="caret"></span>
                <input type="checkbox" class="checker" id="@tvstandard.Name" name="tvList.StandardsList[@i].IsSelected" value="true">
                <label for="@tvstandard.Name">@tvstandard.Name</label>
                <ul class="nested">
                    @foreach (TVSection tvsection in tvstandard.Children) {
                        int j = 0;
                        <li>
                            <span class="caret"></span>
                            <input type="checkbox" class="checker" id="@tvsection.Name" name="tvList.StandardsList[@i].Children[@j].IsSelected" value="true">
                            <label for="@tvsection.Name">@tvsection.Name</label>
                            <ul class="nested">
                                @foreach (TVMode tvmode in tvsection.Children) {
                                    int k = 0;
                                    <li>
                                        <span class="caret"></span>
                                        <input type="checkbox" class="checker" id="@tvmode.Name" name="tvList.StandardsList[@i].Children[@j].Children[@k].IsSelected" value="true">
                                        <label for="@tvmode.Name">@tvmode.Name</label>
                                        <ul class="nested">
                                            @foreach (TVFreq tvfreq in tvmode.Children) {
                                                int l = 0;
                                                <li>
                                                    <ul class="nested" style="display:block">
                                                        <input type="checkbox" class="checker" id="@tvfreq.Name" name="tvList.StandardsList[@i].Children[@j].Children[@k].Children[@l].IsSelected" value="true">
                                                        <label for="@tvfreq.Name">@tvfreq.Name</label>
                                                    </ul>
                                                </li>
                                                l++;
                                            }
                                        </ul>
                                    </li>
                                    k++;
                                }
                            </ul>
                        </li>
                        j++;
                    }
                </ul>
            </li>
            i++;
        }
    </ul>
    <br />
    <input type="submit" />
</form>

相关Model定义 #

MeasureModel #

public class MeasureModel
{
    public int Id { get; set; }
    public TVList? tvList { get; set; }
}

TVItem基类（所有树形节点类继承自此类） #

public class TVItem
{
    public string Name;
    public TVItem Parent;
    public List<TVItem> Children;
    public bool IsSelected = false;

    public TVItem()
    {
        Children = new List<TVItem>();
    }

    public TVItem(string name, TVItem parent)
    {
        Children = new List<TVItem>();
        this.Name = name;
        this.Parent = parent;
    }
    public TVItem(TVItem item)
    {
        this.Children = new();
        Name = item.Name;
        Parent = item.Parent;
        IsSelected = item.IsSelected;
    }
}

我原本以为提交的表单模型会和渲染页面的模型一致，仅需传递IsSelected状态。现提出以下问题：

1. 提交的表单模型是否与页面渲染用的模型一致？
2. 若不一致，是否需要填充所有属性才能避免tvList为NULL？
3. 有哪些可行的解决方法？（我觉得使用hidden属性不够优雅，但如果是必要方案也可接受）

1. 提交的表单模型是否与页面渲染用的模型一致？ #

不一致。页面渲染时用的是包含完整树形节点数据的MeasureModel实例，但表单提交只会发送表单中明确定义的输入字段值——也就是你写的那些IsSelected复选框对应的name属性值，其他未在表单中出现的属性（比如Name、Parent、Children集合本身）都不会被提交。

ASP.NET Core的模型绑定需要足够信息来实例化对象并填充属性。当前表单只提交了IsSelected的路径，但没有提供任何能让框架创建TVList、TVStandard等对象的标识或基础数据，因此框架无法实例化tvList，导致它为NULL。另外还有个关键问题：你的TVItem中Name、Parent等都是字段，而模型绑定默认只处理公共属性，这也是绑定失败的重要原因。

2. 若不一致，是否需要填充所有属性才能避免tvList为NULL？ #

不需要填充所有属性，但需要提供足够的标识信息，让模型绑定器能识别每个节点的层级、实例，同时能创建对应的对象结构。

核心需求是：绑定器需要知道如何构建TVList及其下的StandardsList集合，还有每个层级的Children集合。如果没有任何标识（比如节点ID）或能让框架按索引匹配创建空对象的信息，绑定器无法生成对应的对象结构，tvList自然会是NULL。

3. 可行的解决方法 #

方法一：修正字段为属性+添加隐藏字段传递节点标识 #

首先必须把TVItem的字段改为公共属性，否则模型绑定无法识别：

public class TVItem
{
    public int Id { get; set; } // 添加节点唯一标识
    public string Name { get; set; } = string.Empty;
    public TVItem? Parent { get; set; }
    public List<TVItem> Children { get; set; } = new List<TVItem>();
    public bool IsSelected { get; set; } = false;

    // 构造函数保持不变
}

然后修正表单中的索引变量位置（之前的循环内初始化索引会导致所有节点的name索引都是0，绑定器无法区分），同时添加隐藏字段传递节点ID：

@{ int i = 0; }
@foreach (TVStandard tvstandard in Model.tvList.StandardsList) {
    <li>
        <span class="caret"></span>
        <input type="hidden" name="tvList.StandardsList[@i].Id" value="@tvstandard.Id" />
        <input type="checkbox" class="checker" id="@tvstandard.Name" name="tvList.StandardsList[@i].IsSelected" value="true">
        <label for="@tvstandard.Name">@tvstandard.Name</label>
        
        @{ int j = 0; }
        @foreach (TVSection tvsection in tvstandard.Children) {
            <li>
                <input type="hidden" name="tvList.StandardsList[@i].Children[@j].Id" value="@tvsection.Id" />
                <input type="checkbox" class="checker" id="@tvsection.Name" name="tvList.StandardsList[@i].Children[@j].IsSelected" value="true">
                <label for="@tvsection.Name">@tvsection.Name</label>
                
                <!-- 后续子节点层级以此类推，确保索引在循环外初始化 -->
                j++;
            </li>
        }
        i++;
    </li>
}

方法二：仅提交选中节点的ID集合（更优雅） #

放弃完整绑定树形结构，通过JavaScript收集选中节点的ID，再提交到后端，后端根据ID重新构建选中状态：

1. 给每个复选框添加节点ID的自定义属性：

<input type="checkbox" class="checker" id="@tvstandard.Name" data-node-id="@tvstandard.Id" value="true">

2. 监听表单提交事件，收集选中ID并通过AJAX提交：

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const selectedIds = Array.from(document.querySelectorAll('.checker:checked')).map(cb => cb.dataset.nodeId);
    const formData = new FormData();
    formData.append('Id', document.querySelector('input[name="Id"]').value);
    formData.append('SelectedNodeIds', JSON.stringify(selectedIds));
    
    fetch('/Launch/Home/retrieveSelection', {
        method: 'POST',
        body: formData
    }).then(response => {
        // 处理响应逻辑
    });
});

3. 后端接口接收参数并重构选中状态：

[HttpPost]
public IActionResult retrieveSelection(int Id, string SelectedNodeIds)
{
    List<int> selectedIds = JsonSerializer.Deserialize<List<int>>(SelectedNodeIds);
    // 从数据库获取完整树形结构
    MeasureModel model = GetMeasureModelFromDb(Id);
    // 递归设置选中状态
    SetSelectedStatus(model.tvList, selectedIds);
    // 后续业务逻辑
    return View(model);
}

private void SetSelectedStatus(TVList tvList, List<int> selectedIds)
{
    foreach(var standard in tvList.StandardsList)
    {
        standard.IsSelected = selectedIds.Contains(standard.Id);
        SetSelectedStatusForItem(standard, selectedIds);
    }
}

private void SetSelectedStatusForItem(TVItem item, List<int> selectedIds)
{
    foreach(var child in item.Children)
    {
        child.IsSelected = selectedIds.Contains(child.Id);
        SetSelectedStatusForItem(child, selectedIds);
    }
}

方法三：使用Tag Helper自动生成正确字段 #

ASP.NET Core的asp-for Tag Helper能自动生成正确的name属性（包括集合索引），避免手动编写索引出错：

@{ int i = 0; }
@foreach (TVStandard tvstandard in Model.tvList.StandardsList) {
    <li>
        <span class="caret"></span>
        <input type="hidden" asp-for="@Model.tvList.StandardsList[i].Id" />
        <input type="checkbox" asp-for="@Model.tvList.StandardsList[i].IsSelected" class="checker" id="@tvstandard.Name">
        <label asp-for="@Model.tvList.StandardsList[i].IsSelected">@tvstandard.Name</label>
        
        @{ int j = 0; }
        @foreach (TVSection tvsection in tvstandard.Children) {
            <li>
                <input type="hidden" asp-for="@Model.tvList.StandardsList[i].Children[j].Id" />
                <input type="checkbox" asp-for="@Model.tvList.StandardsList[i].Children[j].IsSelected" class="checker" id="@tvsection.Name">
                <label asp-for="@Model.tvList.StandardsList[i].Children[j].IsSelected">@tvsection.Name</label>
                j++;
            </li>
        }
        i++;
    </li>
}

这种方式能确保name属性的索引和绑定路径完全正确，前提是你的模型成员都是公共属性。

内容的提问来源于stack exchange，提问作者Roger Almirall Jou