ASP.NET Core 中递归模型的 HTML 表单提交解决方案-html教程-PHP中文网

ASP.NET Core 中递归模型的 HTML 表单提交解决方案

本文介绍如何在 ASP.NET Core 中正确提交含递归结构（如树形 TVItem）的复杂模型，通过 JavaScript 序列化为 JSON 并配合 [FromBody] 绑定实现可靠传输，规避传统表单绑定对嵌套循环引用的限制。

本文介绍如何在 asp.net core 中正确提交含递归结构（如树形 tvitem）的复杂模型，通过 javascript 序列化为 json 并配合 `[frombody]` 绑定实现可靠传输，规避传统表单绑定对嵌套循环引用的限制。

在 ASP.NET Core 中处理深度嵌套、尤其是递归定义的模型（如 TVItem 及其 Parent/Children 关系）时，直接依赖 HTML 表单默认的 application/x-www-form-urlencoded 提交方式会遇到严重限制：MVC 模型绑定器无法解析循环引用（Parent → Children → Parent…），且深层嵌套索引（如 selectionDetails.StandardsList[0].Children[1].Children[2].IsSelected）极易因结构动态变化或缺失中间层级而绑定失败。

因此，推荐采用 “前端结构化采集 + JSON 传输 + 后端强类型反序列化” 的现代方案，既保持类型安全，又完全绕过表单命名规则与绑定器的局限性。

✅ 推荐实践：JavaScript 构建 JSON 对象并 AJAX 提交

首先，在视图中为表单按钮添加事件监听，阻止默认提交，并手动构建符合 TowerMeasureModel 结构的 JavaScript 对象：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

<!-- 在页面底部或 script 标签内 -->
<script>
function buildJSONObjectFromForm() {
    const model = {
        Id: parseInt(document.querySelector('input[name="Id"]').value) || 0,
        Name: document.querySelector('#LaunchName').value || '',
        Tower: '', // 可从隐藏字段或上下文补充
        LaunchDateTime: new Date().toISOString(),
        ScheduledDateTime: new Date().toISOString(),
        EndDateTime: new Date().toISOString(),
        Setup: {}, // 若有具体字段可填充
        selectionDetails: {
            StandardsList: []
        },
        LaunchType: parseInt(document.querySelector('input[name="LaunchType"]:checked').value) || 0,
        Calib_Standard: parseInt(document.querySelector('select[name="Calib_Standard"]').value) || 10,
        Calib_Band: parseInt(document.querySelector('select[name="Calib_Band"]').value) || 12,
        Calib_Setup: parseInt(document.querySelector('select[name="Calib_Setup"]').value) || 14,
        Status: 20 // STATUS_WAITING
    };

    // 遍历所有复选框，还原树形结构（示例仅到三级，实际需按 TVStandard/TVSection/TVModes 层级递归）
    const checkboxes = document.querySelectorAll('.checker:checked');
    checkboxes.forEach(checkbox => {
        const name = checkbox.name;
        // 使用正则提取路径和索引，例如：
        // selectionDetails.StandardsList[0].Children[1].Children[2].IsSelected
        const match = name.match(/selectionDetails\.StandardsList\[(\d+)\]\.Children\[(\d+)\]\.Children\[(\d+)\]\.IsSelected/);
        if (match) {
            const [_, sIdx, secIdx, modeIdx] = match;
            const std = model.selectionDetails.StandardsList[parseInt(sIdx)] || 
                (model.selectionDetails.StandardsList[parseInt(sIdx)] = { Children: [] });
            const sec = std.Children[parseInt(secIdx)] || 
                (std.Children[parseInt(secIdx)] = { Children: [] });
            sec.Children[parseInt(modeIdx)] = { IsSelected: true };
        }
    });

    return model;
}

document.getElementById('myButton').addEventListener('click', function(event) {
    event.preventDefault();

    const model = buildJSONObjectFromForm();
    const token = document.querySelector('input[name="__RequestVerificationToken"]')?.value;

    fetch('/Launch/Home/RetrieveSelection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': token || ''
        },
        body: JSON.stringify(model)
    })
    .then(response => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
    })
    .then(data => {
        alert('提交成功！' + data.message);
    })
    .catch(err => {
        console.error('提交失败:', err);
        alert('提交失败，请检查控制台日志');
    });
}
</script>

? 关键注意事项：

确保视图中已渲染防伪令牌：@Html.AntiForgeryToken() 或 <form></form> 内含 @Html.AntiForgeryToken()；

TVItem 抽象类无法直接反序列化，建议将 selectionDetails 定义为具体可序列化的 DTO 类（如 TVListDto），或在控制器中使用 JsonSerializerOptions.ReferenceHandler = ReferenceHandler.Preserve（.NET 6+）支持引用跟踪（需谨慎启用）；

前端构建 JSON 时，应严格匹配 C# 模型属性名（PascalCase），或配置 JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase 并在 C# 模型上加 [JsonPropertyName("camelCaseName")]；

若树形结构极深或节点极多，建议分页加载或惰性展开，避免一次性提交过大 payload。

✅ 后端控制器：启用 `[FromBody]` 绑定与防伪验证

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult RetrieveSelection([FromBody] TowerMeasureModel model)
{
    if (model == null)
    {
        return BadRequest("模型为空");
    }

    // ✅ 此时 model.selectionDetails 已完整反序列化（前提是前端 JSON 结构正确）
    // 可安全访问：model.selectionDetails.StandardsList[0].Children[1].Children[2].IsSelected

    // 执行业务逻辑：保存至数据库等
    _context.TowerMeasureModels.Add(model);
    _context.SaveChanges();

    return Json(new { success = true, message = "运行配置已成功接收并存储" });
}