ASP.NET MVC - отображение текущей страницы в навигации

Мне интересно, как можно добавить CSS-класс на текущую страницу в вашей навигации при использовании ASP.NET MVC 3? Вот моя навигация в файле _Layout.cshtml:

<p>@Html.ActionLink("Product Search", "Index", new { controller = "Home" }, new { @class = "current" })
                | @Html.ActionLink("Orders", "Index", new { controller = "Orders" }) 
                | @Html.ActionLink("My Account", "MyAccount", new { controller = "Account" })
                | @Html.ActionLink("Logout", "LogOff", new { controller = "Account" })</p>

Как вы можете видеть, у меня есть 4 ссылки в моей навигации с первым, у которого применяется класс CSS "current", я хотел бы иметь возможность добавлять/удалять этот класс в разные ссылки в моей навигации в зависимости от того, на какой странице находится пользователь. Возможно ли это?

Приветствия

Ответ 1

Я бы рекомендовал использовать для этого метод расширения. Что-то вроде:

public static HtmlString NavigationLink(
    this HtmlHelper html,
    string linkText,
    string actionName,
    string controllerName)
{
    string contextAction = (string)html.ViewContext.RouteData.Values["action"];
    string contextController = (string)html.ViewContext.RouteData.Values["controller"];

    bool isCurrent =
        string.Equals(contextAction, actionName, StringComparison.CurrentCultureIgnoreCase) &&
        string.Equals(contextController, controllerName, StringComparison.CurrentCultureIgnoreCase);

    return html.ActionLink(
        linkText,
        actionName,
        controllerName,
        routeValues: null,
        htmlAttributes: isCurrent ? new { @class = "current" } : null);
}

Затем вы можете использовать его в своем представлении, указав пространство имен своего расширения и просто назовете свой метод:

@using MyExtensionNamespace;

...

  @Html.NavigationLink("Product Search", "Index", "Home")
| @Html.NavigationLink("Orders", "Index", "Orders") 
| @Html.NavigationLink("My Account", "MyAccount", "Account")
| @Html.NavigationLink("Logout", "LogOff", "Account")

Это помогает сохранить вашу бритву немного чище и легко можно использовать повторно в других видах.

Ответ 2

Вы можете сделать это

@{ 
   var currentController = ViewContext.RouteData.Values["controller"] as string ?? "Home";
   var currentAction = ViewContext.RouteData.Values["action"] as string ?? "Index";
   var currentPage = (currentController + "-" + currentAction ).ToLower();
}

@Html.ActionLink("Product Search", "Index", "Home", null,
                 new { @class = currentPage == "home-index" ? "current" : "" })
@Html.ActionLink("MyAccount", "MyAccount", "Account", null,
                  new { @class = currentPage == "account-myaccount" ? "current" : "" })

Ответ 3

@{
   var controller = ViewContext.RouteData.Values["controller"].ToString();
   var action = ViewContext.RouteData.Values["action"].ToString();
   var isActiveController = new Func<string, string, string, string, string>((ctrl, act, activeStyle, inactiveStyle) => controller == ctrl && action == act ? activeStyle : inactiveStyle);
 }

Затем в вашем атрибуте class в вашем HTML вы можете сделать:

class="@isActiveController("controlername","action","activecssstyleclass","inactiveccsstyle")"

Просто другой способ @dknaack его ответа.. бит более общий и меньше функциональности, чтобы повторить в вашем коде.

Ответ 4

Я использовал этот учебник, чтобы сделать это, его намного проще понять и занимает 2 минуты Hightlight Активный пункт меню

Ответ 5

В моем случае предположим, что у меня есть домашняя страница и меню.

Добавьте ViewBag.Active в качестве заполнителя на домашней странице, например:

@{
   ViewBag.Title = "Home";
   ViewBag.Active = "Home";
}

Затем поместите его в класс li как условие для его активного или нет:

 <li class="@(ViewBag.Active=="Home"? "active" : "")">
      <a href="@Url.Action("Index", "Home")"><span>@ViewBag.Title</span></a>
 </li>