如何通过AJAX重新渲染同模型的Partial视图？

首先，你的需求完全可以实现，核心思路是让控制器返回渲染好的Partial视图HTML，再通过AJAX替换页面上的对应容器内容。下面分步骤给你讲清楚，还有几个更优的方案供你选择。

一、核心实现步骤 #

1. 修改控制器Action，返回PartialView #

首先，你的FilterPerson Action需要返回Partial视图而不是普通视图，这样它会直接渲染Partial的HTML内容，而不是带布局的完整页面。示例代码：

[HttpPost]
public ActionResult FilterPerson(int startYear, int endYear)
{
    // 1. 根据传入的年份筛选数据，填充你的模型（这里替换成你的业务逻辑）
    var filteredModel = _yourDataService.GetPersonsByYearRange(startYear, endYear);
    
    // 2. 返回指定的Partial视图，并传入填充好的模型
    // 注意：第一个参数是你的Partial视图名称，要和@Html.Partial里的一致
    return PartialView("YourPartialViewName", filteredModel);
}

2. 给Partial视图添加容器 #

父页面中，你需要把@Html.Partial放在一个有ID的容器里，这样AJAX成功后才能精准替换内容：

<!-- 父页面中的Partial容器 -->
<div id="partialViewContainer">
    @Html.Partial("YourPartialViewName", Model)
</div>

3. 完善AJAX的Success回调 #

现在修改你的JS代码，在success函数里用返回的HTML替换容器内容，同时可以加上基础的前端验证：

$("#searchSubmitButton").on("click", function () {
    var sYear = $("#startPnr").val();
    var eYear = $("#endPnr").val();

    // 前端基础验证：确保年份是有效数字且不为空
    if (!sYear || !eYear || isNaN(parseInt(sYear)) || isNaN(parseInt(eYear))) {
        alert("请输入有效的年份数字！");
        return; // 验证不通过就停止请求
    }

    $.ajax({
        url: '@Url.Action("FilterPerson", "Kostnadsstalle")',
        data: { startYear: parseInt(sYear), endYear: parseInt(eYear) },
        error: function () { console.log("Error, Ajax Error.") },
        type: "POST",
        success: function (data) {
            // 用返回的Partial HTML替换容器内容
            $('#partialViewContainer').html(data);
        }
    });
});

二、更优方案推荐 #

方案1：使用Ajax.BeginForm简化代码 #

ASP.NET MVC内置了Ajax辅助类，可以帮你省去手动写AJAX的麻烦，代码更简洁易维护：

首先确保你的页面引用了jquery.unobtrusive-ajax.js（MVC项目通常默认包含，若没有可以从NuGet安装）。

然后父页面中替换成Ajax.BeginForm：

@using (Ajax.BeginForm("FilterPerson", "Kostnadsstalle", new AjaxOptions {
    HttpMethod = "POST",
    UpdateTargetId = "partialViewContainer", // 要更新的容器ID
    OnSuccess = "filterSuccessCallback",     // 可选：成功后的回调函数
    OnFailure = "filterFailureCallback"      // 可选：失败后的回调函数
}))
{
    <!-- 输入框和按钮直接放在form里 -->
    <input type="text" id="startPnr" name="startYear" placeholder="开始年份" />
    <input type="text" id="endPnr" name="endYear" placeholder="结束年份" />
    <button type="submit" id="searchSubmitButton">搜索</button>
}

<!-- Partial容器不变 -->
<div id="partialViewContainer">
    @Html.Partial("YourPartialViewName", Model)
</div>

<script>
// 可选的回调函数
function filterSuccessCallback() {
    console.log("数据筛选并更新成功！");
}

function filterFailureCallback() {
    alert("请求失败，请稍后重试！");
}
</script>

控制器的Action和之前一样，返回PartialView即可。这样做的好处是不用手动写AJAX的细节，利用MVC的内置机制，代码更符合MVC的设计模式。

方案2：增加服务器端验证 #

前端验证只能防君子，服务器端必须再做一次验证，避免非法请求：

[HttpPost]
public ActionResult FilterPerson(int startYear, int endYear)
{
    // 服务器端验证：比如开始年份不能大于结束年份
    if (startYear > endYear)
    {
        ModelState.AddModelError("", "开始年份不能大于结束年份！");
        // 验证失败时，可以返回原模型或者错误提示的Partial
        var originalModel = _yourDataService.GetDefaultPersons();
        return PartialView("YourPartialViewName", originalModel);
    }

    var filteredModel = _yourDataService.GetPersonsByYearRange(startYear, endYear);
    return PartialView("YourPartialViewName", filteredModel);
}

如果想在前端显示服务器端的错误信息，可以在Partial视图里添加@Html.ValidationSummary()：

<!-- Partial视图顶部添加错误提示 -->
@Html.ValidationSummary(true, "", new { @class = "text-danger" })

<!-- 下面是你的Partial内容 -->
@foreach(var item in Model)
{
    <!-- 渲染数据 -->
}

方案3：返回JSON混合数据（灵活处理结果） #

如果需要在更新视图的同时，返回额外的信息（比如筛选结果数量），可以让控制器返回JSON，包含HTML和其他数据：

首先，给控制器添加一个辅助方法，把PartialView渲染成字符串：

protected string RenderPartialToString(string viewName, object model)
{
    ViewData.Model = model;
    using (var sw = new StringWriter())
    {
        var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
        var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
        viewResult.View.Render(viewContext, sw);
        viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
        return sw.GetStringBuilder().ToString();
    }
}

然后修改Action返回JSON：

[HttpPost]
public ActionResult FilterPerson(int startYear, int endYear)
{
    try
    {
        var filteredModel = _yourDataService.GetPersonsByYearRange(startYear, endYear);
        var partialHtml = RenderPartialToString("YourPartialViewName", filteredModel);
        
        return Json(new {
            Success = true,
            Html = partialHtml,
            TotalCount = filteredModel.Count() // 额外返回的信息
        });
    }
    catch (Exception ex)
    {
        return Json(new {
            Success = false,
            Message = "筛选失败：" + ex.Message
        });
    }
}

最后修改AJAX的success回调：

success: function (response) {
    if (response.Success) {
        // 更新Partial视图
        $('#partialViewContainer').html(response.Html);
        // 显示额外信息
        alert("共找到 " + response.TotalCount + " 条数据");
    } else {
        alert(response.Message);
    }
}

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