ASP.NET Core中JQuery清空StartDate后asp-for绑定值不同步问题

问题现象 #

关闭"No Start Date"复选框时，前端通过JQuery清空了input-sdate输入框，但提交表单后，后端C#模型TicketDetails.StartDate并未变为null，仍保留旧值。仅清空日期场景下，前端输入框与asp-for绑定值不同步。

问题原因 #

1. 禁用的表单元素不提交：输入框被设置为disabled时，浏览器不会将该字段的值提交到服务器，后端因此接收不到空值，只能保留之前的绑定值。
2. 值更新方式错误：使用attr('value', '')无法正确更新输入框的当前值，应该用val('')修改输入框的实际用户输入值。

解决方案 #

方案1：移除禁用，改为清空+只读（推荐） #

调整JQuery逻辑，不禁用输入框，而是清空值并设置为只读，确保表单能提交空值，后端模型绑定自动转换为null：

修改后的JQuery代码：

$('#chk-sdate').on('change', function () {
    const $dateInput = $('#input-sdate');
    if ($(this).prop('checked')) {
        $dateInput.prop('readonly', false);
        // 可选：如需恢复默认日期，可在此设置val(格式化后的默认日期值)
    } else {
        $dateInput.val('').prop('readonly', true);
    }
});

方案2：保留禁用，添加隐藏字段 #

如果必须禁用输入框，需添加一个与StartDate同名的隐藏字段，负责传递空值到后端：

首先在CSHTML中添加隐藏字段：

<div class="col-8">
    <input type="text" class="form-control datepick" id="input-sdate" asp-for="TicketDetails.StartDate" />
    <input type="hidden" asp-for="TicketDetails.StartDate" id="hidden-sdate" />
</div>

然后修改JQuery代码：

$('#chk-sdate').on('change', function () {
    const $dateInput = $('#input-sdate');
    const $hiddenInput = $('#hidden-sdate');
    if ($(this).prop('checked')) {
        $dateInput.prop('disabled', false);
        $hiddenInput.val($dateInput.val()); // 同步显示输入框的值到隐藏字段
    } else {
        $dateInput.val('').prop('disabled', true);
        $hiddenInput.val(''); // 设置隐藏字段为空，提交时传递给后端
    }
});

额外优化 #

CSHTML中的复选框无需手动设置checked属性，asp-for会根据Model的NoStartDate值自动生成该属性，可简化为：

<input type="checkbox" class="custom-control-input" id="chk-sdate" asp-for="TicketDetails.NoStartDate" />

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