Как отобразить активную actionlink в MVC

Question

В моем представлении _Layout.cshtml есть несколько ссылок на действия:

    <li>@Html.ActionLink("Signup", "Signup", "Home")</li>
    <li>@Html.ActionLink("Login", "Login", "Home")</li>
    <li>@Html.ActionLink("Home", "Index", "Home")</li>

Я хочу показать Signup ссылка действия в другом цвете, когда он выбран. Как я могу сделать это в ASP.NET MVC?

Answer 1

Просто используйте значения, содержащиеся в ViewContext.RouteData, а именно значения Action и Controller. Мы могли бы опираться на то, что у вас сейчас есть, с чем-то вроде этого

  <li class=@(ViewContext.RouteData.Values["Action"].ToString() == "Signup" ? "active" : "")>@Html.ActionLink("Signup", "Signup", "Home")</li>
  <li class=@(ViewContext.RouteData.Values["Action"].ToString() == "Login" ? "active" : "")>@Html.ActionLink("Login", "Login", "Home")</li>
  <li class=@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")>@Html.ActionLink("Home", "Index", "Home")</li>

если вам нужен контроллер значит просто проверьте состояние

<li class=@(ViewContext.RouteData.Values["controller"].ToString() == "Home" ? "active" : "")>@Html.ActionLink("Home", "Index", "Home")</li>

Answer 2

Ну, быстрый способ - это что-то сигнализировать о том, на какую страницу пользователя похож ViewBag.IsSignupPage и затем используйте этот флаг, чтобы отметить активный / неактивный класс в ссылках:

<li>@Html.ActionLink("Signup", "Signup", "Home", 
   new {@class=((ViewBag.IsSignupPage??false)?"signup-highlight":"normal-link")})</li>

У вас может быть какой-то общий код для определения текущего вида и выделения соответствующей ссылки. Ты можешь использовать ViewContext чтобы получить текущее действие и контроллер в _layout.cshtml использовать на разных страницах.

ViewContext.RouteData.Values["controller"]
ViewContext.RouteData.Values["action"]

Answer 3

Вы можете назначить некоторый класс для ссылки действия, чтобы дать другой цвет, вы можете назначить другой стиль для : active ,: hover,: посещения и т.д.

Html

<li>@Html.ActionLink("Signup", "Signup", 
     new { controller = "Home", id = 1 }, 
     new { @class = "anchor-class" })</li>
<li>@Html.ActionLink("Login", "Login", "Home")</li>
<li>@Html.ActionLink("Home", "Index", "Home")</li>

CSS

.anchor-class 
{
  color:red;
}