ASP.NET Core提交partial view后如何更新父页面中的对应局部内容

你当前的表单是同步提交模式，服务端返回PartialView后浏览器会将局部视图内容作为完整页面渲染，因此出现跳转到单独partial页面的问题。可通过以下两种方案实现需求：

方案一：AJAX异步提交无刷新更新（推荐） #

该方案不需要刷新整个父页面，用户体验更好，实现逻辑如下：

1. 给父视图中Partial的承载容器加唯一ID，方便后续替换内容：

<!-- 父视图代码 -->
<div class="row">
    <div class="col-md-3 form-horizontal">
        <!-- 新增id标识容器 -->
        <div id="clientConsultContainer">
            @{
                Html.RenderPartial("~/Views/Partials/ClientConsult.cshtml");
            }
        </div>
        <!-- 其余表单代码不变 -->
        <form action="/modulocertificados/createexpedient" method="post">
            <br />
            <input type="text" class="form-control" name="nroExp" placeholder="Nro. Expediente" autofocus>
            <br />
            <button class="btn btn-primary" type="submit">
                Create Expedient
            </button>
        </form>
    </div>
</div>

2. 修改Partial View的表单，增加异步提交逻辑（项目默认自带jQuery可直接使用）：

@*ClientConsult.cshtml*@
<!-- 给表单加唯一id -->
<form id="clientConsultForm" action="/partials/clientconsult" method="post">
    <br />
    <input type="text" class="form-control" name="nroDocClient" value=@ViewData["nombre"] required>
    <br />
    <input type="text" class="form-control" name="RazonSocial" value="@ViewData["numeroDocumento"]">
    <br />
    <input type="text" class="form-control" name="Direccion" value="@ViewData["direccion"]">
    <br />
    <button class="btn btn-primary" type="submit">
        Search Client
    </button>
</form>

<script>
// 监听表单提交事件
$("#clientConsultForm").submit(function(e) {
    // 阻止默认的同步提交跳转行为
    e.preventDefault();
    // 异步提交表单数据
    $.post({
        url: $(this).attr("action"),
        data: $(this).serialize(),
        success: function(res) {
            // 用服务端返回的更新后Partial内容替换容器
            $("#clientConsultContainer").html(res);
        }
    })
})
</script>

3. 原有Controller的GET/POST接口逻辑不需要做任何修改，即可正常运行。

方案二：同步提交重定向回父视图 #

如果不想引入前端脚本，可以通过重定向实现整页刷新更新：

1. 修改父视图对应的Controller Action，支持接收搜索参数并传递给Partial：

// 父视图对应的Action，示例中父页面路由是/modulocertificados/createexpedient
public IActionResult CreateExpedient(string nroDocClient = null)
{
    // 存在搜索参数时查询客户信息
    if(!string.IsNullOrEmpty(nroDocClient))
    {
        // 替换为你实际的客户查询逻辑，用传入的nroDocClient查询
        var client = _context.Client.Find(1); 
        ViewData["nombre"] = client.nombre;
        ViewData["numeroDocumento"] = client.numeroDocumento;
        ViewData["direccion"] = client.direccion;
    }
    else
    {
        ViewData["nombre"] = "";
        ViewData["numeroDocumento"] = "";
        ViewData["direccion"] = "";
    }
    return View();
}

2. 修改Partial的POST接口，不返回PartialView，改为重定向回父视图并携带搜索参数：

//POST
public async Task<IActionResult> ClientConsult(string nroDocClient)
{
    // 重定向到父视图Action，替换为你实际的父视图控制器、Action名称
    return RedirectToAction("CreateExpedient", "ModuloCertificados", new { nroDocClient = nroDocClient });
}

内容的提问来源于stack exchange，提问作者Paul Antonio Portugal Herencia