2008-11-13 14 views
13

Kullanıcı arayüzünde vurgulanan "Geçerli" sekmesi ile sekmeli gezinmeyi nasıl oluştururum?ASP.NET MVC'de denetleyicileri ve usercontrol kullanarak etkin sekmeyi ayarlamanın kolay bir yolu?

+0

Lütfen bunları önce bir soru şeklinde ifade edin ve sonra cevabı ayrı bir gönderi olarak belirtin. Sabitlediğimi gördüğümde düşürmeyi kaldırırım. Aksi takdirde 'gerçek bir soru değil' olarak kapatmam gerekecek. –

+1

Onun için düzeltildi. – FlySwat

+0

Soru çok büyüktü ve şu anda çok küçüktü: P haha ​​ –

cevap

10

MVC'den önce Dosya yoluna baktım ve hangi sekmenin geçtiğini anladım. Şimdi çok daha kolay, mevcut kontrol cihazına göre mevcut sekmeyi atayabilirsiniz.

... Check it out Çalışmalarının çoğu

usercontrol olur.

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 ""; 
    } 
} 

Sonra SetClass yöntem haline usercontol aramanın sizin .ascx kesiminde dict karşı bağlantıyı kontrol etmek. Öyleyse:

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

Şimdi ihtiyacınız olanı, geçerli sekmenizi vurgulayan CSS'dir. Bunu yapmanın farklı şekillerde bir grup vardır, ama burada bazı fikirler başlayabilirsiniz: ... http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ Oh ve sayfanızın (veya AnaSayfa) üzerine usercontrol koymak unutmayın

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

IDictionary çalışıyor mu? Bunun yerine Sözlük olması gerektiği anlaşılıyor. –

+0

Bir denetleyicinin iki eylemi ne zaman? –

+1

@Anthony - bu kod çalışıyor, şu an üretimde. @ Anthony2 - Denetleyici eylemi başına vurgulanmış farklı bir sekme mi istiyorsunuz? Bu yardımcı olmayacak. Denetleyiciye özel bir nav'i bir kullanıcı denetimine koymanızı ve sayfada UC'yi yerleştirirken hangi sekmenin etkinleşeceğini bildirmenizi öneririm. –

3

Geçerli bir projede kullanacağım bir yöntem - bu, diğer sayfaya özgü CSS gereksinimlerine de yardımcı olur.

Birincisi, cari denetleyicisi ve eylemi temsil eden bir dize döndürür bir HTML yardımcı: Sonra

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

, efendin sayfasında bu yardımcı bir çağrı ekleyin: Şimdi

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

, Belirli sayfaları CSS'nizle hedefleyebilirsiniz. Gezinme hakkında tam sorunuz için:

10

Bu sorunu çözmek için bazı basit yardımcı sınıfları yazdım. Çözüm, hem hangi kontrolörün hem de kontrolörde hangi işlemin kullanıldığına bakar.

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; 
} 

Sen ile çağrı bu uzantı yöntemi olabilir: Biz ya "Index" in HomeController veya "Ev" eylemi ise

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

Bu "aktif" döndürecektir. Ayrıca, kullanımı daha kolay hale getirmek için ActiveTab'a fazladan aşırı yüklenmeler ekledim, tüm blog yazılarını şu adreste okuyabilirsiniz: http://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for-active-tab-in-tab-menu/

Umut, bu birilerine yardımcı olacaktır.

Selamlar, --Tomas

+0

bir çekicilik gibi çalışır, teşekkürler. – Sotelo

+0

@ tomas-jansson Görünüşe göre URL artık çözülemiyor ... şimdi mi http://blog.2mas.xyz/asp-net-mvc-helper-for-active-tab-in-tab-menu/ (?) – iokevins

+0

@iokevins Doğru –

0

MVC'ın varsayılan Site.css Bunun için kullanılmalıdır 'selectedLink' adında bir sınıf ile birlikte gelir.

_Layout.cshtml içinde ul listesine aşağıdakileri ekleyin:

@{ 
    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> 

bu temiz olmadığını biliyorum. Ama kısmi görüş ya da bu tür herhangi bir şey ile uğraşmadan şeyleri yuvarlamak için sadece hızlı ve kirli bir yol.

İlgili konular