如何在asp mvc的视图中加载选定的partialview?

时间:2016-09-14 16:15:24

标签: asp.net asp.net-mvc razor layout

我正在研究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>

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

感谢

1 个答案:

答案 0 :(得分:1)

方法1

首先,您需要在视图中对控制器进行操作

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

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

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

通过此方法,您的部分视图将加载到您的视图中。

方法2

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

首先,您需要在需要加载局部视图的位置添加一个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