Вопросы Теги

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

Вышеупомянутые ответы предлагают несколько неуклюжие решения по следующим причинам:

  1. Мне не нравится сначала wrap input, а затем получать html, он очень вовлечен и грязный.
  2. Кросс-браузер JS удобен, и кажется, что в этом случае слишком много неизвестных для надежного использования переключения type (что опять-таки немного грязно) и установки value на ''

Итак, я предлагаю вам решение на основе jQuery: 

$('#myinput').replaceWith($('#myinput').clone())

Он делает то, что он говорит, он заменяет ввод самим клоном.

Преимущества:

  1. Простой и понятный код
  2. Нет неуклюжей упаковки или переключения типа
  3. Совместимость с браузером (исправьте меня, если я здесь не прав)

Результат: Счастливый программист

14
задан Jeff Atwood 24 January 2009 в 09:47
поделиться

3 ответа

Перед 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"); %>
10
ответ дан 1 December 2019 в 12:14
поделиться

Один из методов, который я использую в текущем проекте - это также помогает для других специфичных для страницы потребностей 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. */
3
ответ дан 1 December 2019 в 12:14
поделиться

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

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/

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

С уважением, -Томас

10
ответ дан 1 December 2019 в 12:14
поделиться
Другие вопросы по тегам:

Похожие вопросы: