如何通过按钮点击修改ASP.NET MVC控制器的日期变量？

第一步：修改控制器接收日期参数 #

先调整Cabins控制器的Index方法，让它支持传入可选的StartDate和EndDate参数，默认值保留原有逻辑：

public ActionResult Index(DateTime? startDate, DateTime? endDate)
{
    // 未传参数时，使用默认的当前日期+20天
    var currentStart = startDate ?? DateTime.Now;
    var currentEnd = endDate ?? currentStart.AddDays(20);
    
    // 根据日期范围获取预订数据（替换成你实际的数据查询逻辑）
    var cabins = yourDbContext.Cabins
        .Where(c => c.BookingDate >= currentStart && c.BookingDate <= currentEnd)
        .ToList();
    
    // 将日期回传给视图，用于显示和后续切换
    ViewBag.StartDate = currentStart;
    ViewBag.EndDate = currentEnd;
    
    return View(cabins);
}

第二步：视图实现日期切换功能 #

给你两种简单可行的方案，按需选择：

方案1：表单提交（无JS，适合新手） #

用HTML表单提交参数，页面整体刷新，逻辑简单直接：

<!-- 显示当前日期范围 -->
<p>当前查看：@ViewBag.StartDate.ToString("yyyy-MM-dd") 至 @ViewBag.EndDate.ToString("yyyy-MM-dd")</p>

<!-- 自定义日期选择表单 -->
@using (Html.BeginForm("Index", "Cabins", FormMethod.Get))
{
    <label>起始日期：</label>
    <input type="date" name="startDate" value="@ViewBag.StartDate.ToString("yyyy-MM-dd")" required />
    <label>结束日期：</label>
    <input type="date" name="endDate" value="@ViewBag.EndDate.ToString("yyyy-MM-dd")" required />
    <button type="submit">查看</button>
}

<!-- 快速切换按钮：前20天/后20天 -->
@using (Html.BeginForm("Index", "Cabins", FormMethod.Get))
{
    <input type="hidden" name="startDate" value="@ViewBag.StartDate.AddDays(-20).ToString("yyyy-MM-dd")" />
    <input type="hidden" name="endDate" value="@ViewBag.StartDate.ToString("yyyy-MM-dd")" />
    <button type="submit">查看前20天</button>
}

@using (Html.BeginForm("Index", "Cabins", FormMethod.Get))
{
    <input type="hidden" name="startDate" value="@ViewBag.EndDate.ToString("yyyy-MM-dd")" />
    <input type="hidden" name="endDate" value="@ViewBag.EndDate.AddDays(20).ToString("yyyy-MM-dd")" />
    <button type="submit">查看后20天</button>
}

<!-- 预订信息列表 -->
<div>
    @foreach (var cabin in Model)
    {
        <div>@cabin.CabinName - 预订日期：@cabin.BookingDate.ToString("yyyy-MM-dd")</div>
    }
</div>

方案2：AJAX局部刷新（无页面重载） #

如果不想刷新整个页面，用jQuery实现局部更新，体验更流畅：

1. 创建局部视图_CabinsList.cshtml

把预订列表单独抽离出来：

@model List<Cabin> <!-- 替换成你的预订模型类型 -->
@foreach (var cabin in Model)
{
    <div>@cabin.CabinName - 预订日期：@cabin.BookingDate.ToString("yyyy-MM-dd")</div>
}

2. 修改主视图Index.cshtml

<!-- 显示当前日期范围 -->
<p id="dateRange">当前查看：@ViewBag.StartDate.ToString("yyyy-MM-dd") 至 @ViewBag.EndDate.ToString("yyyy-MM-dd")</p>

<!-- 自定义日期选择 -->
<label>起始日期：</label>
<input type="date" id="startDate" value="@ViewBag.StartDate.ToString("yyyy-MM-dd")" />
<label>结束日期：</label>
<input type="date" id="endDate" value="@ViewBag.EndDate.ToString("yyyy-MM-dd")" />
<button id="customBtn">查看</button>

<!-- 快速切换按钮 -->
<button id="prevBtn">查看前20天</button>
<button id="nextBtn">查看后20天</button>

<!-- 预订列表容器 -->
<div id="cabinsContainer">
    @Html.Partial("_CabinsList", Model)
</div>

<!-- 引入jQuery（确保项目中存在对应JS文件） -->
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script>
    // 自定义日期查询
    $("#customBtn").click(function() {
        var start = $("#startDate").val();
        var end = $("#endDate").val();
        updateCabins(start, end);
    });

    // 切换到前20天
    $("#prevBtn").click(function() {
        var currentStart = new Date("@ViewBag.StartDate.ToString("yyyy-MM-dd")");
        var newStart = new Date(currentStart.setDate(currentStart.getDate() - 20));
        var newEnd = "@ViewBag.StartDate.ToString("yyyy-MM-dd")";
        updateCabins(newStart.toISOString().split('T')[0], newEnd);
    });

    // 切换到后20天
    $("#nextBtn").click(function() {
        var currentEnd = new Date("@ViewBag.EndDate.ToString("yyyy-MM-dd")");
        var newStart = "@ViewBag.EndDate.ToString("yyyy-MM-dd")";
        var newEnd = new Date(currentEnd.setDate(currentEnd.getDate() + 20));
        updateCabins(newStart, newEnd.toISOString().split('T')[0]);
    });

    // 通用更新列表方法
    function updateCabins(start, end) {
        $.ajax({
            url: "@Url.Action("GetCabinsByDate", "Cabins")",
            type: "GET",
            data: { startDate: start, endDate: end },
            success: function(html) {
                $("#cabinsContainer").html(html);
                $("#dateRange").text("当前查看：" + start + " 至 " + end);
            }
        });
    }
</script>

3. 控制器新增Action返回局部视图

public ActionResult GetCabinsByDate(DateTime? startDate, DateTime? endDate)
{
    var currentStart = startDate ?? DateTime.Now;
    var currentEnd = endDate ?? currentStart.AddDays(20);
    
    var cabins = yourDbContext.Cabins
        .Where(c => c.BookingDate >= currentStart && c.BookingDate <= currentEnd)
        .ToList();
    
    return PartialView("_CabinsList", cabins);
}

常见问题排查 #

• 参数名要和控制器定义的一致（比如控制器用startDate，视图里别写成StartDate，虽然MVC大小写不敏感，但尽量统一避免问题）
• 日期格式必须用yyyy-MM-dd，这是HTML日期输入框的标准格式，能确保正确转换为DateTime类型
• 如果用表单提交，优先用GET方法（除非控制器标记[HttpPost]），符合查询场景的语义

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