Добавление «активного» тега в список навигации на главной странице asp.net mvc

Question

В проекте MVC asp.net по умолчанию в файле Site.Master есть список навигации по меню:

<div id="menucontainer">
    <ul id="menu">              
        <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
        <li><%= Html.ActionLink("About Us", "About", "Home")%></li>
    </ul>
</div>

В браузере отображается:

<div id="menucontainer"> 
    <ul id="menu">              
        <li><a href="/">Home</a></li> 
        <li><a href="/Home/About">About Us</a></li> 
    </ul> 
</div> 

Я хочу иметь возможность динамически устанавливать активный элемент списка на основе вызываемого представления. То есть, когда пользователь просматривает домашнюю страницу, я бы хотел, чтобы был создан следующий HTML-код:

<div id="menucontainer"> 
    <ul id="menu">              
        <li class="active"><a href="/">Home</a></li> 
        <li><a href="/Home/About">About Us</a></li> 
    </ul> 
</div> 

Я ожидаю, что способ сделать это будет что-то вроде:

<div id="menucontainer">
    <ul id="menu">              
        <li <% if(actionName == "Index"){%> class="active"<%}%>><%= Html.ActionLink("Home", "Index", "Home")%></li>
        <li <% if(actionName == "About"){%> class="active"<%}%>><%= Html.ActionLink("About Us", "About", "Home")%></li>
    </ul>
</div>

Ключевым битом здесь является строка <% if(actionName == "Index"){%> class="active"<%}%>. Я не знаю, как определить текущее имя actionName.

Есть предложения, как это сделать? Или, если я на неправильном пути, есть ли лучший способ сделать это?

Answer 1

Я сделал себе вспомогательный метод для обработки подобных вещей. В коде моей главной страницы (может быть добавлен метод расширения ... возможно, лучший подход), я поместил следующий код.

protected string ActiveActionLinkHelper(string linkText, string actionName, string controlName, string activeClassName)
{
    if (ViewContext.RouteData.Values["action"].ToString() == actionName && 
            ViewContext.RouteData.Values["controller"].ToString() == controlName)
        return Html.ActionLink(linkText, actionName, controlName, new { Class = activeClassName });

    return Html.ActionLink(linkText, actionName, controlName);
}

Тогда я просто называю это на своей странице так:

<%= ActiveActionLinkHelper("Home", "Index", "Home", "selected")%>

Answer 2

В MVC 3 Razor View Engine вы можете сделать это следующим образом:

@{string ctrName = ViewContext.RouteData.Values["controller"].ToString();}

<div id="menucontainer">
  <ul id="menu"> 
    <li @if(ctrName == "Home"){<text> class="active"</text>}>@ Html.ActionLink("Home",  "Index", "Home")</li>
    <li @if(ctrName == "About"){<text> class="active"</text>}>@ Html.ActionLink("About Us", "About", "Home")</li>
  </ul>
</div>

Мой образец работал, когда у меня есть две страницы: Home / About и его контроллер имеет одно и то же имя Index, поэтому я получаю Имя контроллера для различия, гарантированного действием. Если вы хотите получить действие, просто замените его следующим:

@{string ctrName = ViewContext.RouteData.Values["action"].ToString();}

Answer 3

Вы также можете попытаться определить текущую выбранную вкладку по имени контроллера и имени представления, а затем добавить атрибут класса.

public static string MenuActionLink(this HtmlHelper helper, string linkText, string actionName, string controllerName)
{
    var htmlAttributes = new RouteValueDictionary();

    if (helper.ViewContext.Controller.GetType().Name.Equals(controllerName + "Controller", StringComparison.OrdinalIgnoreCase))
    {
        htmlAttributes.Add("class", "current");
    }

    return helper.ActionLink(linkText, actionName, controllerName, new RouteValueDictionary(), htmlAttributes);
}

Answer 4

Внутри представления вы можете получить имя текущего действия с помощью:

ViewContext.RouteData.Values["action"].ToString()

Answer 5

Чтобы добавить свой собственный ответ (протестирован в MVC4), я взял несколько лучших битов из других ответов, исправил несколько проблем и добавил помощника для работы с URL-адресами, которые не обязательно решаются с помощью Controller & Action (например, ... если у вас есть встроенная CMS, работающая с некоторыми ссылками на страницы и т. д.)

Код также доступен на github: https://gist.github.com/2851684

/// 
/// adds the active class if the link's action & controller matches current request
/// 
public static MvcHtmlString MenuActionLink(this HtmlHelper htmlHelper,
    string linkText, string actionName, string controllerName,
    object routeValues = null, object htmlAttributes = null,
    string activeClassName = "active")
{
    IDictionary htmlAttributesDictionary =
        HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);

    if (((string)htmlHelper.ViewContext.RouteData.Values["controller"])
            .Equals(controllerName, StringComparison.OrdinalIgnoreCase) &&
        ((string)htmlHelper.ViewContext.RouteData.Values["action"])
            .Equals(actionName, StringComparison.OrdinalIgnoreCase))
    {
        // careful in case class already exists
        htmlAttributesDictionary["class"] += " " + activeClassName;
    }

    return htmlHelper.ActionLink(linkText, actionName, controllerName,
                                    new RouteValueDictionary(routeValues),
                                    htmlAttributesDictionary);
}

