फायदे और नुकसान के साथ Asp.Net MVC में ड्रॉप-डाउन सूची दिखाने के पांच तरीके

Asp.Net MVC के अधिकांश परिचय यह वर्णन करते हैं कि किसी मॉडल के बंधन को सरल इनपुट फ़ील्ड में कैसे व्यवस्थित किया जाए, जैसे कि टेक्स्ट या चेकबॉक्स। यदि आप एक निडर कोडर हैं, तो इस चरण में महारत हासिल है, और यह पता लगाना चाहते हैं कि ड्रॉप-डाउन सूचियों, चेकबॉक्स या रेडियो बटन सूचियों को कैसे दिखाना है, यह पोस्ट आपके लिए है।

समस्या का बयान

हमारे पास फिल्मों का एक डेटाबेस है जिसके बारे में हम नाम और शैली जानते हैं। मैं फिल्म के बारे में जानकारी के संपादक को दिखाना चाहता हूं, जिनकी शैलियों को सूची से चुना गया है। समस्या यह है कि हमारे व्यू में फिल्म से संबंधित डेटा और शैलियों की सूची दोनों होनी चाहिए। इसके अलावा, फिल्म के बारे में डेटा जो हम दिखाते हैं उसे संदर्भित करता है, और शैलियों की सूची यह संदर्भित करती है कि हम अपनी जानकारी को कैसे संपादित करते हैं।

पहला तरीका। कुरूप।

हम नियंत्रक के माध्यम से फिल्म के बारे में डेटा ट्रांसफर कर सकते हैं, और हमारा दृष्टिकोण अपने आप शैलियों की सूची निकाल देगा। यह स्पष्ट है कि यह सभी बोधगम्य सिद्धांतों का उल्लंघन है, लेकिन विशुद्ध रूप से सैद्धांतिक रूप से ऐसी संभावना है।



हमारे पास मॉडल के ऐसे वर्ग हैं:

public class MovieModel { public string Title { get; set; } public int GenreId { get; set; } } public class GenreModel { public int Id { get; set; } public string Name { get; set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

नियंत्रक विधि, जैसा कि शुरुआती मार्गदर्शकों में है:

