ASP.NET MVC Dynamically set CSS Class to list item based on route
صفحه اصلي

ASP.NET MVC Dynamically set CSS Class to list item based on route



I'm looking at the StackOverflow website and I've noticed that there is a Class="youarehere" attribute set to the buttons of active views. This results in the orange styling instead of the grey styling.

Can anybody tell me how they're doing this? What's the easiest way to dynamically set the class based on the URL?


How to redirect the Error page in asp.net mvc

1:

Asp.net MVC custom routing
Writing an html helper for those although tons could be one way of doing it. Calling cached data (in service layer) from an ASP.NET MVC View - what other alternative do we have?Assuming the standard routing is set:. Issue with HTML5 audio control in Visual Studio 2010 and ASP.NET MVC
routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute(     "Default",     "{controller}/{action}/{id}",     new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); 
here's how the helper might look like:. Setting the UpdateCheck.Never mode by default in Visual Studio 2010 DBML designer (MS SQL/ASP.NET MVC)
public static MvcHtmlString MyButton(this HtmlHelper htmlHelper, string id, string text) {     var although ton = new TagBuilder("input");     although ton.MergeAttrialthough e("type", "although ton");     although ton.MergeAttrialthough e("value", text);     // receive  the id from the current route:     var routeId = htmlHelper.ViewContext.RouteData.Values["id"] as string;     if (id == routeId)     {         although ton.MergeAttrialthough e("class", "active");     }     return MvcHtmlString.Create(although ton.ToString(TagRenderMode.SelfClosing)); } 
and finally add to your view:. Why would Application_Init fire twice when starting debugging in VS2008/Casini?
<%= Html.MyButton("questions", "Questions") %> <%= Html.MyButton("tags", "Tags") %> <%= Html.MyButton("users", "Users") %> 
To further improve the helper you could add additional parameters this will contain the action and the controller this although ton will redirect to when clicked.. ASP.Net MVC - Send Javascript Associative array to a controller
Custom View Engine vs Custom Action Result

2:

I would assume the simplest possible way is to place the information in the ViewData from the controller/action telling the view where it is, which is what I do.. In the view, you would receive this data from the ViewData, then figure out which class name to associate to which location. Be sure to use an HTML Helper.. Action under Questions controller:.
public ActionResult Index() {       ViewData["CurrentPage"] = "Questions"; } 
Html Helper:.
public static string GetLocationCssClassName(this HtmlHelper html) {          string cssClass = string.Empty;          if(html.ViewData["CurrentPage"] != null)          {              string currentPage = (string)html.ViewData["CurrentPage"];              switch(currentPage)              {                   case "Questions":                        cssClass = "question_css_class";                        break;                  case "Tags":                        cssClass = "tags_css_class";                        break;                  case "Users":                        cssClass = "users_css_class";                        break;               }          }          return cssClass; } 
View Page:.
<div id="main" class="<%: Html.GetLocationCssClassName() %>">     <a href="Questions/Index" class="questions">Questions</a>    <a href="Tags/Index" class="tags">Tags</a>    <a href="Users/Index" class="users">Users</a>  </div> 
Css:.
.question_css_class a.questions {     background-color: Orange; } 
The code must be improved endlessly, although you receive the gist. Your view has access to ViewData. Designate a specific key this will hold the current page and output the proper class based on the value inside this specific key..

3:

I have an alternative solution. Rather than having the helper class decide which "menu" is the active menu. Decide this in your controller's action. . Your Controller.
public ActionView Questions() {     MyViewModel model = new MyViewModel ();     model.CurrentMenu = "Questions";      ViewData.Model = model; }  public ActionView Tags() {     MyViewModel model = new MyViewModel ();     model.CurrentMenu = "Tags";      ViewData.Model = model; } 
In the View (a strongly typed view).
<div id="menu">         <ul>     <li class="<%= Html.IsSelectedMenu(Model.CurrentMenu,'Questions') %>"<a href="/Home/Questions">Questions</a></li>      <li class="<%= Html.IsSelectedMenu(Model.CurrentMenu,'Tags') %>"<a href="/Home/Tags">Tags</a></li>      </ul> </div>     
In your css.
li.youarehere {     background-color: orange;     color: #ffffff; } 
In your helper class.
public static class MyHtmlExtensions {     public static MvcHtmlString IsSelectedMenu(this HtmlHelper helper, string currentMenu, string menu2)     {         return currentMenu.Equals (menu2)? "youarehere" : "";     } } 

4:

Here's the answer I needed (In VB) Thanks @Darin.
Imports System.Web.Mvc Imports System.Web.Mvc.Html  Namespace Utilities.HtmlHelpers     Public Module PagingHelpers         Sub New()         End Sub          <System.Runtime.CompilerServices.Extension()> _         Public Function CustomLink( _                 ByVal htmlHelper As HtmlHelper, _                 ByVal linkText As String, _                 ByVal actionName As String, _                 ByVal controllerName As String) As MvcHtmlString               Dim currentAction As String = TryCast(htmlHelper.ViewContext.RouteData.Values.Item("action"), String)             Dim currentController As String = TryCast(htmlHelper.ViewContext.RouteData.Values.Item("controller"), String)             If ((actionName = currentAction) AndAlso _                 (controllerName = currentController)) Or _                 ((controllerName = currentController) AndAlso _                 Not controllerName = "Events") Then                 Return htmlHelper.ActionLink( _                     linkText, _                     actionName, _                     controllerName, _                     Nothing, _                     New With { _                         .class = "youarehere" _                     })             End If             Return htmlHelper.ActionLink(linkText, actionName, controllerName)         End Function     End Module  End Namespace 

5:

you could create a HtmlHelper to return the value, this way you must use it anywhere. Create a “HtmlHelpers” folder in your project Create a static class Define a static method with the first parameter “this HtmlHelper helper“.
using System; using System.Collections.Generic; using System.Web; using System.Web.Mvc;  namespace ThisMVCApp.WebUI.HtmlHelpers {   public static class HtmlHelperExtensions   {     public static string IfActive(this HtmlHelper helper, string controller, string action)     {       string classValue = "";        string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();       string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();        if (currentController == controller && currentAction == action)       {         classValue = "youarehere";       }        return classValue;     }   } } 
Add this to your web.config file (the one in your Views folder!!).
<system.web.webPages.razor>   <host ... />   <pages pageBaseType="System.Web.Mvc.WebViewPage">     <namespaces>       ...       <add namespace="ThisMVCApp.WebUI.HtmlHelpers" />     </namespaces>   </pages> </system.web.webPages.razor> 
now you must just apply the above method as any class or attrialthough e on although tons or any element like so :.
<nav>   <ul id="menu">     <li class="@Html.IfActive("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li>     <li class="@Html.IfActive("Home", "About")">@Html.ActionLink("About", "About", "Home")</li>  </ul> </nav> 


78 out of 100 based on 63 user ratings 738 reviews

^