使用 readonly 属性而非 display: none 或 visibility: hidden，可确保输入字段既不可编辑、又参与表单提交，同时避免隐藏域类型不匹配等绑定问题。
使用 `readonly` 属性而非 `display: none` 或 `visibility: hidden`，可确保输入字段既不可编辑、又参与表单提交，同时避免隐藏域类型不匹配等绑定问题。
在 ASP.NET MVC 或 Razor Pages 开发中，常需实现一个“仅显示、不可手动编辑但需随表单提交”的数值字段（如 DeliveryCharge）。开发者容易陷入误区：为规避 disabled 字段不提交的问题，转而尝试 display: none + 隐藏同名字段，或滥用 visibility: hidden 导致布局异常，甚至误用 引发模型绑定失败（如 decimal 类型被绑定为字符串）。
根本解法：信任 readonly —— 它完美兼顾语义、功能与兼容性
readonly 属性具有三大关键特性：
- ✅ 用户无法修改内容（满足“灰显不可输入”需求）；
- ✅ 表单提交时正常包含该字段的值（无需额外隐藏域）；
- ✅ 服务端模型绑定完全正常（asp-for="DeliveryCharge" 仍映射到 decimal 属性）。
以下为推荐实现方案（精简、健壮、无冗余）：
<div>
<label asp-for="DeliveryCharge" class="w-100">DeliveryCharge:</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-outline-secondary"
onclick="calculateDeliveryCharge()">
Compute
</button>
</div>
<span asp-validation-for="DeliveryCharge" class="text-danger" id="deliveryChargeDanger"></span>
</div>对应 JavaScript（推荐使用事件委托，避免内联 onclick）：
function calculateDeliveryCharge() {
const input = document.getElementById('deliveryChargeInput');
// 示例：实际逻辑应调用 API 或业务计算
const computedValue = parseFloat((Math.random() * 50 + 5).toFixed(2)); // 模拟计算结果
input.value = computedValue;
}
// 可选：增强表单验证感知（如清空错误提示）
document.getElementById('deliveryChargeInput').addEventListener('input', () => {
document.getElementById('deliveryChargeDanger').textContent = '';
});关键注意事项：
- ❌ 禁止移除 asp-for="DeliveryCharge" 或为其添加 name 属性——Razor Tag Helper 已自动生成正确 name（如 DeliveryCharge），这是模型绑定的基石；
- ✅ readonly 字段默认会提交，无需 或双字段冗余设计；
- ⚠️ 若需视觉上“灰显”，建议通过 CSS 控制（如 background-color: #f5f5f5; opacity: 0.8;），而非依赖 disabled（会阻断提交）；
- ? 后端仍需校验 DeliveryCharge 的合法性（前端只读 ≠ 服务端可信），防止绕过 JS 直接篡改 DOM 提交非法值。
综上，摒弃隐藏域、display: none 和类型错配的 type="hidden"，回归 readonly 这一语义清晰、标准兼容、服务端友好的原生方案，是解决此类场景最专业、可持续的实践路径。
