Quantcast
Channel: ASP.NET Core
Viewing all articles
Browse latest Browse all 9386

Tag helper to highlight the active page in navbar

$
0
0

I've found and fixed some code that can determine whether a link in the navbar should be highlighted as the active page. It's made as an extension method for IHtmlHelper and needs to be used with the @ syntax like this:

<li class="@Html.GetActiveClass(controllers: "Home", actions: "Index")"><a asp-controller="Home" asp-action="Index">Home</a></li>

The GetActiveClass method returns "active" when the current page is from the "Home" controller and "Index" action, otherwise an empty string.

I'd like to clean this up a little and started looking into creating a TagHelper for that. Unfortunately, the existing method needs access to the ViewContext, provided by the IHtmlHelper instance, to determine the current route values "action" and "controller". This is not available in a TagHelper class and I can't find it elsewhere. Is there another way to determine these values? Is it possible at all to write a TagHelper that can access that information?

Are there other solutions to provide the feature to highlight the active page in the navigation bar? That feature should have been there in the template but its authors seem to have considered it too hard and left it out. So everybody needs to do it on their own now.

Here's my unfinished code for the TagHelper. It probably contains several errors, it's my first TagHelper and I couldn't test it yet.

    [HtmlTargetElement("li", Attributes = "asp-active-controllers,asp-active-actions")]
    public class BootstrapNavBarActiveItemTagHelper : TagHelper
    {
        public string ActiveControllers { get; set; }

        public string ActiveActions { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            string className = GetActiveClass(ActiveControllers, ActiveActions);
            if (className != "")
            {
                output.Attributes["class"] += " " + className;
            }
        }

        private static string GetActiveClass(string controllers = "", string actions = "")
        {
            ViewContext viewContext = html.ViewContext;
            var routeValues = viewContext.RouteData.Values;
            string currentAction = routeValues["action"].ToString();
            string currentController = routeValues["controller"].ToString();

            if (string.IsNullOrEmpty(actions))
                actions = currentAction;
            if (string.IsNullOrEmpty(controllers))
                controllers = currentController;

            var acceptedActions = actions.Trim().Split(',').ToList();
            var acceptedControllers = controllers.Trim().Split(',').ToList();

            return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
                "active" : "";
        }
    }


Viewing all articles
Browse latest Browse all 9386

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>