0

I have a extension method which is as follows:

public static MvcHtmlString IsSelected(this HtmlHelper htmlHelper, string controller, string action)
{
   var routeData = htmlHelper.ViewContext.RouteData;

   var routeAction = routeData.Values["action"].ToString();
   var routeController = routeData.Values["controller"].ToString();

   return controller == routeController && action == routeAction 
        ? MvcHtmlString.Create("is-selected") 
        : MvcHtmlString.Create("is-not-selected");
}

as you can see it's fairly straight forward and does not do anything fancy. This is called in the _Layout as:

<li class="@Html.IsSelected("Common", "Active")">@Html.ActionLink("Active", "Active", "Common")</li>
<li class="@Html.IsSelected("Common", "Completed")">@Html.ActionLink("Completed", "Completed", "Common")</li>

This then adds the relevant class to the li item which is styled in the css as:

.is-selected {
  border-bottom: 3px solid;
}

The end result is that the is-selected navigation item has a border for a better ux. This all works fine. However, on the Active and Completed views have an overview of bunch of items where the user can click on each item and get a more in depth detail. On click of the item the user is navigated to Common/ItemDetails/itemId

Now the issue I am facing is that when the user clicks on an item in either from Active or Completed view neither of the li items contain a border. Can someone tell how I can achieve this please.

The desired behaviour I am after is if the user clicks on an item from Active view and gets navigated to Common/ItemDetails/itemId then the Active li has a border and the same behaviour for Completed view

Izzy
  • 6,740
  • 7
  • 40
  • 84
  • There are a few issues with your extension method including that is does not work for child actions. Refer [this answer](https://stackoverflow.com/questions/20410623/how-to-add-active-class-to-html-actionlink-in-asp-net-mvc) for a better solution –  Mar 05 '18 at 09:04
  • @StephenMuecke Thank you for pointing me to this. But I still face the same issue as the Active and Completed items both get a border now at the same time – Izzy Mar 05 '18 at 09:27
  • I assume by that you used the code in the link and added multiple controller/action names? (I was not suggesting that). Are you wanting to highlight based on the previous page? –  Mar 05 '18 at 09:34
  • @StephenMuecke Sorry my bad I thought you was suggesting that. Yes that is what I am after – Izzy Mar 05 '18 at 09:36
  • You can use `UrlReferrer` of `Request` (`htmlHelper.ViewContext.HttpContext.Request.UrlReferrer`) to get the values you want, but it will only have a value if a link is clicked (if the user types it the address bar, or navigates via a bookmark, then it will be `null`) –  Mar 05 '18 at 09:42
  • @StephenMuecke Thanks, what would be the best approach for this problem? The answer provided in the link works fine for all of the other controller/actions just he completed and Active are not working as required. Due to user being able to navigate ItemDetails action from both of the views – Izzy Mar 05 '18 at 09:48
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166229/discussion-between-stephen-muecke-and-code). –  Mar 05 '18 at 09:49

0 Answers0