I am trying to get the active class to show on my navigation. I have written the htmlhelper:
public static string IsActive(this HtmlHelper htmlHelper, string controller, string action)
{
var routeData = htmlHelper.ViewContext.RouteData;
var routeAction = routeData.Values["action"].ToString();
var routeController = routeData.Values["controller"].ToString();
var returnActive = (controller == routeController && action == routeAction);
return returnActive ? "active" : "";
}
and this is my navigation:
<li #Html.IsActive("MemberDashboard", "Index")><span class="fa fa-list-alt fa-lg fa-fw"></span> Accounts</li>
<li #Html.IsActive("Transfer", "Index")><span class="fa fa-retweet fa-lg fa-fw"></span> Transfers</li>
The navigation doesn't go to active when I'm on said page.
There's a few things here that I can recommend:
You are outputting the result of #Html.IsActive() as an attribute on the <li> element. I think you'd want to assign this to the class atribute of the element.
I would compare controller and action strings using invariant culture and ignoring case to cover the likely strings you want to successfully match against.
I would return null from the method in the case the controller and action strings do not match the current controller and action. If null is returned and assigned to the class attribute of the <li> element, then the class attribute will not be outputted at all in the markup. Small difference, but perhaps a little cleaner than an empty class attribute.
I would match the order of controller and action in the method signature to the order they appear in framework methods. This will be more intuitive for others to use and less confusing in the long run.
So, applying all of the above
public static string IsActive(this HtmlHelper htmlHelper, string action, string controller)
{
var routeData = htmlHelper.ViewContext.RouteData;
var routeAction = (string)routeData.Values["action"];
var routeController = (string)routeData.Values["controller"];
var isActive = string.Equals(controller, routeController, StringComparison.InvariantCultureIgnoreCase)
&& string.Equals(action, routeAction, StringComparison.InvariantCultureIgnoreCase);
return isActive ? "active" : null;
}
and usage
<li class="#(Html.IsActive("Index", "MemberDashboard"))">
<a href="#Url.Action("Index", "MemberDashboard")">
<span class="fa fa-list-alt fa-lg fa-fw"></span> Accounts
</a>
</li>
<li class="#(Html.IsActive("Index", "Transfer"))">
<a href="#Url.Action("Index", "Transfer")">
<span class="fa fa-retweet fa-lg fa-fw"></span> Transfers
</a>
</li>
You may want to also include an area string too if you're planning on using areas.
<li class="rtsLI" id="Summary"><span class="rtsTxt">Test</span></li>
Above I am replacing with following actionlink:
<li class="rtsLI" >#Html.ActionLink("test1", "Index", new { Area = "Area1", Controller = "controller1" }, new { #class = "rtsLink rtsTxt"})</li> "
At first css is working fine. But when using Actionlink, css not working. Thanks
The standard ActionLink helper always HTML encodes the link text. This means that you cannot use it if you want to render HTML inside. You have 3 possibilities:
Modify your CSS so that you don't need a span inside the link and so that the rtsTxt class could directly be applied to the link
Write a custom ActionLink helper that doesn't HTML encode the text and which would allow you to generate the same markup:
public static class ActionLinkExtensions
{
public static IHtmlString ActionLinkUnencoded(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
object routeValues,
object htmlAttributes
)
{
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
var link = new TagBuilder("a");
link.MergeAttributes(new RouteValueDictionary(htmlAttributes));
link.Attributes["href"] = urlHelper.Action(actionName, routeValues);
link.InnerHtml = linkText;
return new HtmlString(link.ToString());
}
}
and then:
<li>
#Html.ActionLinkUnencoded(
"<span class=\"rtsTxt\">User Security</span>",
"index",
new { area = "Tools", controller = "UserSecurity" },
new { #class = "rtsLink" }
)
</li>
Use the Url.Action helper:
<li class="rtsLI">
<a href="#Url.Action("index", new { area = "Tools", controller = "UserSecurity" })" class="rtsLink">
<span class="rtsTxt">User Security</span>
</a>
</li>
Best option will be to use #Url.Action extension method
<li class="rtsLI" id="Summary"><span class="rtsTxt">User Security</span></li>
Write code this way:
<li class="rtsLI" >#Html.ActionLink("<span class='rtsTxt'>User Security</span>", "Index", new { Area = "Tools", Controller = "UserSecurity" }, new { #class = "rtsLink"})</li>`
I have two #Html.ActionLink's one works and one does not and I cannot figure out why?
They are both within the same controller: StoreController and both call ActionResults within different controllers, this is the one that works and calls the Index function within the Director Class:
<ul>
#foreach (var item in Model)
{
<li>
<h2>#item.Title</h2>
</li>
<li class = "lihead">
Directed by
#Html.ActionLink((string)item.Director.Name, "Index", "Director", new { searchString = item.Director.Name }, null)
</li>
<li>
<i>#item.Synopsis</i>
</li>
<li class = "lihead">
Price per ticket £
#item.Price
</li>
}
This is the one that does not work:
#foreach (var item in Model) {
#Html.ActionLink("Check Availability", "CheckAvail", "Booking", new { id = item.ShowId })
}
This one calls within the StoreController when I want it to call the CheckAvail function within the BookingController. However it does work when I amend it as so:
#foreach (var item in Model) {
#Html.ActionLink("Check Availability", "CheckAvail", "Booking")}
But I need it to take through the ShowId to the function???
Use it like this
#Html.ActionLink("Check Availability", "CheckAvail", "Booking", new { #id = item.ShowId },null)
It is using this overload
public static MvcHtmlString ActionLink(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName,
Object routeValues,
Object htmlAttributes
)
http://msdn.microsoft.com/en-us/library/dd504972.aspx
the last parameter is the HTML attribute. If you have some HTML atribute to pass, you pass it there instead of null
#Html.ActionLink("Check Availability", "CheckAvail", "Booking", new { #id = item.ShowId },new { #class="myCssClass"} )
It seems to be simple, but I can't get anything to work. This code was generated by my template generator and needs to be changed.
<li><a href="../Home/Contact" class="active"><span class="l"></span><span class="r">
</span><span class="t">Nous contacter</span></a> </li>
My best bet up to now is:
<li><span class="l"></span><span class="r"></span>
#Html.RouteLink("Contact", new { Controller = "Home", Action = "Contact" }, new { #class = "t" })</li>
But it doesn't do anything.
Just to make sur that my question is clear: The link works in both cases, that's fine. The formating doesn't work. That's my issue here.
The second will generate:
<li>
<span class="l"></span>
<span class="r"></span>
<a class="t" href="/Home/Contact">Contact</a>
</li>
which is different than what you had in the first place which might explain the formatting problems:
<li>
<a href="../Home/Contact" class="active">
<span class="l"></span>
<span class="r"></span>
<span class="t">Nous contacter</span>
</a>
</li>
The problem with Html helpers such as Html.ActionLink and RouteLink is that they by always Html encode the text, so you cannot use HTML as text. So one possibility is the following:
<li>
<a href="#Url.RouteUrl("Contact", new { controller = "home", action = "contact" })" class="active">
<span class="l"></span>
<span class="r"></span>
<span class="t">Nous contacter</span>
</a>
</li>
Another possibility if you have lots of those to generate is to write a custom Html helper that will do the job for you:
public static class HtmlExtensions
{
public static IHtmlString MyLink(
this HtmlHelper htmlHelper,
string linkText,
string routeName,
object routeValues
)
{
var spans = string.Format(
"<span class=\"l\"></span><span class=\"r\"></span><span class=\"t\">{0}</span>",
htmlHelper.Encode(linkText)
);
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
var url = urlHelper.RouteUrl(routeName, routeValues);
var anchor = new TagBuilder("a");
var rvd = new RouteValueDictionary(routeValues);
var rd = htmlHelper.ViewContext.RouteData;
var currentAction = rd.GetRequiredString("action");
var currentController = rd.GetRequiredString("controller");
var controller = rvd["controller"] as string;
var action = rvd["action"] as string;
if (string.Equals(controller, currentController, StringComparison.OrdinalIgnoreCase) &&
string.Equals(action, currentAction, StringComparison.OrdinalIgnoreCase))
{
anchor.AddCssClass("active");
}
anchor.Attributes["href"] = url;
anchor.InnerHtml = spans;
return new HtmlString(anchor.ToString());
}
}
and then:
<li>
#Html.MyLink("Nous contacter", "Contact", new { controller = "home", action = "contact" })
</li>
Just use something like this:
#Url.Action("Index", "Home")
In the default asp.net mvc project, in the Site.Master file, there is a menu navigation list:
<div id="menucontainer">
<ul id="menu">
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
This renders in the browser to:
<div id="menucontainer">
<ul id="menu">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
I want to be able to dynamically set the active list item, based on the view that is being called. That is, when the user is looking at the home page, I would want the following HTML to be created:
<div id="menucontainer">
<ul id="menu">
<li class="active">Home</li>
<li>About Us</li>
</ul>
</div>
I would expect that the way to do this would be something like:
<div id="menucontainer">
<ul id="menu">
<li <% if(actionName == "Index"){%> class="active"<%}%>><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li <% if(actionName == "About"){%> class="active"<%}%>><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
The key bit here is the <% if(actionName == "Index"){%> class="active"<%}%> line. I do not know how to determine what the current actionName is.
Any suggestions on how to do this? Or, if I'm on completely the wrong track, is there a better way to do this?
I made myself a helper method to handle this type of thing. In the code behind of my master page (could be pushed of to an extension method ... probably a better approach), I put the following code.
protected string ActiveActionLinkHelper(string linkText, string actionName, string controlName, string activeClassName)
{
if (ViewContext.RouteData.Values["action"].ToString() == actionName &&
ViewContext.RouteData.Values["controller"].ToString() == controlName)
return Html.ActionLink(linkText, actionName, controlName, new { Class = activeClassName });
return Html.ActionLink(linkText, actionName, controlName);
}
Then, I just call it in my page like so:
<%= ActiveActionLinkHelper("Home", "Index", "Home", "selected")%>
Inside a view, you can get the current action name with:
ViewContext.RouteData.Values["action"].ToString()
You can also try to detect which is the current selected tab from its controller name and view name, then add the class attribute.
public static string MenuActionLink(this HtmlHelper helper, string linkText, string actionName, string controllerName)
{
var htmlAttributes = new RouteValueDictionary();
if (helper.ViewContext.Controller.GetType().Name.Equals(controllerName + "Controller", StringComparison.OrdinalIgnoreCase))
{
htmlAttributes.Add("class", "current");
}
return helper.ActionLink(linkText, actionName, controllerName, new RouteValueDictionary(), htmlAttributes);
}
In MVC 3 Razor View Engine, you can do it as:
#{string ctrName = ViewContext.RouteData.Values["controller"].ToString();}
<div id="menucontainer">
<ul id="menu">
<li #if(ctrName == "Home"){<text> class="active"</text>}># Html.ActionLink("Home", "Index", "Home")</li>
<li #if(ctrName == "About"){<text> class="active"</text>}># Html.ActionLink("About Us", "About", "Home")</li>
</ul>
</div>
My sample worked when I have two pages as: Home/About and its controller has same name Index, so I get controller Name for distinction insteed of action. If you want to get action, just replace with following:
#{string ctrName = ViewContext.RouteData.Values["action"].ToString();}
An old question but hopefully someone might find this very helpful.
Put some thing that you can use to identify your page in the ViewBag, I used ViewgBag.PageName
For example, in index.cshtml, put something like
#{
ViewBag.PageName = "Index";
}
Add a class to each link item with a conditional statement to return active if the page being visited has the required value, or return an empty string otherwise. View below for details:
<li class="#((ViewBag.PageName == "Index") ? "active" : "")">Home</li>
<li class="#((ViewBag.PageName == "About") ? "active" : "")">About</li>
<li class="#((ViewBag.PageName == "Contact") ? "active" : "")">Contact</li>
I didn't just test it, I use this method in my projects
To contribute my own answer (tested in MVC4), I took a few best bits of the other answers, fixed a few issues, and added a helper to work with urls that aren't necessarily resolved via Controller & Action (eg. if you have an embedded CMS dealing with some page links, etc.)
The code is also forkable on github: https://gist.github.com/2851684
///
/// adds the active class if the link's action & controller matches current request
///
public static MvcHtmlString MenuActionLink(this HtmlHelper htmlHelper,
string linkText, string actionName, string controllerName,
object routeValues = null, object htmlAttributes = null,
string activeClassName = "active")
{
IDictionary htmlAttributesDictionary =
HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
if (((string)htmlHelper.ViewContext.RouteData.Values["controller"])
.Equals(controllerName, StringComparison.OrdinalIgnoreCase) &&
((string)htmlHelper.ViewContext.RouteData.Values["action"])
.Equals(actionName, StringComparison.OrdinalIgnoreCase))
{
// careful in case class already exists
htmlAttributesDictionary["class"] += " " + activeClassName;
}
return htmlHelper.ActionLink(linkText, actionName, controllerName,
new RouteValueDictionary(routeValues),
htmlAttributesDictionary);
}
///
/// adds the active class if the link's path matches current request
///
public static MvcHtmlString MenuActionLink(this HtmlHelper htmlHelper,
string linkText, string path, object htmlAttributes = null,
string activeClassName = "active")
{
IDictionary htmlAttributesDictionary =
HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
if (HttpContext.Current.Request.Path
.Equals(path, StringComparison.OrdinalIgnoreCase))
{
// careful in case class already exists
htmlAttributesDictionary["class"] += " " + activeClassName;
}
var tagBuilder = new TagBuilder("a")
{
InnerHtml = !string.IsNullOrEmpty(linkText)
? HttpUtility.HtmlEncode(linkText)
: string.Empty
};
tagBuilder.MergeAttributes(htmlAttributesDictionary);
tagBuilder.MergeAttribute("href", path);
return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.Normal));
}
Using MVC3 with a Razor View offers another option:
_Layout.cshtml:
<li class="#ViewBag.NavClassHome">#Html.ActionLink("Home", "Index", "Home")</li>
<li class="#ViewBag.NavClassAbout">#Html.ActionLink("Disclaimer", "About", "Home")</li>
HomeController:
public ActionResult Index() {
ViewBag.NavClassHome = "active";
return View();
}
public ActionResult About() {
ViewBag.NavClassAbout = "active";
return View();
}
If you want to preserve this for a postback as well, you have to assign the ViewBag value here as well:
[HttpPost]
public ActionResult Index() {
ViewBag.NavClassHome = "active";
return View();
}
[HttpPost]
public ActionResult About() {
ViewBag.NavClassAbout = "active";
return View();
}
Tested and working fine for me, but you will have a css class name in your server side code.
This should work using jQuery on the client side of things, uses Google to serve the latest jQuery library:
<script src="http://www.google.com/jsapi" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1");</script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var str=location.href.toLowerCase();
$('#menucontainer ul#menu li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$(this).attr("class","current"); //hightlight parent tab
}
});
});
</script>
I wanted to have a bit more control over my layout, and this is what I did.
Create a LayoutModel that other models inherit:
public abstract class LayoutModel
{
public CurrentPage CurrentPage { get; set; }
}
Create a LayoutAttribute that inherits from ActionFilterAttribute like so:
public class LayoutAttribute : ActionFilterAttribute
{
private CurrentPage _currentPage { get; set; }
public LayoutAttribute(
CurrentPage CurrentPage
){
_currentPage = CurrentPage;
}
public override void OnActionExecuted(ActionExecutedContext filterContext)
{
var result = filterContext.Result as ViewResultBase;
if (result == null || result.Model == null || !(result.Model is LayoutModel)) return;
((LayoutModel)result.Model).CurrentPage = _currentPage;
}
}
Now on the Action or Controller level I can set the current page (and other stuff if I wanted) like this:
[Layout(CurrentPage.Account)]
public class MyController : Controller
{
}
In my layout view I now have access to the current page, and whatever else I add to the LayoutModel.
The fact that your View has to know about your controller's actions is breaking with the MVC pattern. Perhaps your controller could pass some "control" information to the view to ultimately allow it to accomplish the same thing, the only difference is who is in charge.
Like in your controller's action you could:
public ActionResult Index(){
ViewData["currentAction"] = "Index";
//... other code
return View();
}
Then over in your view you could:
<% if( ((string)ViewData["currentAction"]) == "Index" {%> <!- some links --><% } %>
<% if( ((string)ViewData["currentAction"]) == "SomethingElse" {%> <!- some links --><% } %>
However, the more I think about it the more I question why you are using the same View for multiple actions. Is the view that similar?
If the use case justifies it then go with my above suggestion. But otherwise perhaps you could break things out into multiple views (one for each controller action) and the problem solves itself.
Based on the previous answers, here is what my current solution is for the same issue:
In the master page I give each li an id that corresponds to the controller and the action, since this should be known from the ActionLink. I was previously doing this with the page title but this helps with organization.
Site.Master:
<ul id="menu">
<li id="menuHomeIndex" runat="server"><%= Html.ActionLink("Home", "Index", "Home") %></li>
<li id="menuHomeAbout" runat="server"><%= Html.ActionLink("About Us", "About", "Home") %></li>
</ul>
Site.Master.cs:
// This is called in Page_Load
private void SetActiveLink()
{
string action = "" + ViewContext.RouteData.Values["controller"] + ViewContext.RouteData.Values["action"];
var activeMenu = (HtmlGenericControl)Page.Master.FindControl("menu" + action);
if (activeMenu != null)
{
activeMenu.Attributes.Add("class", "selected");
}
}
It's more work than the inline code but I think it's cleaner and also lets you have actions with the same name in different controllers. So if you add more menu items with different controllers, not all actions named Index will be highlighted in the menu.
If anyone sees issues with this approach please let me know.
Using MVC3 with a Razor View, you can implement this like:
<ul id="menu">
#if (ViewContext.RouteData.Values["action"].ToString() == "Index")
{
<li class="active">#Html.ActionLink("Home", "Index", "Home")</li>
}
else
{
<li>#Html.ActionLink("Home", "Index", "Home")</li>
}
#if (ViewContext.RouteData.Values["action"].ToString() == "About")
{
<li class="active">#Html.ActionLink("About", "About", "Home")</li>
}
else
{
<li>#Html.ActionLink("About", "About", "Home")</li>
}
</ul>
And then applying your style of your ".active" class like:
ul#menu li.active
{
text-decoration:underline;
}
Here is the version compatible with the current version of MVC4.
I have rewritten Adam Carr's code as an extension method.
using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;
namespace MyApp.Web {
public static class HtmlHelpers {
/// <summary>
/// Returns an anchor element (a element) that contains the virtual path of the
/// specified action. If the controller name matches the active controller, the
/// css class 'current' will be applied.
/// </summary>
public static MvcHtmlString MenuActionLink(this HtmlHelper helper, string linkText, string actionName, string controllerName) {
var htmlAttributes = new RouteValueDictionary();
string name = helper.ViewContext.Controller.GetType().Name;
if (name.Equals(controllerName + "Controller", StringComparison.OrdinalIgnoreCase))
htmlAttributes.Add("class", "current");
return helper.ActionLink(linkText, actionName, controllerName, new RouteValueDictionary(), htmlAttributes);
}
}
}
Hope this will help.
<ul>
<li class="#(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "active" : "")">
<a asp-area="" asp-controller="Home" asp-action="Index"><i class="icon fa fa-home"></i><span>Home</span>
</a>
</li>
</ul>
Try
Should work fine !!!
EDIT : REMOVED IN BETA1
Removed the ViewName property from the ViewContext class.