daterangepicker日期传递控制器异常及视图不更新问题求助

问题根源分析 #

1. 首次加载显示0001-01-01：控制器的DateTime参数未设置默认值，首次GET请求无参数传入时，会自动使用DateTime.MinValue（即0001年1月1日）。
2. 视图不更新：AJAX请求成功后仅调用了控制器Action，但未将返回的视图内容替换到页面中，页面仍保留初始渲染的内容。

分步修复方案 #

1. 修复首次加载默认日期问题 #

修改控制器代码，给参数设置可空类型并添加默认日期逻辑：

public IActionResult Index(DateTime? FromDate, DateTime? ToDate)
{
    // 设置默认日期范围：最近30天
    var defaultStart = DateTime.Now.AddDays(-29);
    var defaultEnd = DateTime.Now;

    // 若未传参则使用默认值
    var fromDate = FromDate ?? defaultStart;
    var toDate = ToDate ?? defaultEnd;

    ViewBag.FromDate = fromDate;
    ViewBag.ToDate = toDate;

    // 在此添加你的数据筛选逻辑
    // var filteredData = _dataService.GetFilteredData(fromDate, toDate);
    // ViewBag.FilteredData = filteredData;

    return View();
}

2. 修复视图不更新问题 #

给视图中需要更新的内容添加容器，AJAX成功后替换容器内容：

视图代码修改

<!-- 添加容器包裹需要更新的内容 -->
<div id="dashboardContent">
    <h3 class="mt-3 mb-3">@ViewBag.FromDate.ToString("MMMM d, yyyy") - @ViewBag.ToDate.ToString("MMMM d, yyyy")</h3>
    <!-- 其他需要更新的组件（如筛选后的数据表格）放在这里 -->
</div>

<div id="DashboardDate">
    <span></span>
</div>

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb(start, end) {
                $('#DashboardDate span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                
                $.ajax({
                    type: "GET",
                    url: '@Url.Action("Index", "Dashboard")',
                    data: {
                        FromDate: start.format('YYYY-MM-DD'),
                        ToDate: end.format('YYYY-MM-DD')
                    },
                    // GET请求无需设置contentType为application/json
                    success: function (data) {
                        // 用返回的视图内容替换页面容器
                        $('#dashboardContent').html(data);
                        console.log('Dates sent to controller successfully.');
                    },
                    error: function (error) {
                        console.error('Error sending dates to controller:', error);
                    }
                });
            }

            $('#DashboardDate').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            }, cb);

            cb(start, end);
        });
    </script>
}

3. 更高效的优化方案（可选） #

如果仅需更新日期和筛选数据，可让控制器返回JSON数据而非整个视图，减少请求体积：

新增控制器Action

public IActionResult GetFilteredDateData(DateTime? FromDate, DateTime? ToDate)
{
    var defaultStart = DateTime.Now.AddDays(-29);
    var defaultEnd = DateTime.Now;

    var fromDate = FromDate ?? defaultStart;
    var toDate = ToDate ?? defaultEnd;

    // 执行数据筛选逻辑
    // var filteredData = _dataService.GetFilteredData(fromDate, toDate);

    return Json(new {
        FromDateStr = fromDate.ToString("MMMM d, yyyy"),
        ToDateStr = toDate.ToString("MMMM d, yyyy"),
        // FilteredData = filteredData
    });
}

前端AJAX修改

$.ajax({
    type: "GET",
    url: '@Url.Action("GetFilteredDateData", "Dashboard")',
    data: {
        FromDate: start.format('YYYY-MM-DD'),
        ToDate: end.format('YYYY-MM-DD')
    },
    success: function (response) {
        // 直接更新日期显示
        $('h3.mt-3.mb-3').text(response.FromDateStr + ' - ' + response.ToDateStr);
        // 若有筛选数据，自行渲染组件
        // renderFilteredData(response.FilteredData);
        console.log('Dates sent to controller successfully.');
    },
    error: function (error) {
        console.error('Error sending dates to controller:', error);
    }
});

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