ASP.Net MVC中JS修改ViewModel字段值后提交为空问题

问题出在你给NumberOfWeeks输入框加了disabled属性——浏览器不会提交带有disabled属性的表单元素的值，所以就算前端用JS赋值显示正常，后端接收时该字段就是null。

解决方法 #

方法一：用readonly替代disabled #

把input的disabled换成readonly，readonly元素用户无法编辑，但会被表单提交：

@model Project.Lib.ViewModels.Campaigns.CampaignViewModel

<form asp-controller="Campaigns" asp-action="Create" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="needs-validation" role="form" novalidate>
    <input asp-for="NumberOfWeeks" class="form-control" id="weeks" readonly>
    <!-- 其他表单元素 -->
    <input type="submit" class="btn btn-primary me-1" value="Save Campaign"/>
</form>

方法二：保留disabled，添加隐藏字段 #

如果必须保留disabled的视觉效果（比如灰色不可编辑样式），可以在页面添加一个和NumberOfWeeks绑定的隐藏input，JS计算后同时给显示用的disabled输入框和隐藏字段赋值：

前端表单修改：

@model Project.Lib.ViewModels.Campaigns.CampaignViewModel

<form asp-controller="Campaigns" asp-action="Create" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="needs-validation" role="form" novalidate>
    <input asp-for="NumberOfWeeks" class="form-control" id="weeks" disabled>
    <input type="hidden" asp-for="NumberOfWeeks" id="hiddenWeeks">
    <!-- 其他表单元素 -->
    <input type="submit" class="btn btn-primary me-1" value="Save Campaign"/>
</form>

JS代码修改：

function checkDates () {
    const startDate = document.getElementById('startDate').value
    const endDate = document.getElementById('endDate').value
    const weeksValue = weeksBetween(new Date(startDate), new Date(endDate))
    // 同时给显示框和隐藏字段赋值
    document.getElementById('weeks').value = weeksValue
    document.getElementById('hiddenWeeks').value = weeksValue
}

内容的提问来源于stack exchange，提问作者Jesus