需要在 MVC 中呈现具有相同布局的另一个局部视图的局部视图

Question

我想在当前局部视图的点击操作中加载第二个局部视图来代替当前局部视图。

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

我想在单击管理 link 时加载另一个 table（另一个视图）以代替现有的局部视图。 简而言之 table 网格视图的主从关系。

下图供参考，

所以问题是

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>

3) 如果有其他更好的方法请提出

Answer 1

简单的解决方案是使用 @Ajax.ActionLink 加载第二个局部视图。

此处Manage Link使用@Ajax.ActionLink填充，响应内容将在UpdateTargetId提及的Target中更新。

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

添加AJAX时需要包含以下JS。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"
type="text/javascript"></script>

或者，也可以通过简单 AJAX 调用来完成。

将 click 事件绑定到管理 Link 并执行 AJAX 调用

$("<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);
       },
    });
});