使用RenderAction实现解耦组件，如何实现组件间通信？

下面提供几种解耦、模块化的实现方案，适配你当前的组件化架构：

方案1：通过HttpContext.Items传递ID（轻量同请求共享） #

HttpContext.Items是当前请求生命周期内的临时存储容器，适合在同一次请求中共享数据，既不会污染Session，也能保证各组件的独立性。

修改搜索控制器的Post方法 #

public class SearchController : Controller
{
    [HttpGet]
    public ActionResult SearchContract()
    {
        var vm = new SearchVM();
        // 回显之前的搜索ID（如果存在）
        if (HttpContext.Items.TryGetValue("CurrentContractId", out var id))
        {
            vm.Id = (int)id;
        }
        return PartialView(vm);
    }

    [HttpPost]
    public ActionResult SearchContract(SearchVM search)
    {
        if (ModelState.IsValid)
        {
            // 将ID存入当前请求的共享容器
            HttpContext.Items["CurrentContractId"] = search.Id;
        }
        return PartialView(search);
    }
}

父视图中传递ID给组件 #

父视图读取HttpContext.Items中的ID，传递给所有RenderAction组件：

@{
    var contractId = HttpContext.Items.ContainsKey("CurrentContractId") 
        ? (int)HttpContext.Items["CurrentContractId"] 
        : 0; // 根据业务设置默认值
}

@{ Html.RenderAction("SearchContract", "Search"); }
@{ Html.RenderAction("ContractHeader", "Contract", new { ContractId = contractId }); }
@* 其他RenderAction组件同理传递ContractId参数 *@

组件控制器保持原样 #

你的ContractController无需修改，直接接收参数即可：

public class ContractController : Controller
{
    public ActionResult ContractHeader(int ContractId)
    {
        // 根据ContractId查询数据库获取视图模型
        var vm = // 业务查询逻辑
        return PartialView(vm);
    }
}

方案2：AJAX局部刷新（无刷新体验，完全解耦） #

这种方式下，搜索组件提交后通过AJAX异步获取新ID，再单独刷新每个组件，各组件之间完全独立，无需依赖请求内的数据共享。

修改搜索视图为AJAX提交 #

@model SearchVM
@using (Ajax.BeginForm("SearchContract", "Search", new AjaxOptions { 
    OnSuccess = "onSearchSuccess",
    UpdateTargetId = "search-container" // 仅刷新搜索组件自身
}))
{
    <div class="row">
        <div class="col-md-3">Contract Id</div>
        <div class="col-md-6">
            @Html.TextBoxFor(m => m.Id, new { @class = "form-control" })
        </div>
    </div>
    <input type="submit" class="btn btn-primary"/>
}

<script>
function onSearchSuccess(data) {
    // 获取用户输入的新ContractId
    var contractId = $('#Id').val();
    
    // 刷新合同头部组件
    $.get('/Contract/ContractHeader', { ContractId: contractId }, function(result) {
        $('#contract-header-container').html(result);
    });
    
    // 其他组件同理刷新，例如：
    // $.get('/Contract/ContractDetails', { ContractId: contractId }, function(result) {
    //     $('#contract-details-container').html(result);
    // });
}
</script>

注意：使用Ajax.BeginForm需要确保项目中引用了jquery.unobtrusive-ajax.js脚本

父视图为组件添加容器 #

<div id="search-container">
    @{ Html.RenderAction("SearchContract", "Search"); }
</div>
<div id="contract-header-container">
    @{ Html.RenderAction("ContractHeader", "Contract", new { ContractId = 0 }); }
</div>

方案3：使用TempData传递（跨请求场景） #

如果需要在重定向后保留搜索ID（比如遵循PRG模式），可以用TempData临时存储：

修改搜索控制器Post方法 #

[HttpPost]
public ActionResult SearchContract(SearchVM search)
{
    if (ModelState.IsValid)
    {
        TempData["CurrentContractId"] = search.Id;
        // 重定向到父页面，避免表单重复提交
        return RedirectToAction("Index", "Home");
    }
    return PartialView(search);
}

父视图读取TempData #

@{
    var contractId = TempData["CurrentContractId"] != null 
        ? (int)TempData["CurrentContractId"] 
        : 0;
    // 可选：保留TempData值供后续请求使用
    TempData.Keep("CurrentContractId");
}

@{ Html.RenderAction("SearchContract", "Search"); }
@{ Html.RenderAction("ContractHeader", "Contract", new { ContractId = contractId }); }

• HttpContext.Items：适合表单提交后同步刷新所有组件的场景，轻量无持久化，请求结束即销毁数据。
• AJAX局部刷新：用户体验更流畅，组件完全解耦，每个组件仅负责自身的数据获取与渲染，适合现代Web应用。
• TempData：适合跨请求的场景（如PRG模式），但需注意其默认生命周期为一次请求后失效。

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