Asp.Net Mvc выделяет метод ссылки на текущую страницу?

Мне нужно выделить активную ссылку в меню. Кстати, мое меню находится на главной странице. Ищу как лучше это реализовать? Любые идеи?


person beratuslu    schedule 04.09.2010    source источник
comment
Как вы храните пункты меню? Вы можете связать их с контроллером и действием и выделить их на основе этих значений.   -  person LukLed    schedule 05.09.2010
comment
Я храню их на мастер-странице как статические.   -  person beratuslu    schedule 05.09.2010
comment
Уже здесь? См .: stackoverflow.com/questions/1471362/   -  person thmshd    schedule 14.11.2010


Ответы (6)


Лучший способ справиться с этим - написать помощник HTML. Вы можете использовать RouteData.Values["action"], чтобы получить текущее выполняемое действие и сравнить его с именем меню, и, если они совпадают, применить класс CSS, который выделит его.

public static MvcHtmlString MenuItem(
    this HtmlHelper htmlHelper, 
    string action, 
    string text
)
{
    var menu = new TagBuilder("div");
    var currentAction = (string)htmlHelper.ViewContext.RouteData.Values["action"];
    if (string.Equals(
            currentAction, 
            action,
            StringComparison.CurrentCultureIgnoreCase)
    )
    {
        menu.AddCssClass("highlight");
    }
    menu.SetInnerText(text);
    return MvcHtmlString.Create(menu.ToString());
}

А затем используйте этот помощник для рендеринга пунктов меню:

<%: Html.MenuItem("about", "About us") %>
<%: Html.MenuItem("contact", "Contact us") %>
...
person Darin Dimitrov    schedule 04.09.2010
comment
Привет, Дарин. Где разместить помощников по HTML? Новая папка, а затем использовать импорт, чтобы включить ее? Как я могу это использовать? Спасибо. - person user1477388; 12.09.2012
comment
Нет никакого соглашения или конкретного места для размещения пользовательских помощников HTML. Лично я помещаю методы расширения в папку Helpers. - person Darin Dimitrov; 18.12.2012

Я всегда использую это решение Html Part

<ul>
   @Html.ListItemAction("Home Page","Index","Home")
   @Html.ListItemAction("Manage","Index","Home")
</ul>

Вспомогательная часть

 public static class ActiveLinkHelper
    { 
      public static MvcHtmlString ListItemAction(this HtmlHelper helper, string name, string actionName, string controllerName)
      {
        var currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
        var currentActionName = (string)helper.ViewContext.RouteData.Values["action"];
        var sb = new StringBuilder();
        sb.AppendFormat("<li{0}", (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
                                            currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase)
                                                ? " class=\"active\">" : ">"));
        var url = new UrlHelper(HttpContext.Current.Request.RequestContext);
        sb.AppendFormat("<a href=\"{0}\">{1}</a>", url.Action(actionName, controllerName), name);
        sb.Append("</li>");
        return new MvcHtmlString(sb.ToString());
   }
}
person İbrahim Özbölük    schedule 13.04.2013

Я использую это решение:

Во-первых, добавьте атрибут data-menuPageId к ссылкам в меню.

<ul class="menu">
   <li data-menuPageId="home">
            @(Html.Link<HomeController>(x => x.Index(), "Home"))
   </li>
   <li data-menuPageId="products">
            @(Html.Link<ProductsController>(x => x.Index(), "Products"))
   </li>
</li>

Далее - добавить скрытое поле для идентификатора текущей страницы в Layout.cshtml

<input type="hidden" id="currentPageId" value="@(ViewBag.Page ?? "home")" />

Добавьте инициализацию ViewBag.Page на свои страницы, такие как Home или Products

@{
    ViewBag.Page = "products";
}

И последнее, что вы должны ссылаться на этот javascipt из своего Layout.cshtml

$(function() {
    var pageIdAttr = "data-menuPageId";
    var currentPage = $("#currentPageId").attr("value");

    var menu = $(".menu");

    $("a[" + pageIdAttr + "]").removeClass("selected");
    $("a[" + pageIdAttr + "=\"" + currentPage + "\"]", menu).addClass("selected");
});
person Serhiy    schedule 10.05.2012

Самое простое решение:

1) Подключите jQuery к @RenderBody ()

2) На макете

...                        
<li class="nav-item">
    <a class="nav-link text-dark" id="navItemPortfolio" asp-area="" asp-controller="Home" asp-action="Portfolio">Portfolio</a>
</li>

...

3) Напишите что-нибудь подобное на своей странице (Просмотр)

<script>
    $(function () {
        $("#navItemPortfolio").addClass("active");
    });
</script>
person Алексей Буров    schedule 26.09.2019

Я почти уверен, что вы можете сделать это с помощью чистого CSS. Он включает в себя селекторы классов и треп с тегом body. Я бы использовал вспомогательный метод каждый день недели.

person nick    schedule 15.01.2011

В макете попробуйте следующее:

@{
    string url = Request.RawUrl;
}
@switch (url)
{
    case "/home/":                
         @Html.ActionLink("Home", "../home/", null, new { @style = "background:#00bff3;" })
         @Html.ActionLink("Members", "../home/MembersList/")
    break;
    case "/home/MembersList/":
         @Html.ActionLink("Home", "../home/")
         @Html.ActionLink("Members", "../home/MembersList/", null, new { @style = "background:#00bff3;" })
    break;
    default:
            @Html.ActionLink("Home", "../home/")
            @Html.ActionLink("Members", "../home/MembersList/")
    break;
}
person Samiey Mehdi    schedule 16.01.2014