- 首页
- 其他开发
- MVC 与 Bootstrap 导航栏 - 将所选项目设置为活动
MVC 与 Bootstrap 导航栏 - 将所选项目设置为活动
[英] MVC with Bootstrap Navbar - Set Selected Item to Active
本文介绍了MVC 与 Bootstrap 导航栏 - 将所选项目设置为活动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在学习 Bootstrap,但无法使所选项目进入活动"状态.活动状态保持在默认项目上.新选择/点击的项目会短暂变为活动状态,但又会恢复原状.我已阅读所有帖子,但仍然无法使此代码正常工作.我使用的是 MVC5 和 JQuery 2.1.
如果我将 li 的 hrefs 更改为 href="#",则活动类将被正确应用.加载新视图时会发生什么?我认为 Sebastian 的回应很接近,但对 Areas 变得混乱.
标记
<div class="容器"><div class="navbar navbar-inverse navbar-fixed-top"><div class="navbar-header"><a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><a class="navbar-brand" href="#">Test</a>
<div class="btn-group pull-right"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i>登录<span class="caret"></span></a><ul class="下拉菜单"><li><a href="#">个人资料</a></li><li class="divider"></li><li><a href="#">退出</a></li>
<div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="~/Home">Home</a></li><li><a href="~/Home/About">关于</a></li><li><a href="~/Student">学生样本</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="下拉菜单"><li><a href="~/Admin/Home/Index"">Admin</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li><li><a href="#">一个单独的链接</a></li>
<!--/容器-->
<!--/navbar 包装器 -->
脚本
这是我在已发布的答案和一些研究的帮助下最终完成的工作.
public static string MakeActive(this UrlHelper urlHelper,string action, string controller, string area = ""){字符串结果 =活动";字符串 requestContextRoute;字符串passedInRoute;//从请求中获取路由值var sb = new StringBuilder().Append(urlHelper.RequestContext.RouteData.DataTokens["area"]);sb.Append("/");sb.Append(urlHelper.RequestContext.RouteData.Values["controller"].ToString());sb.Append("/");sb.Append(urlHelper.RequestContext.RouteData.Values["action"].ToString());requestContextRoute = sb.ToString();if (string.IsNullOrWhiteSpace(area)){passedInRoute = "/" + 控制器 + "/" + 动作;}别的{passInRoute = 区域 + "/" + 控制器 + "/" + 动作;}//两条路线一样吗?if (!requestContextRoute.Equals(passedInRoute, StringComparison.OrdinalIgnoreCase)){结果 = 空;}返回结果;}
解决方案
您必须检查控制器或根据当前 url 查看哪个菜单项处于活动状态:
我有一个类似这样的扩展方法:
public static string MakeActiveClass(this UrlHelper urlHelper, string controller){字符串结果 =活动";string controllerName = urlHelper.RequestContext.RouteData.Values["controller"].ToString();if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase)){结果 = 空;}返回结果;}
您可以像这样在视图中使用它:
<!-- 当前控制器等于blog"时激活列表项--><li class="@Url.MakeActive("blog")"><a href="@Url.Action("index", "blog")">....</a>
I'm learning Bootstrap and can't get the selected item into an "active" state. The active state remains on the default item. The newly selected/clicked item changes to active briefly, but reverts back. I've read all the posts and still can't get this code to work. I'm using MVC5 and JQuery 2.1.
EDIT:
If I change the li's hrefs to href="#", then the active class gets applied properly. What's happening when a new view gets loaded? I think Sebastian's response is close, but gets messy with Areas.
Markup
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Test</a>
</div>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>Login
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="~/Home">Home</a></li>
<li><a href="~/Home/About">About</a></li>
<li><a href="~/Student">Students Sample</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="~/Admin/Home/Index"">Admin</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /container -->
</div>
<!-- /navbar wrapper -->
Script
<script type="text/javascript">
$(function () {
$('.navbar-nav li').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>
EDIT: Here's what I ended up doing with the help of the posted answers and some research.
public static string MakeActive(this UrlHelper urlHelper,string action, string controller, string area = "")
{
string result = "active";
string requestContextRoute;
string passedInRoute;
// Get the route values from the request
var sb = new StringBuilder().Append(urlHelper.RequestContext.RouteData.DataTokens["area"]);
sb.Append("/");
sb.Append(urlHelper.RequestContext.RouteData.Values["controller"].ToString());
sb.Append("/");
sb.Append(urlHelper.RequestContext.RouteData.Values["action"].ToString());
requestContextRoute = sb.ToString();
if (string.IsNullOrWhiteSpace(area))
{
passedInRoute = "/" + controller + "/" + action;
}
else
{
passedInRoute = area + "/" + controller + "/" + action;
}
// Are the 2 routes the same?
if (!requestContextRoute.Equals(passedInRoute, StringComparison.OrdinalIgnoreCase))
{
result = null;
}
return result;
}
解决方案
You have to check in your controller or view which menu item is active based on the current url:
I have an extension method similar to this:
public static string MakeActiveClass(this UrlHelper urlHelper, string controller)
{
string result = "active";
string controllerName = urlHelper.RequestContext.RouteData.Values["controller"].ToString();
if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
{
result = null;
}
return result;
}
You can use it in your view like this:
<!-- Make the list item active when the current controller is equal to "blog" -->
<li class="@Url.MakeActive("blog")">
<a href="@Url.Action("index", "blog")">....</a>
</li>
这篇关于MVC 与 Bootstrap 导航栏 - 将所选项目设置为活动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!