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

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

Ответы

Ответ 1

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

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

Большая часть работы выполняется в usercontrol.

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/ О, и не забудьте поставить usercontrol на свою страницу (или MasterPage)...

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

Ответ 2

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

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")

Это вернет "активное", если мы находимся на HomeController либо в "Index", либо в "Home". Я также добавил некоторые дополнительные перегрузки в ActiveTab, чтобы упростить их использование, вы можете прочитать всю запись в блоге: http://www.tomasjansson.com/blog/2010/05/жереха-сетчатая MVC-хелперы-для-активной вкладки-в-разделители-меню/

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

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

Ответ 3

Один метод, который я использую для текущего проекта - это также помогает для других потребностей CSS в 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. */

Ответ 4

MVC default 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>

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