本文介绍如何在 ASP.NET Core 中正确提交包含递归结构（如树形 TVItem 层级）的复杂模型 TowerMeasureModel，解决传统表单绑定失败问题，推荐采用 JavaScript 序列化 + JSON API 方式实现可靠双向数据传递。
本文介绍如何在 asp.net core 中正确提交包含递归结构（如树形 `tvitem` 层级）的复杂模型 `towermeasuremodel`，解决传统表单绑定失败问题，推荐采用 javascript 序列化 + json api 方式实现可靠双向数据传递。
在 ASP.NET Core 中，标准的 Model Binding 机制对深度嵌套、尤其是存在循环引用或抽象基类（如 TVItem 及其 Parent/Children 递归关系）的模型支持有限。直接使用 <input name="selectionDetails.StandardsList[0].Children[1].IsSelected"> 这类扁平化命名方式虽可绑定简单层级，但难以准确还原递归树结构，且易因索引错位、空集合或类型不匹配导致绑定失败或数据丢失。
✅ 推荐方案：前端序列化 + 后端 [FromBody] 接收 JSON
绕过 MVC 默认表单绑定限制，改用 JavaScript 动态构建完整对象树并以 JSON 提交，服务端直接反序列化为强类型模型。
步骤一：增强前端数据采集逻辑
为适配 TVItem 的递归结构，需编写递归遍历函数，从 DOM 中提取所有复选框状态及节点元数据：
function buildJSONObjectFromForm() {
const model = {
Id: parseInt(document.querySelector('input[name="Id"]').value) || 0,
Name: document.querySelector('input[name="LaunchName"]').value || "",
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, // default STATUS_WAITING
selectionDetails: { StandardsList: [] }
};
// 递归构建 TVStandard → TVSection → TVMode → TVFreq 树结构
const standardsList = document.querySelectorAll('ul > li');
standardsList.forEach((li, idx) => {
const standard = li.querySelector('input[type="checkbox"]');
if (!standard) return;
const tvStandard = {
folderName: li.querySelector('input[name^="selectionDetails.StandardsList[' + idx + '].folderName"]')?.value || "",
Name: standard.id,
IsSelected: standard.checked,
Children: []
};
const sections = li.querySelectorAll('.nested > li');
sections.forEach((secLi, secIdx) => {
const section = secLi.querySelector('input[type="checkbox"]');
if (!section) return;
const tvSection = {
scriptName: secLi.querySelector('input[name^="selectionDetails.StandardsList[' + idx + '].Children[' + secIdx + '].scriptName"]')?.value || "",
Name: section.id,
IsSelected: section.checked,
Children: []
};
const modes = secLi.querySelectorAll('.nested > li');
modes.forEach((modeLi, modeIdx) => {
const mode = modeLi.querySelector('input[type="checkbox"]');
if (!mode) return;
const tvMode = {
Name: mode.id,
IsSelected: mode.checked,
Children: []
};
const freqs = modeLi.querySelectorAll('.nested > li');
freqs.forEach((freqLi, freqIdx) => {
const freq = freqLi.querySelector('input[type="checkbox"]');
if (!freq) return;
const tvFreq = {
ID: freqLi.querySelector('input[name^="selectionDetails.StandardsList[' + idx + '].Children[' + secIdx + '].Children[' + modeIdx + '].Children[' + freqIdx + '].ID"]')?.value || "",
Name: freq.id,
IsSelected: freq.checked
};
tvMode.Children.push(tvFreq);
});
tvSection.Children.push(tvMode);
});
tvStandard.Children.push(tvSection);
});
model.selectionDetails.StandardsList.push(tvStandard);
});
return model;
}
步骤二：配置控制器接收 JSON 请求
确保控制器方法启用 Anti-Forgery Token 验证，并明确指定 [FromBody]：
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult RetrieveSelection([FromBody] TowerMeasureModel model)
{
if (!ModelState.IsValid)
{
return BadRequest(new { success = false, errors = ModelState.Values.SelectMany(v => v.Errors) });
}
// ✅ 此时 model.selectionDetails.StandardsList 已完整还原为递归树结构
// 可安全调用 SaveChangesAsync 或其他业务逻辑
_context.TowerMeasureModels.Add(model);
await _context.SaveChangesAsync();
return Json(new { success = true, message = "Run submitted successfully", id = model.Id });
}
⚠️ 关键注意事项
- 前端必须发送
Content-Type: application/json头，否则[FromBody]绑定将失败；- 若页面启用了
@Html.AntiForgeryToken()，务必在请求头中携带RequestVerificationToken（示例已体现）；- 确保
TVItem子类（如TVStandard,TVSection等）具有无参构造函数，且Children属性初始化为new List<tvitem>()</tvitem>，否则 JSON 反序列化会抛出异常；- 对于超大层级树（>1000 节点），建议添加节流或分页加载策略，避免客户端内存溢出。
该方案彻底规避了 ASP.NET Core 表单绑定对递归模型的局限性，兼顾类型安全、可维护性与调试便利性，是处理复杂领域模型提交的工业级实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
