मैं एएसपी.नेट एमवीसी में एक टैबड मेनू कैसे बना सकता हूं?

Question

मैं एक टैब्ड मेनू बनाना चाहता हूं जो स्टैक ओवरफ्लो के प्रोफाइल प्रबंधन के समान ही है।

tabbed menu StackOverflow http://img410.imageshack.us/img410/3037/image1nwr.jpg

जब आप यूआरएल को देखो, यह कहा:/उपयोगकर्ताओं/flesym टैब = आँकड़े या टैब = वरीयता?। मैं टैबबड मेनू बनाने में सक्षम था, लेकिन मैं जानना चाहता हूं कि मैं एक एक्शन विधि कैसे कॉल कर सकता हूं और चयनित टैब के आधार पर परिणाम प्रदर्शित कर सकता हूं।

मैंने आंशिक दृश्य का उपयोग करने का प्रयास किया। लेकिन जैसा कि मेरे पेज/उपयोगकर्ता/flesym Mvc.ViewPage (myApplication.Models.User) से विरासत में मिलता है, मैं अपने आंशिक दृश्य में एक और विरासत का उपयोग नहीं कर सकता (उदाहरण के लिए, मैं Mvc.ViewUserControl (myApplication.Models) का उपयोग करना चाहता हूं। स्वरूप))।

इसे कैसे करें इस पर कोई विचार?

Answer 1

बनाएं देखें मॉडल:

public class UserViewModel { 
    public myApplication.Models.User User; 

    public string PartialViewName; 

    public PartialViewModelBase Tab; 
} 

प्रत्येक टैब, PartialViewModelBase से प्राप्त के लिए देखें मॉडल बनाएं:

public abstract class PartialViewModelBase { 
} 

public class Tab1PartialViewModel : PartialViewModelBase { 
    ... 
} 

public class TabNPartialViewModel : PartialViewModelBase { 
    ... 
} 

फिर अपने दृश्य बनाने के लिए और PartialViews दृढ़ता से टाइप किया:

दृश्य:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<UserViewModel>" %> 

PartialViews:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Tab1PartialViewModel>" %> 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TabNPartialViewModel>" %> 

फिर अपने दृश्य में आप अपने आंशिक दृश्य के रूप में उपयोग कर सकते हैं:

<% Html.RenderPartial(Model.PartialViewName, Model.Tab); %> 

अपने नियंत्रक कार्रवाई में:

public ActionResult YourAction(string tab) 
{ 
    // check if tab is valid !!! 

    var model = new UserViewModel { 
     User = new myApplication.Models.User(); 
     PartialViewName = tab; 
     Tab = TabRepository.GetTabByName(tab); 
     /* 
     * or 
     * Tabs = (new Dictionary<string, type> { 
     *  {"Tab1", typeof(Tab1PartialViewName)}, 
     *  {"TabN", typeof(TabNPartialViewName)} 
     *  })[tab]; 
     */ 
    }; 

    Return View(model); 
} 

आशा इस मदद करता है।

Answer 2

वे संभावना jQuery ui टैब का उपयोग कर रहे हैं: http://docs.jquery.com/UI/Tabs

Answer 3

यह दिखता से, टैब में से कोई भी लिंक बंद फायरिंग और इसके लिए HTML को देखकर बिना कुछ भी प्रकट करने लगते हैं, यह सिर्फ लगता है कि वे कर रहे हैं यह देखने के लिए स्टाइल किया गया कि वे कैसे दिखते हैं और केवल विशिष्ट क्वेरी स्ट्रिंग मानों को पास करते हैं।

आपके द्वारा किए जाने वाले कार्यों को प्राप्त करने के लिए आपको निर्दिष्ट क्वेरी स्ट्रिंग मान को पकड़ने की आवश्यकता होगी और फिर उसके परिणामस्वरूप डेटा को तदनुसार सॉर्ट करें।

Answer 4

एक अन्य समाधान एक कस्टम मार्ग (RouteBase से निकाले जाते हैं) बनाने के लिए है कि एक अलग कार्रवाई का चयन करने के लिए क्वेरी स्ट्रिंग का उपयोग करता होगा। प्रत्येक क्रिया में एक अलग दृश्य होगा जो पृष्ठ के लिए सामान्य सामग्री वाले मास्टर पेज का उपयोग करता है।

मूल रूप से आप कार्रवाई "आँकड़े" के साथ "UsersController" "वरीयता", आदि सभी एक कस्टम मार्ग वर्ग है कि आप को क्रियान्वित किया है द्वारा चुना होगा।