Простой способ установить активную вкладку с помощью контроллеров и пользовательского контроля в ASP.NET MVC?

Question

Как создать навигацию с вкладками с выделенной вкладкой «Текущий» в пользовательском интерфейсе?

Answer 1

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

public static string ActiveTab(this HtmlHelper helper, string activeController, string[] activeActions, string cssClass)  
{  
     string currentAction = helper.ViewContext.Controller.  
     ValueProvider.GetValue("action").RawValue.ToString();
     string currentController = helper.ViewContext.Controller.  
     ValueProvider.GetValue("controller").RawValue.ToString();  
     string cssClassToUse = currentController == activeController &&  
                            activeActions.Contains(currentAction)  
                            ? cssClass  
                            : string.Empty;  
     return cssClassToUse;  
} 

Вы можете вызвать этот метод расширения с помощью:

Html.ActiveTab("Home", new string[] {"Index", "Home"}, "active")

Это вернет «active», если мы находимся на HomeController в действии «Index» или «Home». Я также добавил некоторые дополнительные перегрузки в ActiveTab, чтобы упростить их использование. Вы можете прочитать весь пост в блоге по адресу: http://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for-active-tab-in-tab-menu/

Надеюсь, это кому-нибудь поможет.

С уважением, --Tomas

Answer 2

Перед MVC я посмотрел путь к файлу и выяснил, какая вкладка была текущей. Теперь это намного проще, вы можете назначить текущую вкладку на основе текущего контроллера.

Проверьте это ...

Большая часть работы происходит в пользовательском контроле.

public partial class AdminNavigation : ViewUserControl
{
    /// <summary>
    /// This hold a collection of controllers and their respective "tabs." Each Tab should have at least one controller in the collection.
    /// </summary>
    private readonly IDictionary<Type, string> dict = new Dictionary<Type, string>();

    public AdminNavigation()
    {
        dict.Add(typeof(BrandController), "catalog");
        dict.Add(typeof(CatalogController), "catalog");
        dict.Add(typeof(GroupController), "catalog");
        dict.Add(typeof(ItemController), "catalog");
        dict.Add(typeof(ConfigurationController), "configuration");
        dict.Add(typeof(CustomerController), "customer");
        dict.Add(typeof(DashboardController), "dashboard");
        dict.Add(typeof(OrderController), "order");
        dict.Add(typeof(WebsiteController), "website");
    }

    protected string SetClass(string linkToCheck)
    {
        Type controller = ViewContext.Controller.GetType();
        // We need to determine if the linkToCheck is equal to the current controller using dict as a Map
        string dictValue;
        dict.TryGetValue(controller, out dictValue);

        if (dictValue == linkToCheck)
        {
            return "current";
        }
        return "";
    }
}

Затем в вашей .ascx части usercontol вызовите метод SetClass, чтобы проверить связь с dict. Вот так:

<li class="<%= SetClass("customer") %>"><%= Html.ActionLink<CustomerController>(c=>c.Index(),"Customers",new{@class="nav_customers"}) %></li>

Все, что вам сейчас нужно, это CSS, чтобы выделить вашу текущую вкладку. Существует множество способов сделать это, но вы можете начать с некоторых идей здесь: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ О, и не забудьте поместить пользовательский контроль на своей странице (или MasterPage) ...

<% Html.RenderPartial("AdminNavigation"); %>

Answer 3

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

Сначала помощник HTML, который возвращает строку, представляющую текущий контроллер и действие:

public static string BodyClass(RouteData data) {
   return string.Format("{0}-{1}", data.Values["Controller"], data.Values["Action"]).ToLower();
}

Затем добавьте вызов этому помощнику на своей главной странице:

<body class="<%=AppHelper.BodyClass(ViewContext.RouteData) %>">
...
</body>

Теперь вы можете настроить таргетинг на определенные страницы с помощью CSS. Чтобы ответить на ваш точный вопрос о навигации:

#primaryNavigation a { ... }
.home-index #primaryNavigation a#home { ... }
.home-about #primaryNavigation a#about { ... }
.home-contact #primaryNavigation a#contact { ... }
/* etc. */

Answer 4

По умолчанию MVC Site.css поставляется с классом 'selectedLink', который должен использоваться для этого.

Добавьте следующее в список ul в _Layout.cshtml:

@{
    var controller = @HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString();
}
<ul id="menu">                
    <li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = controller == "Home" ? "selectedLink" : "" })</li>
    ...
</ul>

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