Как ввести название действия на главную страницу, чтобы выделить текущее действие в навигационном меню? - PullRequest
Новая
       10

Как ввести название действия на главную страницу, чтобы выделить текущее действие в навигационном меню?

1 голос
/ 16 апреля 2009

Я пытаюсь найти решение (которое не использует javascript) для этой проблемы:

У меня есть главная страница , которая включает в себя меню навигации . Каждый пункт в этом меню является действием.

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

Я мог бы добавить имя действия в модель базового вида (выводя из этого все мои другие модели видов), но подумал, есть ли лучший способ.

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

Мысли

P.S. Я только что заметил, что stackoverflow делает нечто похожее с оранжевой подсветкой в ​​меню выше. Я вижу, что они маркируют классом "вы здесь". Интересно, какой подход они выбрали?

Ответы [ 4 ]

4 голосов
/ 25 июля 2009

То, что я сделал, было так: Я создал свой собственный помощник RenderMenuLink, поэтому вместо вызова 

<li><%= Html.ActionLink("Home", "index", "home")%></li>

Я призываю 

<%= Html.RenderMenuLink("Home", "index", "home")%>

, который в свою очередь добавляет ссылку, и в случае пользователь посещает эту ссылку [1] «выбранный» класс добавляется к атрибуту «класса» элемента списка.

[1]: я достигаю этой функциональности, проверяя, совпадает ли URL-адрес пользователя с URL-адресом, созданным по этой ссылке. Код вставлен ниже: 

    public static class HtmlMenu
    {
        public static string RenderMenuLink(this HtmlHelper html, string title, string action, string controller)
        {
            UrlHelper url = new UrlHelper(html.ViewContext.RequestContext);
            string link = url.Action(action, controller);
            if(String.IsNullOrEmpty(link))
            {
                throw new ArgumentException("No appropriate route found!");
            }

            var cssClass = String.Empty;
            var uriPath = html.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath;
            if((link != "/" && uriPath.StartsWith(link)) || (uriPath == link))
            {
                cssClass = "selected";
            } 
            return String.Format("<li class=\"{0}\"><a href=\"{1}\">{2}</a></li>", cssClass, link, title);
        }
    }
2 голосов
/ 16 апреля 2009

Вы можете использовать CSS для достижения этой цели. Если вы знаете идентификатор элемента, который хотите выделить, добавьте правило CSS в свой вид ... 

#MenuId 
{
color: ...;
etc...
}

уточнить:
Добавьте заполнитель в начало своей мастер-страницы, а затем динамически добавьте раздел стилей в свой вид ...

На главной странице: 

<head id="Head1" runat="server">   
<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>
</head>

В представлении 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
  #<%= Model.IdToHighlight %>
  {
      color:Blue;//or something
  }
</style>
</asp:Content>
1 голос
/ 16 апреля 2009

Я бы посоветовал вам взять шаблон "Оранжевые вкладки" из галереи дизайна mvc и проверить его.

1 голос
/ 16 апреля 2009

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

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

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

Но Я думаю, что наиболее эффективный способ сделать это с помощью javascript, и второй лучший вариант, который у вас есть, как писал Markt.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...