@ Url.Action在导航栏中点击时没有路由

我对MVC,JavaScript或Bootstrap没有太多的知识。但在这里，我被困在所有这三个方面。我有一个Layout页面，其中包含使用Bootstrap设计的导航栏。想法取自here。标记如下。@ Url.Action在导航栏中点击时没有路由

<div id="innerTab"> 
    <ul class="nav nav-pills"> 
    <li class="active"> 
     <a href="@Url.Action(" Index ", "Home ")" data-toggle="tab">Index</a> 
    </li> 
    <li> 
     <a href="@Url.Action(" About ", "Home ")" data-toggle="tab">About</a> 
    </li> 
    </ul> 

    <div class="tab-content clearfix"> 
    <div class="tab-pane active"> 
     @RenderBody() 
    </div> 
    </div> 
</div>

由于这是一个Layout View，我希望能够加载从标签内容区域其他意见的内容。因此，我必须利用@RenderBody()这不能被称为不止一次。我真的不确定data-toggle究竟做了什么，但点击About没有任何影响。然后我意识到我必须通过JS手动设置active类的点击标签。所以这就是我所做的。

$(".nav li").on("click", function() { 
    $(".nav li").removeClass("active"); 
    $(this).tab('show'); 
})

现在，所选标签确实变为活动状态。但是，由于某种未知的原因，当点击About时，它不会导航到About页面，而是保持在Index。因此，我不得不将其更改为@Html.ActionLink，如下所示。

@Html.ActionLink("About", "About", "Home")

成功导航到About页面。但是，About选项卡会在一秒钟内激活并快速切换到Index选项卡，但会显示About页面中的内容。如下所示。

思想加入data-toggle可以解决这个问题。所以我遵循给出的答案here。

@Html.ActionLink("About", "About", "Home", new { data_toggle="tab"})

然后它回到原点。除了突出显示我选择的选项卡外，它什么都不做。我迷路了！我哪里错了？

来源

2017-10-06 Akshatha

首先删除引导程序的JavaScript和CSS - 它看起来很糟糕，但现在忘了。导航是否加载您期望的页面？接下来，阅读[Bootstrap的导航]（https://getbootstrap.com/docs/3.3/components/#nav）组件，然后重新引入javascript和css。导航组件应该不需要自定义脚本。 – Jasen

@Jasen删除Bootstrap使导航没有任何问题！所以问题出在我处理Bootstrap CSS的方式上。 – Akshatha

首先，@Url.Action(" Index ", "Home ")不起作用，因为您的Action和Controller参数附近有多余空格。

应该@Url.Action("Index", "Home")

“关于选项卡用于第二变得活跃并快速切换到索引”

这是因为，在点击，jQuery的单击事件添加一个类。但是MVC重定向到一个新页面，并且_Layout再次以默认active标签Home呈现。

所以你About.cshtml的顶部，

@{ 
    ViewBag.Title = "About"; 
    ViewBag.ActiveNav = "About"; // you'll need to add this to Home as well 
}

则布局更改为：

<ul class="nav nav-pills"> 

    //Based on the "ActiveNav" value, "active" class will be added 

    <li class="@(ViewBag.ActiveNav == "Home" ? "active" : "")"> 
     @Html.ActionLink("Index", "Index", "Home") 
    </li> 
    <li class="@(ViewBag.ActiveNav == "About" ? "active" : "")"> 
     @Html.ActionLink("About", "About", "Home") 
    </li> 
    </ul>

现在active类添加到特定li，基于页面。

来源

2017-10-06 09:06:50 adiga

我知道这个问题是在新页面渲染时被重置的。只是不知道如何解决它。这就像一个魅力！ Dhanyawadagalu！ :) – Akshatha

@ Url.Action在导航栏中点击时没有路由

回答

相关问题