
只需为 `readonly` 输入框设置合法的 `name` 属性,它即可正常参与表单提交(无需 `display:none` 或 `visibility:hidden` 的隐藏字段),同时保持禁用编辑、保留样式布局与服务端强类型绑定。
在 ASP.NET Core MVC 或 Razor Pages 中,常遇到这样的需求:某个数值型字段(如 DeliveryCharge)需由前端计算后填入,用户不可手动编辑,但又必须随表单一同提交,且服务端模型绑定要求其为 decimal 类型(而非字符串)。许多开发者误以为 readonly 字段不会被提交,或被迫引入冗余的隐藏字段(如 ),结果引发布局错乱、重复绑定、类型不匹配等问题。
✅ 正确做法是:直接使用带 name 的 readonly 输入框。只要该 具有合法 name 属性(且非 disabled),浏览器就会将其值包含在 FormData 中并提交——readonly 仅阻止用户输入,不影响提交行为。
以下是优化后的 HTML 结构(精简、语义清晰、无冗余元素):
? 关键要点说明:
- readonly + name = 可提交: 会正常提交,ASP.NET Core 模型绑定器能准确将 "12.99" 解析为 decimal,无需额外 hidden 字段;
- 避免 disabled:disabled 字段永远不会提交,即使有 name,这是浏览器规范行为;
- 移除冗余 hidden 输入:你原代码中 不仅占用 DOM 节点、干扰布局,更因 asp-for 生成重复 name(可能引发绑定冲突),且 type="hidden" 在 Razor 中若未显式设 value,可能输出空字符串,导致 decimal? 绑定失败;
-
JavaScript 计算示例:
function calculateDeliveryCharge() { const input = document.getElementById('deliveryChargeInput'); // 示例逻辑:根据其他字段计算(如订单重量、地区等) const computedValue = parseFloat((Math.random() * 50 + 5).toFixed(2)); input.value = computedValue; } - 服务端安全提醒:前端只读/计算仅为用户体验优化,所有关键业务逻辑和校验必须在服务端复核(如验证 DeliveryCharge 是否在合理区间、是否与订单状态匹配等),防止绕过 JS 提交恶意值。
? 额外技巧:若需视觉上“灰化”只读输入框,推荐用 CSS 增强可访问性:
input[readonly] {
background-color: #f5f5f5;
color: #666;
cursor: not-allowed;
}综上,摒弃 display:none/visibility:hidden 隐藏字段的复杂方案,回归语义化 HTML 本质——一个带 name 的 readonly 输入框,即可兼顾可用性、可访问性、可提交性与服务端强类型安全。










