Question

只要我在导航栏中选择了一个标签，导航栏就会在body元素中重复出现。

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

这是我的主要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 =＆＃34; MainBody＆＃34;取决于主布局页面，也会返回导航栏。有什么方法可以避免这种情况吗？

将我的观点更改为不依赖于Master布局页面，因为我只想调用每个视图的正文（html），然后将其放在ID =＆＃34; MainBody＆＃34;

Answer 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";   
}

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

导航栏在Body元素MVC中重复

1 个答案: