导航栏在 Body 元素 MVC 中重复答案

【问题标题】：navigation bar gets duplicated in Body element MVC导航栏在 Body 元素 MVC 中重复
【发布时间】：2015-09-23 07:26:42
【问题描述】：

只要我在导航栏中选择一个选项卡，导航栏就会在正文元素中复制。

我的导航栏位于部分页面中。

这是我的主要 MVC 5 布局页面：

<body>
    @{Html.RenderPartial("_NavBar");}
    <div class="container" id="MainBody">
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", false)
</body>

这是我包含导航栏的部分页面：

<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header" id="nav">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">EDR-Web</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active">@Ajax.ActionLink("Login", "Index", "Login", new AjaxOptions { HttpMethod = "get", UpdateTargetId = "MainBody", InsertionMode = InsertionMode.Replace })</li>
                <li>@Ajax.ActionLink("Contact Us", "Index", "Contact", new AjaxOptions { HttpMethod = "get", UpdateTargetId = "MainBody", InsertionMode = InsertionMode.Replace })</li>
                <li>@Ajax.ActionLink("Terms Of Use", "Index", "Terms", new AjaxOptions { HttpMethod = "get", UpdateTargetId = "MainBody", InsertionMode = InsertionMode.Replace })</li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

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

值得一提的是，我使用@Ajax.ActionLink 只更新主布局页面上的 ID=MainBody。

为什么会这样？任何帮助将不胜感激。

我现在知道为什么会这样了。由于我试图加载到 ID="MainBody" 的页面内容依赖于主布局页面，因此导航栏也将返回是有道理的。有什么办法可以避免这种情况吗？

将视图更改为不依赖于主布局页面，因为我只想调用每个视图的主体（html），然后将其放在 ID="MainBody"

【问题讨论】：

能否贴出复制内容时输出的原始html？
我想您应该决定使用控制器来呈现您的页面以返回 PartialView

标签： html asp.net asp.net-mvc visual-studio razor

【解决方案1】：

将您的索引控制器操作更改为以下内容：

public ActionResult Login() 
{
    return PartialView("Login");
}

public ActionResult Contact() 
{
    return PartialView("Contact");
}

public ActionResult Terms() 
{
    return PartialView("Terms");
}

然后删除 Login.cshtml、Contact.cshtml 和 Terms.cshtml 中的指令：

@{    
   Layout = "~/Views/Shared/_Layout.cshtml";   
}

假设您的代码与上述类似（添加自定义代码或更改配置的代码），现在将返回不依赖主布局的部分。

【讨论】：

只需将 Actions 更改为返回 PartialView()，即可修复解决方案。有什么我应该注意的吗，因为实际页面是查看页面，而不是部分视图？
@akemp IMO 你应该没问题，这里有一个很好的答案：stackoverflow.com/questions/2043394/…