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?
ASP.NET MVC'de denetleyicileri ve usercontrol kullanarak etkin sekmeyi ayarlamanın kolay bir yolu?
cevap
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"); %>
IDictionary çalışıyor mu? Bunun yerine Sözlük olması gerektiği anlaşılıyor. –
Bir denetleyicinin iki eylemi ne zaman? –
@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. –
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:
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
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.
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. –
Onun için düzeltildi. – FlySwat
Soru çok büyüktü ve şu anda çok küçüktü: P haha –