Asp.net 需要在MVC中以相同布局的另一个局部视图的位置渲染局部视图

我想在单击当前局部视图的操作时，在当前局部视图的位置加载第二个局部视图

这是我的主视图，其中表视图是第一个局部视图

我想在单击“管理”链接以替换现有部分视图时加载另一个表（另一个视图）。 简而言之，掌握表格栅格视图的详细关系

下图为参考图，

所以问题是

1） 我可以这样做吗

2） 如果是，那么我应该选择哪种方法

我尝试使用下面的方法，但它不起作用，因为它只加载第二个部分视图，没有主布局。 我的主要索引视图

<div class="row">
<div class="col-lg-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            User Role Management
        </div>
        <!-- /.panel-heading -->
        <div class="panel-body" id="Data">
            <div class="panel-body" id="divUserRoleMappingMaster">
                @Html.Partial("pv_UserRoleMappingMaster", Model)
            </div>
            @if (ViewBag.IsDetailView == "True")
            {
                <div class="panel-body" id="divManageUserRole">
                    @Html.Partial("pv_ManageUserRole", Model)
                </div>
            }

        </div>
        <!-- /.panel-body -->
    </div>
    <!-- /.panel -->
</div>

用户角色管理
@Html.Partial（“pv_UserRoleMappingMaster”，模型）
@如果（ViewBag.IsDetailView==“True”）
{
@Html.Partial（“pv_ManageUserRole”，模型）
}

---

3） 如果有其他更好的方法，请建议

简单的解决方案是加载第二个局部视图

这里使用

@Ajax.ActionLink

填充

Manage

链接，并在目标中更新响应内容，该目标在

UpdateTargetId

中提到

@Ajax.ActionLink(
    "Manage", 
    "pv_ManageUserRole", 
    "<CONTROLLER>", 
    new AjaxOptions { UpdateTargetId = "<FIRST PARTIAL VIEW CONTAINER ID>" }
)

---

简单的解决方案是使用加载第二个局部视图

这里使用

@Ajax.ActionLink

填充

Manage

链接，并在目标中更新响应内容，该目标在

UpdateTargetId

中提到

@Ajax.ActionLink(
    "Manage", 
    "pv_ManageUserRole", 
    "<CONTROLLER>", 
    new AjaxOptions { UpdateTargetId = "<FIRST PARTIAL VIEW CONTAINER ID>" }
)

---

您可以使用ajax加载部分注释并更新DOM以添加上述注释。将允许您将局部视图加载到div中。只需在管理按钮的单击事件上执行此操作最简单的方法是在加载时加载两个部分，并设置container div的display:none属性，并按客户机代码切换此属性。使用ajax加载部分并更新DOM以添加上述注释。将允许您将局部视图加载到div中。只需在管理按钮的单击事件上执行此操作最简单的方法是在加载时加载两个部分并设置container div的display:none属性，然后通过客户端代码切换此属性

$("<Manage Link>").click(function(){

   $.ajax({
       type: 'POST',
       url: '@Url.Action("pv_ManageUserRole", "<CONTROLLER>")'
       data: '<POST Parameters if any>',
       success: function (data){
           //validate the response data and then load
           $("#<FIRST PARTIAL VIEW CONTAINER ID>").html(data);
       },
    });
});