Active links on Bootstrap Navbar with ASP.NET MVC nguồn http://saasthara.com/
If you have used Bootstrap with your ASP.NET MVC application, you might have faced some issues with implementing active links of it’s Navbar component. We’ll have to dynamically add a css class called active to the particular menu item in order to make it selected in the Navbar. After spending some time i have come up with a HtmlHelper extension which is capable of rendering menu items as well as drop-down menu items. I’ve used ASP.NET MVC 4 with Razorand Bootstrap 3. Hope this would help you 
First step is to create a HtmlHelper extension class. I’ve created a folder called Helper in my project root and added a class file named MenuItem.cs. Put the following content into MenuItem.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| namespace MvcShop.Helpers{ using System.Web.Mvc; public static class MenuLinkExtension { public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string itemText, string actionName, string controllerName, MvcHtmlString[] childElements = null) { var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action"); var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller"); string finalHtml; var linkBuilder = new TagBuilder("a"); var liBuilder = new TagBuilder("li"); if (childElements != null && childElements.Length > 0) { linkBuilder.MergeAttribute("href", "#"); linkBuilder.AddCssClass("dropdown-toggle"); linkBuilder.InnerHtml = itemText + " <b class="caret"></b>"; linkBuilder.MergeAttribute("data-toggle", "dropdown"); var ulBuilder = new TagBuilder("ul"); ulBuilder.AddCssClass("dropdown-menu"); ulBuilder.MergeAttribute("role", "menu"); foreach (var item in childElements) { ulBuilder.InnerHtml += item.ToString() + "n"; } liBuilder.InnerHtml = linkBuilder.ToString() + "n" + ulBuilder.ToString(); liBuilder.AddCssClass("dropdown"); if (controllerName == currentController) { liBuilder.AddCssClass("active"); } finalHtml = liBuilder.ToString() + ulBuilder.ToString(); } else { UrlHelper urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext, htmlHelper.RouteCollection); linkBuilder.MergeAttribute("href", urlHelper.Action(actionName, controllerName)); liBuilder.InnerHtml = linkBuilder.ToString(); if (controllerName == currentController && actionName == currentAction) { liBuilder.AddCssClass("active"); } finalHtml = liBuilder.ToString(); } return new MvcHtmlString(finalHtml); } }} |
Once you have saved it, you can it by just calling like this!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| @using MvcShop.Helpers<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">Mvc Shop</a> </div> <nav role="navigation"> <ul class="nav navbar-nav"> @Html.MenuLink("Home", "Index", "Home") @Html.MenuLink("Dropdown", "Index", "Home2", new MvcHtmlString[]{ @Html.MenuLink("Link1", "Action1", "Controller1"), @Html.MenuLink("Link2", "Action2", "Controller1"), @Html.MenuLink("Link3", "Action3", "Controller1"), }) @Html.MenuLink("JavaScript", "Index", "Home1", new MvcHtmlString[]{ @Html.MenuLink("Link1", "Index1", "Home1"), @Html.MenuLink("Link2", "Index2", "Home1"), @Html.MenuLink("Link3", "Index3", "Home1") }) </ul> </nav> </div></header> |
Our final product would look like this,
Make sure you change @using MvcShop.Helpers depending on your project namespace
Nhận xét
Đăng nhận xét