@ 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"})
然后它回到原点。除了突出显示我选择的选项卡外,它什么都不做。我迷路了!我哪里错了?
首先,@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
,基于页面。
我知道这个问题是在新页面渲染时被重置的。只是不知道如何解决它。这就像一个魅力! Dhanyawadagalu! :) – Akshatha
首先删除引导程序的JavaScript和CSS - 它看起来很糟糕,但现在忘了。导航是否加载您期望的页面?接下来,阅读[Bootstrap的导航](https://getbootstrap.com/docs/3.3/components/#nav)组件,然后重新引入javascript和css。导航组件应该不需要自定义脚本。 – Jasen
@Jasen删除Bootstrap使导航没有任何问题!所以问题出在我处理Bootstrap CSS的方式上。 – Akshatha