/// 
/// adds the active class if the link's path matches current request
/// 
public static MvcHtmlString MenuActionLink(this HtmlHelper htmlHelper,
    string linkText, string path, object htmlAttributes = null,
    string activeClassName = "active")
{
    IDictionary htmlAttributesDictionary =
        HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
    if (HttpContext.Current.Request.Path
        .Equals(path, StringComparison.OrdinalIgnoreCase))
    {
        // careful in case class already exists
        htmlAttributesDictionary["class"] += " " + activeClassName;
    }
    var tagBuilder = new TagBuilder("a")
                            {
                                InnerHtml = !string.IsNullOrEmpty(linkText)
                                                ? HttpUtility.HtmlEncode(linkText)
                                                : string.Empty
                            };
    tagBuilder.MergeAttributes(htmlAttributesDictionary);
    tagBuilder.MergeAttribute("href", path);
    return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.Normal));
}

Answer 6

Старый вопрос, но, надеюсь, кто-то может найти это очень полезным.

1. Поместите некоторые вещи, которые вы можете использовать для идентификации своей страницы в ViewBag , я использовал ViewgBag.PageName

Например, в index.cshtml введите что-то вроде

@{
    ViewBag.PageName = "Index";
}

2. Добавьте класс к каждому элементу ссылки с условным оператором, чтобы вернуть active , если посещаемая страница имеет требуемое значение, или вернуть пустую строку в противном случае. Подробности смотрите ниже:

<li class="@((ViewBag.PageName == "Index") ? "active" : "")"><a href="@Url.Action("Index","Home")">Home</a></li>
<li class="@((ViewBag.PageName == "About") ? "active" : "")"><a href="@Url.Action("About","Home")">About</a></li>
<li class="@((ViewBag.PageName == "Contact") ? "active" : "")"><a href="@Url.Action("Contact","Home")">Contact</a></li>

Я не просто проверял это, я использую этот метод в своих проектах

Answer 7

Использование MVC3 с Razor View предлагает еще одну опцию:

_Layout.cshtml:

<li class="@ViewBag.NavClassHome">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="@ViewBag.NavClassAbout">@Html.ActionLink("Disclaimer", "About", "Home")</li>

HomeController:

public ActionResult Index() {
    ViewBag.NavClassHome = "active";
    return View();
} 

public ActionResult About() {
    ViewBag.NavClassAbout = "active";
    return View();
}

Если вы хотите сохранить это и для обратной передачи, вам также следует присвоить значение ViewBag:

[HttpPost]
public ActionResult Index() {
    ViewBag.NavClassHome = "active";
    return View();
}

[HttpPost]
public ActionResult About() {
    ViewBag.NavClassAbout = "active";
    return View();
}

Протестировано и работает нормально для меня, но у вас будет имя класса css в коде на стороне сервера.

Answer 8

Я хотел немного больше контролировать свой макет, и это то, что я сделал.

Создайте LayoutModel, которую наследуют другие модели:

public abstract class LayoutModel
{
    public CurrentPage CurrentPage { get; set; }
}

Создайте атрибут LayoutAttribute, который наследуется от ActionFilterAttribute, следующим образом:

public class LayoutAttribute : ActionFilterAttribute
{
    private CurrentPage _currentPage { get; set; }

    public LayoutAttribute(
        CurrentPage CurrentPage
    ){
        _currentPage = CurrentPage;
    }

    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        var result = filterContext.Result as ViewResultBase;
        if (result == null || result.Model == null || !(result.Model is LayoutModel)) return;

        ((LayoutModel)result.Model).CurrentPage = _currentPage;
    }
}

Теперь на уровне Action или Controller я могу установить текущую страницу (и другие вещи, если я хочу) следующим образом:

[Layout(CurrentPage.Account)]
public class MyController : Controller
{

}

В моем представлении макета у меня теперь есть доступ к текущей странице и все, что я добавляю в LayoutModel.

Answer 9

Это должно работать с использованием jQuery на стороне клиента, использует Google для обслуживания новейшей библиотеки jQuery:

<script src="http://www.google.com/jsapi" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1");</script>  

<script language="javascript" type="text/javascript">
      $(document).ready(function(){
          var str=location.href.toLowerCase(); 
        $('#menucontainer ul#menu li a').each(function() {
                if (str.indexOf(this.href.toLowerCase()) > -1) {
                        $(this).attr("class","current"); //hightlight parent tab
                     }  
                });
      });  
    </script>

Answer 10

Вот версия, совместимая с текущей версией MVC4.
Я переписал код Адама Карра как метод расширения.

using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Web.Routing;

namespace MyApp.Web {
    public static class HtmlHelpers {
        /// <summary>
        /// Returns an anchor element (a element) that contains the virtual path of the
        /// specified action. If the controller name matches the active controller, the
        /// css class 'current' will be applied.
        /// </summary>
        public static MvcHtmlString MenuActionLink(this HtmlHelper helper, string linkText, string actionName, string controllerName) {
            var htmlAttributes = new RouteValueDictionary();
            string name = helper.ViewContext.Controller.GetType().Name;

            if (name.Equals(controllerName + "Controller", StringComparison.OrdinalIgnoreCase))
                htmlAttributes.Add("class", "current");

            return helper.ActionLink(linkText, actionName, controllerName, new RouteValueDictionary(), htmlAttributes);
        }
    }
}