Простой способ установить активную вкладку с помощью контроллеров и пользовательского элемента управления в ASP.NET MVC?
Как создать навигацию с вкладками с выделенной вкладкой «Текущая» в пользовательском интерфейсе?
Вопрос был таким большим, а теперь таким маленьким: Ф-ха-ха
Он написал вопрос и ответ в том же посте?
@PatrickDesjardins Да ...
Ответы 4
Перед 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"); %>
IDictionary работает? Похоже, это должен быть Dictionary.
А что насчет того, когда один контроллер выполняет два действия?
@Anthony - этот код работает, сейчас он в разработке. @ Anthony2 - вы имеете в виду, что хотите, чтобы для каждого действия контроллера выделялась отдельная вкладка? Это не поможет. Я бы предложил поместить вашу навигацию для конкретного контроллера в пользовательский элемент управления и объявить, какую вкладку сделать активной при встраивании UC на страницу.
Один метод, который я использую в текущем проекте - он также помогает для других потребностей 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. */
Я написал несколько простых вспомогательных классов для решения этой проблемы. Решение смотрит как на то, какой контроллер используется, так и на то, какое действие в контроллере.
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-jansson Похоже, URL больше не разрешается ... теперь это blog.2mas.xyz/asp-net-mvc-helper-for-active-tab-in-tab-menu (?)
Site.css MVC по умолчанию поставляется с классом '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>
Я знаю, что это не чисто. Но это всего лишь быстрый и грязный способ начать работу, не вмешиваясь в частичные представления или что-то в этом роде.
Пожалуйста, сформулируйте их сначала в форме вопроса, а затем предоставьте ответ в виде отдельного сообщения. Я сниму свой голос против, когда увижу, что вы его исправили. В противном случае мне придется закрыть это как «не настоящий вопрос».