  public ActionResult TheUgly(){ var model = Data.GetMovie(); return View(model); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहां, डेटा सिर्फ एक स्थिर वर्ग है जो हमें डेटा देता है। यह पूरी तरह से चर्चा में आसानी के लिए आविष्कार किया गया था, और मैं वास्तविक जीवन में इस तरह का उपयोग करने की सिफारिश नहीं करूंगा:

  public static class Data { public static MovieModel GetMovie() { return new MovieModel {Title = "Santa Barbara", GenreId = 1}; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब हम अपने भयानक दृश्य, या यों कहें कि इसके उस हिस्से को देखते हैं जो शैलियों की सूची की चिंता करता है। अनिवार्य रूप से, हमारे कोड को सभी शैलियों को बाहर निकालना चाहिए और उन्हें SelectListItem के तत्वों में बदलना चाहिए।

  <% var selectList = from genre in Data.GetGenres() select new SelectListItem {Text = genre.Name, Value = genre.Id.ToString()}; %> <%:Html.DropDownListFor(model => model.GenreId, selectList, "choose") %>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यहाँ क्या भयानक है? तथ्य यह है कि मेरी राय में Asp.Net MVC का मुख्य लाभ यह है कि हमारे पास कर्तव्यों (एसओसी) का स्पष्ट पृथक्करण है। विशेष रूप से, यह नियंत्रक है जो एक दृश्य में डेटा संचारित करने के लिए जिम्मेदार है। बेशक, यह हठधर्मिता नहीं है, लेकिन सिर्फ एक अच्छा नियम है। इसका उल्लंघन करते हुए, आप अपने सबमिशन में अनावश्यक कोड के एक समूह को घुमा देने का जोखिम चलाते हैं, और एक साल में छंटनी करते हैं जो कि बहुत मुश्किल होगा।



प्लस : सरल नियंत्रक।

माइनस : नियंत्रक के लिए विशिष्ट कोड दृश्य में हो जाता है; एमवीसी मॉडल के सिद्धांतों का प्रमुख उल्लंघन।

कब उपयोग करें : यदि आपको जल्दी से एक डेमो स्केच करने की आवश्यकता है।

दूसरा तरीका। बुरा है।

पहले की तरह, हम नियंत्रक के माध्यम से मानक तरीके से मॉडल को स्थानांतरित करते हैं। हम ViewData के माध्यम से सभी अतिरिक्त डेटा संचारित करते हैं। यहां हमारे पास नियंत्रक विधि है:

  public ActionResult TheBad() { var model = Data.GetMovie(); ViewData["AllGenres"] = from genre in Data.GetGenres() select new SelectListItem {Text = genre.Name, Value = genre.Id.ToString()}; return View(model); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह स्पष्ट है कि सामान्य स्थिति में, हम ViewData में कुछ भी ढेर कर सकते हैं। इसके अलावा हम इस सभी व्यवसाय को देखने में उपयोग करते हैं:

 <%:Html.DropDownListFor(model => model.GenreId, (IEnumerable<SelectListItem>) ViewData["AllGenres"], "choose")%>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्लस : "क्या" और "कैसे" के डेटा को स्पष्ट रूप से अलग किया गया है: पहला मॉडल में संग्रहीत है, दूसरा व्यूडाटा में।

विपक्ष : डेटा अलग हो गया है, लेकिन नियंत्रक विधि "अतिभारित" है: यह एक बार में दो (और भविष्य में - कई) चीजों से संबंधित है; इसके अलावा, किसी कारण से मेरे पास समस्याओं को हल करने के साधन के रूप में ViewData के लिए एक सहज दृष्टिकोण है। हालाँकि गतिशील भाषाओं के प्रस्तावक आनंद के साथ ViewData का आनंद ले सकते हैं।

कब उपयोग करें : एक या दो सूचियों के साथ छोटे रूपों में।

तीसरा तरीका। अच्छा है।

हम एक मॉडल का उपयोग करते हैं जिसमें सभी आवश्यक डेटा होते हैं। जैसे किसी किताब में।

  public class ViewModel { public MovieModel Movie { get; set; } public IEnumerable<SelectListItem> Genres { get; set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अब नियंत्रक का कार्य इस मॉडल को उपलब्ध आंकड़ों से बनाना है:

 public ActionResult TheGood() { var model = new ViewModel(); model.Movie = Data.GetMovie(); model.Genres = from genre in Data.GetGenres() select new SelectListItem {Text = genre.Name, Value = genre.Id.ToString()}; return View(model); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्लस : एमवीसी पैटर्न का विहित कार्यान्वयन (यह अच्छा नहीं है क्योंकि यह अच्छा है, लेकिन क्योंकि यह अन्य डेवलपर्स के लिए विषय में प्रवेश करना आसान होगा)।

विपक्ष : पिछले उदाहरण के रूप में, नियंत्रक विधि अतिभारित है: यह "क्या" और "कैसे" के बारे में चिंतित है; इसके अलावा, एक ही "क्या" और "कैसे" एक ही ViewModel वर्ग में जुड़े हुए हैं।

कब उपयोग करें : एक से तीन सूचियों और अन्य गैर-मानक इनपुट तत्वों के साथ छोटे और मध्यम रूपों में।

चौथा रास्ता। मुश्किल है।

एक और "बैक डोर" है, जिसके माध्यम से आप व्यू को डेटा डिलीवर कर सकते हैं - यह रेंडरएक्शन विधि है। इस पद्धति के उल्लेख पर कई मुस्कुराहट के साथ, क्योंकि, क्लासिक्स के अनुसार, व्यू को नियंत्रक के बारे में पता नहीं होना चाहिए। मेरे लिए व्यक्तिगत रूप से, यह (देवताओं ने मुझे माफ कर दिया) WebForms से UserControls का एक अच्छा एनालॉग है। अर्थात्, एक ऐसा तत्व बनाने की क्षमता जो व्यावहारिक रूप से (इस पद्धति के कॉल मापदंडों के अलावा) बाकी पेज से स्वतंत्र है।



इसलिए, हम मॉडल के रूप में मूवीमॉडल का उपयोग करते हैं, और नियंत्रक विधि TheUgly के समान है। लेकिन अब हमारे पास एक नया नियंत्रक होगा, और इसमें एक ड्रॉपडाउन रेंडर करने के लिए एक विधि और साथ ही इस ड्रॉपडाउन के साथ आंशिक होगा। हम इसे आंशिक रूप से अधिक लचीला बनाएंगे ताकि हम इसे अन्य मामलों में उपयोग कर सकें, ड्रॉपडाउन कॉल करें। इसे दृश्य \ साझा फ़ोल्डर में रखें:

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<SelectListItem>>" %> <% =Html.DropDownList(ViewData.ModelMetadata.PropertyName, Model, ViewData.ModelMetadata.NullDisplayText)%>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस दृश्य को प्रस्तुत करने वाली विधि के लिए, कुछ चालें हैं:

  public class GenreController : Controller{ public ActionResult GetGenresDropdown(int selectedId) { ViewData.Model = from genre in Data.GetGenres() select new SelectListItem { Text = genre.Name, Value = genre.Id.ToString(), Selected = (genre.Id == selectedId) }; ViewData.ModelMetadata = new ModelMetadata( ModelMetadataProviders.Current, null, null, typeof (int), "GenreId") {NullDisplayText = "choose"}; return View("Dropdown"); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सबसे पहले, हम यहां वांछित मूल्य के स्वचालित चयन को खो देते हैं, इसलिए हमें SelectListItem की चयनित संपत्ति को मैन्युअल रूप से सेट करने की आवश्यकता है। दूसरे, यदि हम अपने दृश्य में कुछ गैर-तुच्छ मेटाडाटा स्थानांतरित करते हैं, तो हमें पहले मॉडल, और फिर मेटाडेटा को स्थापित करना होगा। अन्यथा, मेटाडेटा स्वचालित रूप से मॉडल के आधार पर बनाया जाता है। उसी कारण से, हमें रिटर्न व्यू (मॉडल) नहीं लिखना चाहिए। खैर, संपत्ति के नाम और डिफ़ॉल्ट पाठ (NullDisplayText) को निर्धारित करने के लिए वास्तव में मेटाडेटा की आवश्यकता है। वैसे, आप बाद के बिना कर सकते हैं।



अंत में, नियंत्रक विधि को मुख्य दृश्य से कहा जाता है:

 <% Html.RenderAction("GetGenresDropdown", "Genre", new {selectedId = Model.GenreId}); %>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

पेशेवरों : नियंत्रक स्तर पर जिम्मेदारी का पृथक्करण: मूवीकंट्रोलर फिल्म के डेटा के लिए जिम्मेदार है, GenreController - शैलियों के लिए। दृश्य स्तर पर, हमारे पास एक पूर्ण जीत भी है: मुख्य दृश्य को बहुत सरल किया गया है, और शैली की पसंद के कार्यान्वयन का विवरण सहायक के पास गया है। यहाँ, वैसे, एक लंबी पद्धति के सरलीकरण और एक सहायक विधि में कोड के हिस्से को हटाने के साथ एक निश्चित सादृश्य है।

विपक्ष : अधिक कोड, अधिक जटिल संरचना।

कब उपयोग करें : जब मुख्य दृश्य काफी बड़ा हो जाता है और कई क्षेत्रों में ड्रॉपडाउन दिखाई देते हैं, या जब एक शैली का विकल्प कई पृष्ठों पर उपयोग करने की आवश्यकता होती है।

पाँचवाँ रास्ता। होशियार।

जब वांछित मूल्य के इनपुट (या चयन) के आयोजन के पूरे गैर-तुच्छ हिस्से को मुख्य दृश्य से अलग किया जाता है, तो किसी तरह इस मुख्य दृश्य को सरल बनाने की इच्छा होती है। और यहाँ स्पष्ट समाधान Html.EditorForModel () का उपयोग करना है। अब, मॉडल वर्ग का मेटाडाटा इस या उस क्षेत्र को प्रदर्शित करने के लिए विधि चुनने के लिए जिम्मेदार है। एकमात्र समस्या यह है कि अंतर्निहित उपकरणों के साथ हम केवल इंजन को सही जगह पर RenderPartial () को कॉल करने के लिए बाध्य कर सकते हैं, लेकिन RenderAction () नहीं। इसलिए, आपको एक आंशिक दृश्य बनाना होगा, जो संबंधित रेंडरएक्शन को कॉल करने के अलावा कोई लोड नहीं करता है। (सही है, अगर हमें फ़ील्ड संपादक को अनुकूलित करने की आवश्यकता है, तो हम इस विशेष दृश्य को बदल देंगे, और DropDown.ascx तटस्थ छोड़ देंगे।)



इसलिए, \ Views \ Movie \ EditorTemplates फ़ोल्डर में, GenreEditor.ascx नामक एक आंशिक दृश्य बनाएं। इसमें उसी प्रकार का एक मॉडल होगा जैसा कि GenreId संपत्ति है जिसे हम संपादित कर रहे हैं, अर्थात, int। दृश्य में ही रेंडरएशन के लिए एक कॉल शामिल होगी:

 <% Html.RenderAction("GetGenresDropdown", "Genre", new {selectedId = Model}); %>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हमारे विचार का उपयोग करने के लिए, आपको मॉडल में GenreId संपत्ति के लिए आवश्यक विशेषता जोड़ने की आवश्यकता है:

 [UIHint("GenreEditor")]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

पेशेवरों : पिछले उदाहरण के समान, लेकिन एक ही समय में हमने अपने मुख्य दृश्य को काफी सरल कर दिया।

विपक्ष : हमें एक अतिरिक्त दृश्य बनाना था, जो (अब तक) कोई सार्थक भार नहीं उठाता है (लेकिन, शायद, यह हमें फ़ील्ड संपादन को अनुकूलित करने की अनुमति देगा, उदाहरण के लिए, एक संकेत जोड़ें)। एक और, अधिक महत्वपूर्ण माइनस यह है कि फॉर्म की सामान्य संरचना को कस्टमाइज़ करना अधिक कठिन है (उदाहरण के लिए, बाईं ओर एक फ़ील्ड और दाईं ओर शेष फ़ील्ड दिखाएं)। यदि वैश्विक अनुकूलन की आवश्यकता है (उदाहरण के लिए, हर जगह डिव के बजाय तालिकाओं का उपयोग करने के लिए), तो आप ऑब्जेक्ट के लिए अपना स्वयं का टेम्प्लेट बना सकते हैं।

उपयोग कब करें : जब कई फ़ील्ड होते हैं, तो उन्हें अधिक या कम मानक तरीके से दिखाया जाता है, और अक्सर फ़ील्ड की सूची में परिवर्तन किए जाते हैं।



अब, यदि हमारे पास श्रेणियां, रेटिंग आदि के साथ ड्रॉपडाउन हैं, तो हम अभी भी Dropdown.aspx (अन्य ड्रॉपडाउन के लिए) का उपयोग कर सकते हैं, लेकिन हमें अपने GenreEditor के समान नियंत्रक विधियों और भागलेखों को लिखना होगा। क्या इसका अनुकूलन करने का कोई तरीका है? सबसे पहले, आप एक बुनियादी जेनेरिक नियंत्रक बना सकते हैं, और वहां हमारी विधि भेज सकते हैं। दूसरे, आप किसी तरह संबंधित वर्ग ("शैली") के नाम को हमारे आंशिक (उदाहरण के लिए, डेटा टाइप विशेषता के माध्यम से) में स्थानांतरित कर सकते हैं और तदनुसार रेंडरएक्शन कॉल का निर्माण कर सकते हैं। अब, GenreEditor के बजाय, हमारे पास ड्रॉप-डाउन सूची से चुनने के लिए एक सार्वभौमिक संपादक होगा। नतीजतन, हमें लगता है कि नई निर्देशिकाओं को जोड़ने से किसी भी तरह से आवश्यक कोड की मात्रा में वृद्धि नहीं होगी - आपको बस मॉडल की विशेषताओं को तदनुसार रखने की आवश्यकता है। उदाहरणों में, यह नहीं है, लेकिन पाठक आसानी से इसे स्वयं लागू करेंगे।

और कैसे कर सकते हैं?

एकमात्र तरीका जो वास्तव में मेरे दिमाग को पार कर गया था जो मेरे दिमाग में आया था वह AJAX के माध्यम से ड्रॉपडाउन फिलिंग करना है। यहाँ प्लस स्पष्ट है: डेटा html से स्वतंत्र रूप से प्रसारित होता है और इसे अन्य स्थानों पर एक अलग तरीके से उपयोग किया जा सकता है। मैंने सुना है कि स्पार्क में इस तरह की चीज बहुत आसानी से लागू हो जाती है, लेकिन मेरे हाथ अभी तक एक कोशिश तक नहीं पहुंचे हैं।

और क्यों, सामान्य रूप से, इसके साथ भाप स्नान करें?

उदाहरणों के साथ हमेशा एक समस्या होती है: उन्हें यह स्पष्ट करने के लिए पर्याप्त होना चाहिए कि वे किस बारे में बात कर रहे हैं, लेकिन फिर यह स्पष्ट नहीं है कि ऐसा कठिन निर्णय क्यों। यदि आप अभी भी इस मुद्दे के बारे में चिंतित हैं, तो "जब उपयोग करें" आइटम फिर से पढ़ें।



बेशक, इन समाधानों में से किसी एक का उपयोग करने से पहले, सिग्नल-टू-शोर अनुपात का अनुमान लगाना बेहतर होता है: कम कोड, कक्षाएं, फाइलें आदि के समय छोटी परियोजनाओं को बनाए रखना आसान होता है, जबकि बड़े लोगों के साथ सौदा करना आसान होता है। तत्वों की सबसे बड़ी संख्या के साथ, जिनमें से प्रत्येक स्पष्ट रूप से अपने छोटे कार्य को हल करने पर केंद्रित है। सौभाग्य से, यह सब बहुत अच्छी तरह से परिलक्षित होता है: हम पहले समाधानों में से एक के साथ शुरू कर सकते हैं, और, जैसा कि हमारा फॉर्म अधिक जटिल हो जाता है, और अधिक उन्नत विकल्पों पर आगे बढ़ें।



और क्या? अरे हाँ, आप यहाँ स्रोत प्राप्त कर सकते हैं । इसका आनंद लें!