ASP.NET MVC Active Menu Item with all items targeting same action

Question

I know this question has been asked many times but my scenario is little different from the others. All I want to achieve is to highlight the menu item if the link is a link to the current location. By highlighting I mean I want to attach a class named current to the <li> containing the link. The menu is in Master page which I am populating dynamically by passing list of menu items from Index action method of Home Controller.

Index action (Home Controller)

public ActionResult Index(string city, string adtype)
    {
        if (city == null)
        {
            city = "abc";
        }

        if (adtype == null)
        {
            adtype = "jobs";
        }


        using (var _db = new UPContext())
        {
            var cities = _db.Cities.ToList();
            ViewBag.cities = cities;
        }

        var model = new List<AdPost>();

        using (var _db = new UPContext())
        {
            var cat = _db.AdTypes.Where(a => a.AdTypeName == adtype).SingleOrDefault();
            var adcity = _db.Cities.Where(c => c.CityName == city).SingleOrDefault();

            if ((cat != null) && (city != null))
            {
                model = (from p in _db.Posts
                         where p.City.Id == adcity.Id &&
                         p.AdType.Id == cat.Id
                         select p).ToList();
            }

            ViewBag.adType = adtype;
            ViewBag.City = city;
        }

        return View(model);

    }

In layout.cshtml I am populating the menu using ViewBag.cities

@foreach (var c in ViewBag.cities)
    {

    <li> @Html.ActionLink((string)c.CityName, "Index","Home", new { city = c.CityName, adType="adtype" }, new { @class = "leftnav", data_id= c.Id })</li>
    }

I have configured routing as

 routes.MapRoute(
            name: "CityRoute",
            url: "{city}/{adtype}/",
            defaults: new { controller = "Home", action = "Index", city = UrlParameter.Optional, adtype=UrlParameter.Optional }
            );

All other solutions that I saw on web regarding highlighting current menu item use HTML Helpers which take decision based on the controller and action, but since in my case all the links target the same controller and action, and are different from each other based on the parameters they are passing to the method. I wonder how can I highlight the current menu item.

Any thoughts?

Carlos Corral Carvajal Carlos Corral Carvajal · Accepted Answer · 2013-04-16T09:00:16

You can pass the actual city name in the viewbag:

ViewBag.currentCity = city;

And in the foreach in the view check for the current city:

@foreach (var c in ViewBag.cities)
{
    string cssClass = "leftnav";
    if(c.CityName == ViewBag.currentCity)
    {
        cssClass = "especialCurrentCityClass";
    }
    <li> @Html.ActionLink((string)c.CityName, "Index","Home", new { city = c.CityName,adType="adtype" }, new { @class = cssClass, data_id= c.Id })</li>
}

This is the fastest way for your actual approach, but I think it worth to make a view model class to hold the menu items with the neccesary information to draw the whole menu, so you can keep clean the view.

ASP.NET MVC Active Menu Item with all items targeting same action

1 Answers