Skip to content

Instantly share code, notes, and snippets.

@MuhammadKhizar7
Created April 29, 2021 00:59
Show Gist options
  • Save MuhammadKhizar7/caf894b6857a13544c2e609dab47310f to your computer and use it in GitHub Desktop.
Save MuhammadKhizar7/caf894b6857a13544c2e609dab47310f to your computer and use it in GitHub Desktop.
To add Active class on nav link in asp.net core
[HtmlTargetElement(Attributes = "is-active-route")]
public class ActiveRouteTagHelper : TagHelper
{
private IDictionary<string, string> _routeValues;
/// <summary>The name of the action method.</summary>
/// <remarks>Must be <c>null</c> if <see cref="P:Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Route" /> is non-<c>null</c>.</remarks>
[HtmlAttributeName("asp-page")]
public string Page { get; set; }
/// <summary>The name of the action method.</summary>
/// <remarks>Must be <c>null</c> if <see cref="P:Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Route" /> is non-<c>null</c>.</remarks>
[HtmlAttributeName("asp-action")]
public string Action { get; set; }
/// <summary>The name of the controller.</summary>
/// <remarks>Must be <c>null</c> if <see cref="P:Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper.Route" /> is non-<c>null</c>.</remarks>
[HtmlAttributeName("asp-controller")]
public string Controller { get; set; }
/// <summary>Additional parameters for the route.</summary>
[HtmlAttributeName("asp-all-route-data", DictionaryAttributePrefix = "asp-route-")]
public IDictionary<string, string> RouteValues
{
get
{
if (this._routeValues == null)
this._routeValues =
(IDictionary<string, string>) new Dictionary<string, string>(
(IEqualityComparer<string>) StringComparer.OrdinalIgnoreCase);
return this._routeValues;
}
set { this._routeValues = value; }
}
/// <summary>
/// Gets or sets the <see cref="T:Microsoft.AspNetCore.Mvc.Rendering.ViewContext" /> for the current request.
/// </summary>
[HtmlAttributeNotBound]
[ViewContext]
public ViewContext ViewContext { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
base.Process(context, output);
if (ShouldBeActive())
{
MakeActive(output);
}
output.Attributes.RemoveAll("is-active-route");
}
private bool ShouldBeActive()
{
string currentPage = String.Empty;
string currentController = String.Empty;
string currentAction = String.Empty;
if (ViewContext.RouteData.Values["Page"] != null)
{
currentPage = ViewContext.RouteData.Values["Page"].ToString();
}
else
{
currentController = ViewContext.RouteData.Values["Controller"].ToString();
currentAction = ViewContext.RouteData.Values["Action"].ToString();
}
if (!string.IsNullOrWhiteSpace(Page) && Page.ToLower() != currentPage.ToLower())
{
return false;
}
if (!string.IsNullOrWhiteSpace(Controller) && Controller.ToLower() != currentController.ToLower())
{
return false;
}
if (!string.IsNullOrWhiteSpace(Action) && Action.ToLower() != currentAction.ToLower())
{
return false;
}
foreach (KeyValuePair<string, string> routeValue in RouteValues)
{
if (!ViewContext.RouteData.Values.ContainsKey(routeValue.Key) ||
ViewContext.RouteData.Values[routeValue.Key].ToString() != routeValue.Value)
{
return false;
}
}
return true;
}
private void MakeActive(TagHelperOutput output)
{
var classAttr = output.Attributes.FirstOrDefault(a => a.Name == "class");
if (classAttr == null)
{
classAttr = new TagHelperAttribute("class", "active");
output.Attributes.Add(classAttr);
}
else if (classAttr.Value == null || classAttr.Value.ToString().IndexOf("active") < 0)
{
output.Attributes.SetAttribute("class", classAttr.Value == null
? "active"
: classAttr.Value.ToString() + " active");
}
}
}
@MuhammadKhizar7
Copy link
Author

MuhammadKhizar7 commented Apr 29, 2021

use as
<ul class="navbar-nav"> <li class="nav-item" is-active-route asp-action="Index" asp-controller="Search"> <a class="nav-link" asp-action="Index" asp-controller="Search">🔎 Search</a> </li> </ul>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment