本文详解为何 display: none 和 visibility: hidden 不适用于表单提交场景，并提供专业、简洁的解决方案：直接为 readonly 输入框设置合法 name 属性，确保其值随表单一同提交，同时避免冗余隐藏字段与类型绑定问题。
本文详解为何 `display: none` 和 `visibility: hidden` 不适用于表单提交场景，并提供专业、简洁的解决方案：直接为 `readonly` 输入框设置合法 `name` 属性，确保其值随表单一同提交，同时避免冗余隐藏字段与类型绑定问题。
在 ASP.NET Core MVC（或任何基于标准 HTML 表单的后端框架）中，一个常见误区是认为 readonly 或 disabled 的 元素无法参与表单提交。实际上，readonly 元素只要具备有效的 name 属性，就会被包含在提交数据中；而 disabled 元素则会被浏览器主动忽略，无论是否可见。
你原代码中试图用 visibility: hidden + 隐藏输入框来“绕过”提交限制，不仅增加了 DOM 复杂度，还引发了两个关键问题：
- visibility: hidden 仍占用布局空间，破坏 UI 美观与响应式结构；
- 额外的隐藏 会与主输入产生模型绑定冲突（尤其当类型为 decimal 时），ASP.NET 可能因重复绑定或类型不匹配导致模型验证失败或值丢失。
✅ 正确做法是：移除所有隐藏字段，仅保留一个语义清晰、可提交的 readonly 输入框，并确保其拥有 name 属性（由 asp-for 自动生成，但需确认未被覆盖）。
以下是优化后的 HTML 结构（兼容 ASP.NET Core Tag Helpers）：
<div>
<label asp-for="DeliveryCharge" class="w-100">Delivery Charge:</label>
<div style="display: flex; gap: 8px;">
<input readonly asp-for="DeliveryCharge" type="number" step="0.01" class="form-control flex-grow-1" id="deliveryChargeInput"><button type="button" class="btn btn-sm btn-outline-secondary" onclick="calculateDeliveryCharge()">
Compute
</button>
</div>
<span asp-validation-for="DeliveryCharge" class="text-danger" id="deliveryChargeDanger"></span>
</div>
对应 JavaScript（推荐使用事件委托，提升可维护性）：
function calculateDeliveryCharge() {
const input = document.getElementById('deliveryChargeInput');
// 示例计算逻辑（请替换为实际业务逻辑）
const computedValue = parseFloat((Math.random() * 25 + 5).toFixed(2)); // e.g., 12.45
input.value = computedValue;
}
// 可选：验证提交时是否携带该字段（调试用）
document.querySelector('form').addEventListener('submit', function(e) {
const formData = new FormData(this);
console.log('Submitted DeliveryCharge:', formData.get('DeliveryCharge')); // ✅ 正确输出 decimal 值
});
? 关键注意事项：
- ✅ readonly + name = 可提交、不可编辑、类型安全（ASP.NET 能正确绑定到 decimal 模型属性）；
- ❌ disabled → 永远不会提交，即使有 name；
- ❌ display: none / visibility: hidden 用于隐藏字段 → 不解决根本问题，且易引发样式/可访问性/维护性问题；
- ⚠️ 不要手动添加第二个 asp-for="DeliveryCharge" 的 （如 hidden 类型），会导致模型绑定歧义，MVC 可能将字符串 "0" 或空值绑定到 decimal? 属性，触发 ModelState.IsValid == false；
- ✅ 推荐为按钮添加 name 属性（如 name="computeDelivery"）便于后端区分操作意图（非必需，但利于扩展）。
总结：表单设计应遵循“单一数据源”原则。DeliveryCharge 的唯一可信来源就是那个 readonly 输入框——它既是用户界面元素，也是数据载体。通过合理利用 HTML 原生行为（readonly 提交 + name 驱动模型绑定），即可彻底规避隐藏字段陷阱，写出更健壮、更易测试、更符合 Web 标准的代码。
