如何在ASP.Net Core MVC中不重载整页仅刷新指定Div

1. 提取日期显示为局部视图 #

把需要刷新的日期区域单独做成局部视图，比如创建_DateDisplay.cshtml：

<div id="dateContainer">
    <p>当前选择的日期：@Model.SelectedDate.ToString("yyyy-MM-dd")</p>
</div>

配套的视图模型：

public class DateViewModel
{
    public DateTime SelectedDate { get; set; } = DateTime.Now;
}

2. 控制器添加局部视图返回Action #

在对应控制器中编写处理请求并返回局部视图的方法：

public IActionResult RefreshDate(DateTime? newDate)
{
    var model = new DateViewModel();
    if (newDate.HasValue)
    {
        model.SelectedDate = newDate.Value;
    }
    return PartialView("_DateDisplay", model);
}

3. 主视图整合局部视图与AJAX逻辑 #

主视图中先引入局部视图，再添加日期输入控件和刷新按钮，用AJAX实现无刷新更新：

<!-- 引入局部视图 -->
<div id="dateContainer">
    @await Html.PartialAsync("_DateDisplay", new DateViewModel())
</div>

<!-- 日期输入与刷新按钮 -->
<input type="date" id="newDateInput" />
<button id="refreshDateBtn">刷新日期</button>

<!-- AJAX逻辑 -->
<script>
    $(document).ready(function() {
        $("#refreshDateBtn").click(function() {
            var selectedDate = $("#newDateInput").val();
            $.ajax({
                url: '@Url.Action("RefreshDate", "Home")', // 替换为你的控制器名称
                type: 'GET',
                data: { newDate: selectedDate },
                success: function(result) {
                    $("#dateContainer").html(result);
                }
            });
        });
    });
</script>

4. 关键注意点 #

• 确保页面已引入jQuery，可在_Layout.cshtml中通过CDN或本地文件添加引用
• 注意日期参数的格式匹配，避免后端解析出错
• 若需使用POST请求，将AJAX的type改为POST，并给Action添加[HttpPost]特性

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