2008-11-13 9 views
13

मैं यूआई में हाइलाइट किए गए "वर्तमान" टैब के साथ टैबड नेविगेशन कैसे बना सकता हूं?एएसपी.नेट एमवीसी में नियंत्रकों और उपयोगकर्ता नियंत्रण का उपयोग कर सक्रिय टैब सेट करने का एक आसान तरीका है?

+0

कृपया पहले किसी प्रश्न के रूप में वाक्यांश करें, और फिर उत्तर को एक अलग पोस्ट के रूप में प्रदान करें। जब मैं देखता हूं कि आपने इसे ठीक कर दिया है तो मैं अपना डाउनवोट हटा दूंगा। अन्यथा मुझे इसे 'असली सवाल नहीं' के रूप में बंद करना होगा। –

+1

उसके लिए इसे फिक्स्ड। – FlySwat

+0

सवाल इतना बड़ा था और अब इतना छोटा था: पी हाहा –

उत्तर

10

एमवीसी से पहले मैंने फ़ाइल पथ को देखा और यह पता लगाया कि कौन सा टैब घुमावदार था। अब यह बहुत आसान है, आप वर्तमान नियंत्रक के आधार पर वर्तमान टैब असाइन कर सकते हैं।

इसे बाहर की जाँच करें ...

काम के अधिकांश 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 भाग में सेटक्लास विधि में कॉल के खिलाफ लिंक की जांच करने के लिए कॉल करें। इसलिए जैसा:

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

तुम सब अब जरूरत सीएसएस अपने वर्तमान टैब को उजागर करना है। यह करने के लिए अलग अलग तरीकों का एक समूह रहे हैं, लेकिन आप कुछ विचार यहाँ के साथ शुरू कर सकते हैं: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ ओह, और भूल नहीं है अपने पृष्ठ (या masterpage) पर usercontrol डाल करने के लिए ...

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

क्या आईडीआईआर काम करता है? ऐसा लगता है कि यह इसके बजाय शब्दकोश होना चाहिए। –

+0

जब एक नियंत्रक के दो कार्य होते हैं तो क्या होता है? –

+1

@ एंथनी - यह कोड काम करता है, यह अब उत्पादन में है। @ एंथनी 2 - आपका मतलब है कि आप प्रति नियंत्रक कार्रवाई पर हाइलाइट किए गए एक अलग टैब चाहते हैं? यह उसकी मदद नहीं करेगा। मैं आपके नियंत्रक विशिष्ट नेविगेशन को उपयोगकर्ता नियंत्रण में डालने का सुझाव देता हूं और पृष्ठ में यूसी एम्बेड करते समय सक्रिय करने के लिए कौन सा टैब सक्रिय करता हूं। –

3

एक विधि जो मैं वर्तमान प्रोजेक्ट पर उपयोग कर रहा हूं - यह अन्य पेज-विशिष्ट सीएसएस जरूरतों के लिए भी मदद करता है।

सबसे पहले, एक 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> 

अब, आप अपने सीएसएस के साथ विशिष्ट पृष्ठों को लक्षित कर सकते हैं। नेविगेशन के बारे में अपने सटीक सवाल का जवाब करने के लिए:

#primaryNavigation a { ... } 
.home-index #primaryNavigation a#home { ... } 
.home-about #primaryNavigation a#about { ... } 
.home-contact #primaryNavigation a#contact { ... } 
/* etc. */ 
10

मैं इस समस्या को हल करने के लिए कुछ सरल सहायक वर्गों लिखा था। समाधान दोनों नियंत्रक जो कि नियंत्रक में कौन सी कार्रवाई के साथ प्रयोग किया जाता है, दोनों को देखता है।

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 या "घर" कार्रवाई पर हैं यह "सक्रिय" वापस आ जाएगी। मैंने इसे सक्रिय करने के लिए ActiveTab में कुछ अतिरिक्त ओवरलोड भी जोड़े हैं, आप पूरे ब्लॉग पोस्ट को http://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for-active-tab-in-tab-menu/

उम्मीद कर सकते हैं कि इससे किसी की मदद मिलेगी।

सादर, --Tomas

+0

एक आकर्षण की तरह काम करता है, धन्यवाद। – Sotelo

+0

@ tomas-jansson ऐसा लगता है कि यूआरएल अब हल नहीं होता है ... क्या यह अब http://blog.2mas.xyz/asp-net-mvc-helper-for-active-tab-in-tab-menu/ (?) – iokevins

+0

@iokevins यह सही है –

0

MVC के डिफ़ॉल्ट Site.css'selectedLink' नाम के एक वर्ग है जो इस के लिए इस्तेमाल किया जाना चाहिए साथ आता है।

_Layout.cshtml में अपने ul सूची में निम्नलिखित जोड़ें:

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

मैं जानता हूँ कि यह साफ नहीं है। लेकिन आंशिक विचारों या उस तरह के किसी भी प्रकार के साथ गड़बड़ किए बिना चीज़ों को घुमाने के लिए बस एक त्वरित और गंदा तरीका।

संबंधित मुद्दे

 संबंधित मुद्दे