如何在asp mvc的视图中加载选定的部分视图？

Question

我正在开发 ASP.NET Mvc 项目。我有一个类似于图像的视图：

enter image description here

我在布局中设计右面板。我的布局代码：

       <div class="col-md-3 panel panel-info" style="margin-top:20px;">
        <div class="panel panel-primary" style="margin-top:8px;">
            <div class="panel-heading">Setting</div>
            <div class="panel-body">

                <div class="list-group">

                    <a href="#" class="list-group-item active text-center">Lists</a>
                    <hr />
                    <a href="#" class="list-group-item">Add Users - Partialview 1</a>

                    <a href="~/Areas/Admin/Views/Shared/_AddUser.cshtml" class="list-group-item">Edit Users - Partialview 2</a>

                    <a href="~/Areas/Admin/Views/Shared/_UserList.cshtml" class="list-group-item">User List - Partialview 3</a>

                    <a href="#" class="list-group-item">Set Password - Partialview 4</a>

                    <a href="#" class="list-group-item">User Details - Partialview 5</a>

                    <a href="#" class="list-group-item">Send Message - Partialview 6</a>

                </div>
            </div>
        </div>
    </div>

我在右侧面板中有几种模式包含：添加、编辑、列表和... 每种模式都有一个特殊的 Partialview。我想要，当我点击右侧面板上的每个模式时，左侧的特殊部分视图加载。如何在 asp mvc 中动态加载局部视图？

谢谢

Answer 1

方法一

首先你需要在你的视图中对控制器进行这样的操作

     @{Html.RenderAction("youractionname", "controllername");}

然后在控制器上你需要像这样返回部分视图

public ActionResult youractionname()
        {
            return PartialView("~/Areas/Admin/Views/Shared/_AddUser.cshtml");
        } 

通过这种方法，您的局部视图将被加载到您的视图中。

方法二

您可以使用ajax加载部分视图而无需刷新浏览器。

首先，您需要在需要加载部分视图的位置添加一个带有一些 id 的 div。

  <div id="PartialId"></div>

然后你需要添加动作链接（点击链接部分视图将被加载）

<a href="javascript:Details()">Select</a>

您的 ajax 方法如下所示

<script>
    function Details() {
        jQuery.ajax({
            url: '@Url.Action("index", "Home")', // your action method
            method: "POST", // your method
            cache: false,
            data: { }
        }).done(function (result) {
            $('#PartialId').html(result);
        });
    }
</script>

请注意，您需要将 Unobtrusive-Ajax-jquery 脚本添加到您的项目中。

你可以找到这个here