Навигационное меню с подсветкой в ​​Asp.NET MVC?

Question

Это простой вопрос. Как работает stackoverflow в Asp.net MVC с выделением на странице, на которой мы находимся .

Answer 1

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

Это я помещаю поверх моего Partial, который содержит меню для получения действия и контроллера, чтобы я мог передать это расширению.

<%  string currentAction = ViewContext.RouteData.Values["action"].ToString();
    string currentController = ViewContext.RouteData.Values["controller"].ToString(); %>

Это элемент боковой панели, в основном он генерирует тег "li" со ссылкой и вашим пользовательским классом, чтобы указать, используется ли ссылка в данный момент на странице / выделении.

public static string SidebarItem(this System.Web.Mvc.HtmlHelper html, string currentAction, string currentController, string action, string controller, string languageKey, params object[] args)
{
    TagBuilder tb = new TagBuilder("li");
    if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) && string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
    {
        tb.GenerateId("activemenu");
    }
    string text = html.Language(languageKey, args);
    string link = html.ActionLink(text, action, controller).ToHtmlString();
    tb.SetInnerText("{0}");
    return String.Format(tb.ToString(), "<span>"+link+"</span>");
}

а вот фактическое использование кода выше

<%= Html.SidebarItem(currentAction, currentController, "index", "home", "index") %>

Answer 2

Вероятно, нет особой магии MVC, которая бы это делала.

Я уверен:

if( HttpContext.Current.Request.Path == "some some menu url" )

или

if( ViewContext_Or_ControllerContext.RouteData.Values["controller"] == "some value") 

используется где-то.

Вы можете разместить этот код в трех разных местах (View (.aspx), ViewModel, Custom HtmlHelper), и им всем потребуется один и тот же бит кода.

Answer 3

1.Первое создание расширения

public class Extention
{
    public static Dictionary<Menu, Menu> GetDictionary()
    {
        Dictionary<Menu, Menu> urls = new Dictionary<Menu, Menu>();
        urls.Add(new Menu { Controller = "AppHome", Action = "Index" }, new Menu { Controller = "AppHome", Action = "Index" });
        urls.Add(new Menu { Controller = "Home", Action = "Index" }, new Menu { Controller = "Home", Action = "Index" });

        return urls;
    }
}
public static class HtmlExtensions
{
    public static MvcHtmlString ActionMenu(this HtmlHelper helper,String linkText,string actionName,String controllerName)
    {
        var tag= new TagBuilder("li");
        if(helper.ViewContext.RequestContext.IsCurrentRoute(null,controllerName,actionName)||
            helper.ViewContext.RequestContext.IsParentRoute(controllerName,actionName))
        {
            tag.AddCssClass("active");
        }
        else
        {
            tag.AddCssClass("inactive");
        }
        tag.InnerHtml = helper.ActionLink(linkText, actionName, controllerName).ToString();
        return MvcHtmlString.Create(tag.ToString());
    }
}
public static class RequestExtentions
{
    public static bool IsCurrentRoute(this RequestContext context, String areaName)
    {
        return context.IsCurrentRoute(areaName, null, null);
    }
    public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName)
    {
        return context.IsCurrentRoute(areaName, controllerName, null);
    }
    public static bool IsCurrentRoute(this RequestContext context, String areaName, String controllerName, params String[] actionNames)
    {
        var routeData = context.RouteData;
        var routeArea = routeData.DataTokens["area"] as String;
        var current = false;

        if (((String.IsNullOrEmpty(routeArea) && String.IsNullOrEmpty(areaName)) || (routeArea == areaName)) &&
             ((String.IsNullOrEmpty(controllerName)) || (routeData.GetRequiredString("controller") == controllerName)) &&
             ((actionNames == null) || actionNames.Contains(routeData.GetRequiredString("action"))))
        {
            current = true;
        }
        return current;
    }
    public static bool IsParentRoute(this RequestContext context, String controller, String action)
    {
        var routeData = context.RouteData;
        Menu returnUrl = null;
        Menu requestUrl = new Menu { Action = routeData.GetRequiredString("action"), Controller = routeData.GetRequiredString("controller") };
        Menu linkUrl = new Menu { Action = action, Controller = controller };

        var urls = Extention.GetDictionary();
        urls.TryGetValue(requestUrl, out returnUrl);

        if (returnUrl != null && returnUrl.Equals(linkUrl))
            return true;
        else
            return false; ;
    }
}

Answer 4

Лучший способ - создать помощника MVC (см. Предыдущие ответы) Но если вы не хотите делать это и хотите делать быстро - помните о новой функции в MVC 4.0 с установленными атрибутами html-тегов (атрибут будет избегаться, если для него установлено значение null):

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

            string classUpcomingTime = null;
            string classArchive = null;
            string classReporting = null;

            switch (currentAction)
            {
                case "upcomingtime":
                    classUpcomingTime = "active";
                    break;
                case "archive":
                    classArchive = "active";
                    break;
                case "reporting":
                    classReporting = "active";
                    break;
            }

            <ul class="nav navbar-nav">
                <li class="@classUpcomingTime">
                    <a href="/Vacancy/UpcomingTime">Open Vacancies</a>
                </li>
                <li class="@classArchive">
                    <a href="/Vacancy/Archive">Archive</a>

                <li class="@classReporting">
                    @*<a href="#">Reporting</a>*@
                    <a href="/Vacancy/Reporting">Reporting</a>
                </li>
            </ul>
        }

Answer 5

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

SiteMap HtmlHelper ASP.NET MVC содержит некоторую информацию о доступном компоненте.

Answer 6

Если вы посмотрите на источник страницы, они добавили класс css к элементу <li>, чтобы изменить цвет фона. Я предполагаю, что код проверяет, к какому контроллеру обращается пользователь (вопросы, пользователи и т. Д.), И добавляет класс в тег <li> этого раздела.

Answer 7

См., Например, этот URL

http://stackoverflow.com/questions, это указывает на то, что, вероятно, Вопросы Контроллер обрабатывает эту страницу.Таким образом, изменяется Вид для отображения выделенного пункта меню.