只需为 `readonly` 输入框设置合法的 `name` 属性，它即可正常参与表单提交（无需 `display:none` 或 `visibility:hidden` 的隐藏字段），同时保持禁用编辑、保留样式布局与服务端强类型绑定。
在 ASP.NET Core MVC 或 Razor Pages 中，常遇到这样的需求：某个数值型字段（如 DeliveryCharge）需由前端计算后填入，用户不可手动编辑，但又必须随表单一同提交，且服务端模型绑定要求其为 decimal 类型（而非字符串）。许多开发者误以为 readonly 字段不会被提交，或被迫引入冗余的隐藏字段（如 ），结果引发布局错乱、重复绑定、类型不匹配等问题。
✅ 正确做法是：直接使用带 name 的 readonly 输入框。只要该 具有合法 name 属性（且非 disabled），浏览器就会将其值包含在 FormData 中并提交——readonly 仅阻止用户输入，不影响提交行为。
以下是优化后的 HTML 结构（精简、语义清晰、无冗余元素）：
<form asp-action="YourAction" method="post" name="deliveryForm">
<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"
style="flex-grow: 1;"
name="DeliveryCharge"
id="deliveryChargeInput" />
<button
type="button"
onclick="calculateDeliveryCharge()">
Compute
</button>
</div>
<span asp-validation-for="DeliveryCharge" class="text-danger" id="deliveryChargeDanger"></span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>? 关键要点说明：
- 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 输入框，即可兼顾可用性、可访问性、可提交性与服务端强类型安全。
