ASP.NET Core中Bootstrap日期范围选择器无法绑定模型值求助

我来帮你搞定这个绑定问题，看了你的代码，主要问题出在表单字段命名冲突和模型绑定的参数匹配上，咱们一步步来修正：

1. 修正表单输入框的命名冲突 #

你现在的input标签同时用了asp-for="date"和name="datefilter"，asp-for会自动生成name="date"属性，手动加的name="datefilter"会覆盖它，导致表单提交时，后台模型的date属性找不到对应的值（因为提交的参数名是datefilter而不是date）。

修改页面代码，去掉手动设置的name属性，用asp-for自动生成的命名，同时给input加个类方便jQuery选择：

<div class="form-group">
    <label asp-for="date">Date Range*</label>
    <input type="text" asp-for="date" class="date-range-picker" />
    <div class="invalid-feedback">
        Please Select Date Range.
    </div>
</div>

2. 调整jQuery选择器匹配正确的输入框 #

把jQuery里的选择器改成刚加的类名，确保能正确选中目标输入框：

$(function () {
    $('.date-range-picker').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        }
    });

    $('.date-range-picker').on('apply.daterangepicker', function (ev, picker) {
        // 设置输入框的值为选中的日期范围
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    });

    $('.date-range-picker').on('cancel.daterangepicker', function (ev, picker) {
        $(this).val('');
    });
});

3. 确保模型绑定正常工作 #

你的模型属性public string date { get; set; }现在可以正确接收表单提交的date参数了，因为输入框的name属性已经和模型属性名一致（asp-for="date"会生成name="date"）。

进阶方案：拆分日期到模型的两个属性（如果需要单独处理开始/结束日期） #

如果你的业务逻辑需要分别获取开始和结束日期，而不是一个拼接的字符串，可以添加两个隐藏输入框，分别绑定模型的两个属性：

模型修改：

public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }

页面代码添加隐藏字段：

<div class="form-group">
    <label>Date Range*</label>
    <input type="text" class="date-range-picker" />
    <input type="hidden" asp-for="StartDate" />
    <input type="hidden" asp-for="EndDate" />
    <div class="invalid-feedback">
        Please Select Date Range.
    </div>
</div>

jQuery代码调整：

$(function () {
    $('.date-range-picker').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        }
    });

    $('.date-range-picker').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        // 给隐藏字段赋值，绑定到模型的两个属性
        $('input[name="StartDate"]').val(picker.startDate.format('YYYY-MM-DD'));
        $('input[name="EndDate"]').val(picker.endDate.format('YYYY-MM-DD'));
    });

    $('.date-range-picker').on('cancel.daterangepicker', function (ev, picker) {
        $(this).val('');
        $('input[name="StartDate"]').val('');
        $('input[name="EndDate"]').val('');
    });
});

这样后台就能直接拿到StartDate和EndDate两个DateTime类型的属性，处理起来更方便。

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