ASP.NET Core 1.1 MVC视图无法刷新问题求助

看起来你已经搞定了后端的排序逻辑，但前端没跟上——你的$.post只是把请求发出去了，却没处理服务器返回的新视图内容，所以页面还停留在旧数据上。下面给你一步步的解决方案：

第一步：给网格区域加个容器标记 #

先把你循环生成的网格包在一个带ID的div里，这样我们后面能精准替换内容：

<!-- 新增容器，方便后续替换 -->
<div id="projectsGridContainer">
    @foreach (var eachItem in Model.PageProjects) { 
    <div class="media-body no-right"> 
    <div class="media-left"> #@eachItem.ProjectNumber 
    <h4 class="media-heading"><a href="">@eachItem.ProjectName</a></h4> 
    </div> 
    <div class="media-left"> 
    <h4 class="media-heading"><span class="label label-default">Stage @eachItem.Stage</span></h4> 
    </div> 
    <div class="media-left"> 
    <h4 class="media-heading">@eachItem.PmUsername</h4> 
    <span class="text-uppercase">project manager</span> 
    </div> 
    <div class="media-left"> 
    <h4 class="media-heading">@eachItem.LastUpdatedOn</h4> 
    <span class="text-uppercase">last updated</span> 
    </div> 
    </div> 
    }
</div>

第二步：修改jQuery的Post请求，处理响应 #

更新你的AJAX代码，在请求成功后把服务器返回的新HTML替换掉容器里的旧内容：

$("#StageDropDown").on("change", function () { 
    $.post("/Projects/Index", { 
        sortOrder: $('#StageDropDown :selected').val(), 
        CurrentSort: $('#currentStageSortOrder').val() 
    }, function(responseHtml) {
        // 把服务器返回的新网格HTML替换到容器里
        $("#projectsGridContainer").html(responseHtml);
    }); 
});

第三步：优化后端Action，返回部分视图（可选但推荐） #

为了避免返回整个页面的HTML（只需要网格部分），可以把网格单独抽成部分视图，让AJAX请求只返回需要刷新的内容：

1. 创建一个名为_ProjectsGridPartial.cshtml的部分视图，把之前循环生成网格的代码移进去：

@model IEnumerable<你的项目实体类型>
@foreach (var eachItem in Model) { 
<div class="media-body no-right"> 
<div class="media-left"> #@eachItem.ProjectNumber 
<h4 class="media-heading"><a href="">@eachItem.ProjectName</a></h4> 
</div> 
<div class="media-left"> 
<h4 class="media-heading"><span class="label label-default">Stage @eachItem.Stage</span></h4> 
</div> 
<div class="media-left"> 
<h4 class="media-heading">@eachItem.PmUsername</h4> 
<span class="text-uppercase">project manager</span> 
</div> 
<div class="media-left"> 
<h4 class="media-heading">@eachItem.LastUpdatedOn</h4> 
<span class="text-uppercase">last updated</span> 
</div> 
</div> 
}

2. 修改主视图里的网格部分，引用这个部分视图：

<div id="projectsGridContainer">
    @Html.Partial("_ProjectsGridPartial", Model.PageProjects)
</div>

3. 更新你的Action方法，判断是AJAX请求时返回部分视图：

public IActionResult Index(string sortOrder, string CurrentSort)
{
    // 你的排序逻辑，生成排序后的PageProjects数据
    var model = // 处理好的视图模型

    // 检查是否是AJAX请求（ASP.NET Core 1.1需要手动判断请求头）
    bool isAjax = Request.Headers["X-Requested-With"] == "XMLHttpRequest";
    if (isAjax)
    {
        // 只返回网格部分视图
        return PartialView("_ProjectsGridPartial", model.PageProjects);
    }
    // 非AJAX请求返回完整视图
    return View(model);
}

额外注意点 #

• 确认#currentStageSortOrder这个元素存在且值正确，否则排序的参数传递会出问题。
• 如果不想用部分视图，也可以让Action返回完整视图，然后在前端用$("#projectsGridContainer").html($(responseHtml).find("#projectsGridContainer").html())提取网格部分内容替换，但部分视图的方式更高效。

这样修改后，当你选择下拉框时，AJAX会请求到排序后的网格HTML，然后自动替换页面上的旧内容，视图就会刷新显示新的排序结果了。

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