MVC在导航栏点击显示部分视图

Question

我想显示局部视图，当我点击导航栏时点击。我有一个包含左侧菜单的视图。当用户单击导航栏项目时，应显示适当的视图。

我没有得到如何实现这样的视图？

Manage.cshtml

        <div class="row">
            <div class="col-xs-12">
                <div class="page-header">
                    <h1>My Account</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3">
                <ul class="nav nav-pills nav-stacked nav-stacked-extended">
                    <li class="active">
                        <a id="A3" target="_self" runat="server" href="@Url.Action("Contactinfo", "Account")">Contact Info</a>
                    </li>
                    <li class="">
                        <a id="A4" target="_self" runat="server" href="@Url.Action("changePassword", "Account")">Password</a>
                    </li>
                </ul>
            </div>
            <div class="col-xs-9 ng-scope" data-ng-view="">
                <div class="row row-gap-medium ng-scope">
                    @Html.Partial("Contactinfo")
                </div>
            </div>
        </div>

在上面的代码中，当Manage.cshtml 第一次加载我想显示Contactinfo 视图时，我创建了左侧菜单，即联系信息、更改密码等。当用户点击密码菜单时，contactinfo 得到更改为changedpassword 页面。请检查以下屏幕截图。

在上图中，您可以看到左侧菜单和相应的页面。当用户单击密码时，我想要什么，视图更改为password page。目前它显示联系信息页面。我怎样才能做到这一点？

Answer 1

我认为你应该通过 JavaScript 渲染部分内容。

假设你有<div id="partialView"></div>

那么你应该在用户点击链接时运行 Ajax 查询。

类似：

$.ajax({
            url: $(this).data('yourUrl'),
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#partialView').html(result);
            }
        });

Answer 2

我也花了一点时间才弄明白。

本质上，您希望控制器操作返回一个局部视图，然后使用 Ajax 加载返回的局部视图。

JavaScript/Ajax

$.ajax({
            url: '@Url.Action("Action", "Controller")',
            type: 'POST',
            data: { 'viewName': 'password' },
            success: function (data) {
                $('#partial-container').html(data);
            }
        });

控制器返回类型

Public ActionResult GetView(string viewName)
{
    return PartialView(viewName, model);
}

理想情况下，更改您的 HTML，以便更轻松地引用您要加载部分的 div 容器

<div class="col-xs-9 ng-scope" data-ng-view="">
                <div class="row row-gap-medium ng-scope">
                    <div id="partial-container">@Html.Partial("Contactinfo")</div>
                </div>
            </div>

Answer 3

在您的要求中，只需对左侧栏中的链接进行部分视图，当用户单击左侧栏中的特定选项时，只需使用 jquery 从 ajax 调用加载适当的部分视图，然后替换右侧的 html带有来自 ajax 调用的 html 的栏。

为您的左侧菜单提供唯一 ID，然后：

一个演示：

 $(document).ready(function(){
   $("#menu1").click(function(e){
      e.preventDefault();
      $.ajax({
                url: "/MyController/getdata",
                type: 'GET',
                datatype: 'html',
                data: {  },
                success: function (data) {
                   $("#div1").html('');
                   $("#div1").html(data);

            });
    });
});

控制器（MyController）：

[HttpGet]
Public ActionResult getdata(string dropval)
{
//bind model here
return PartialView("mypartialview",model)
}

Answer 4

为 Clickevent 尝试这个 JS

$(document).on('click', '#anCalcBtn', function () {
$('#anCalcDetail').load('/Home/Contactinfo/');
});

如果我没记错的话，你正在尝试像 This 那样做