प्रस्तावना

यह लेख ASP.NET MVC 3.0 पर एक नई परियोजना के हिस्से के रूप में अपना नियंत्रण बनाने और इसका उपयोग करने की संभावना पर चर्चा करेगा। नीचे लिखा गया सब कुछ लेखक का दृष्टिकोण है और नियंत्रण बनाने के व्यापक या आम तौर पर स्वीकृत तरीकों से मेल नहीं खा सकता है, इसलिए आलोचना और टिप्पणियों का स्वागत है।

परिचय

सबसे अधिक संभावना है, पहले से WinForms या ASP .NET WebForms के साथ अपनी परियोजनाओं में काम करने वाले कई उपयोगकर्ताओं ने देखा कि ASP .NET MVC परियोजना में HTML सहायकों ने चेकबॉक्सलिस्ट जैसे नियंत्रण बनाने की क्षमता प्रदान नहीं की, जो फ़िल्टर के जटिल रूपों में उपयोगी हो सकती है। डेटा या असंरचित डेटा के कई चयन के साथ, चाहे उपयोगकर्ता प्रोफ़ाइल में हो या जब एक नए विषय को जोड़कर हैबरहैब। बेशक, कोई भी एकल चेकबॉक्स या चेकबॉक्सफॉर का उपयोग करने से मना नहीं करता है, लेकिन क्या चेकबॉक्स के ऐसे समूह के साथ काम करना सुविधाजनक होगा और कोड आसानी से एक्स्टेंसिबल, अनुरक्षकों के लिए समझने योग्य और अनुलिपि से सुरक्षित है, एक प्रोग्रामर के लिए अंतिम प्रश्न नहीं हैं जो भविष्य की परियोजनाओं में अपनी उपलब्धियों का उपयोग करने की योजना बनाते हैं। । और अगर हम इस बात को ध्यान में रखते हैं कि हम इसके दृश्य प्रदर्शन के लिए अपने नियंत्रण में कुछ उपयोगी विकल्प जोड़ सकते हैं, तो इसके निर्माण की आवश्यकता और अधिक स्पष्ट हो जाती है।

अंत में विषय क्षेत्र में गोता लगाने से पहले, मैं यह नोट करना चाहूंगा कि साइट http://mvc.devexpress.com को देखने के बाद प्रश्न में नियंत्रण बनाने का विचार प्रेरित हुआ, जिसमें कई सुंदर और कार्यात्मक नियंत्रण हैं, जिनमें से कुछ देखने में आते हैं अद्भुत। यदि इस लेख को सकारात्मक प्रतिक्रिया के साथ अनुमोदित और प्राप्त किया जाता है, तो समुदाय के हब के लिए लेखों की एक श्रृंखला के भाग के रूप में साइट पर प्रस्तुत नियंत्रणों की आगे की समीक्षा और कार्यान्वयन संभव है।

के विश्लेषण

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

• लेआउट - वायरफ्रेम (एक डिव या टेबल में);
• दिशा - उत्पादन की दिशा (ऊर्ध्वाधर / क्षैतिज);
• पुनरावर्तन कॉलम - कॉलम की संख्या;
• htmlAttributes - चेकबॉक्स कंटेनर में लागू होने वाली विशेषताएँ।

परियोजना निर्माण

एक खाली ASP.NET MVC 3 प्रोजेक्ट बनाएं और इंडेक्स विधि के साथ एक डेमोकंट्रोलर नियंत्रक जोड़ें और इसे देखें:







न्यूनतम तैयारी पूरी होने के बाद, सीधे नियंत्रण पर जाएं।

एक CheckBoxList जोड़ना

Controls.cs फ़ाइल और स्थिर नियंत्रण वर्ग के साथ प्रोजेक्ट रूट में कोर फ़ोल्डर जोड़ें, जो हमारे चेकबॉक्सलिस्ट के कार्यान्वयन की मेजबानी करेगा।



फिलहाल, स्थिर नियंत्रण वर्ग में, हम पहले से ही Html सहायकों के अपने स्वयं के कार्यान्वयन बना सकते हैं, इसलिए हम इसके लिए आवश्यक कोड जोड़ देंगे:

public static MvcHtmlString CheckBoxList(this HtmlHelper helper) { return new MvcHtmlString("Hello, i'm your CheckBoxList!"); } 

और इंडेक्स के हमारे विचार में, डेमोकंट्रोलर नियंत्रक को कॉल करने का प्रयास करें।

नोट: मैं जानबूझकर लेख के पाठ में प्लग-इन असेंबली और स्कोप वाली फाइलों के बारे में नहीं लिखता, क्योंकि मुझे उम्मीद है कि आप मेरे उल्लेख के बिना ऐसा कर सकते हैं। केवल इंगित करने योग्य बात यह है कि लाइन को जोड़ रहा है <फ़ाइल में नाम जोड़ें = "MVC3Controls_H.Core" /> MVC3Controls -H.Core पर फ़ाइल /Views/web.config, जहां यह CheckBoxList के साथ आपके स्थिर वर्ग का स्थान है।


हमारे तत्व को कॉल करने के लिए, Index.cshtml (यदि आप एक नया दृश्य जोड़ते समय रेजर इंजन निर्दिष्ट करते हैं) में निम्नलिखित पंक्ति जोड़ें:

 @Html.CheckBoxList() 

और फ़ाइल Global.asax में इंगित करें, जो प्रोजेक्ट के रूट में स्थित है, कि डिफ़ॉल्ट रूप से आप डेमो कंट्रोलर, इंडेक्स विधि को कॉल करना चाहते हैं:

 routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Demo", action = "Index", id = UrlParameter.Optional } // Parameter defaults ); 

यदि सभी कार्य सही ढंग से किए गए थे, तो आपको निम्नलिखित सामग्री वाला एक पृष्ठ दिखाई देगा:



बहुत बढ़िया। अब हम अपने चेकबॉक्स की संरचना के कार्यान्वयन की ओर मुड़ते हैं।

CheckBoxList संरचना के कार्यान्वयन

सबसे पहले, इसे Controls.cs फ़ाइल में प्रदर्शित करने के लिए सेटिंग्स जोड़ें। हमारे मामले में, ये एनम प्रकार के 3 ऑब्जेक्ट होंगे:

 public enum Layoutt { Table = 0, Flow = 1 } public enum Direction { Horizontal = 0, Vertical = 1 } public enum RepeatColumns { OneColumn = 1, TwoColumns = 2, ThreeColumns = 3, FourColumns = 4, FiveColumns = 5 } 

और CheckBoxList_Settings वर्ग, जिसमें हम उन्हें अपने नियंत्रण में कॉल पास करेंगे:

 public class CheckBoxList_Settings { public string cbl_Name = "SelectedCheckBoxListItems"; public Layoutt cbl_Layout = Layoutt.Table; public Direction cbl_Direction = Direction.Horizontal; public RepeatColumns cbl_RepeatColumns = RepeatColumns.FiveColumns; } 

डिफ़ॉल्ट सेटिंग्स के रूप में, हम वायरफ्रेम-टेबल, आउटपुट दिशा- क्षैतिज रूप से और पांच कॉलम के रूप में प्रदर्शित करेंगे। बाद में cbl_Name प्रॉपर्टी पर चर्चा की जाएगी ।
हम अपने CheckBoxList के कंस्ट्रक्टर को संशोधित करते हैं टाइप आईडी एन्क्रिप्शन <string, int> और सेटिंग्स वर्ग का एक उदाहरण स्वीकार करने के लिए:

 public static MvcHtmlString CheckBoxList(this HtmlHelper helper, IDictionary<string, int> items, CheckBoxList_Settings settings) { return new MvcHtmlString("Hello, i'm your CheckBoxList!"); } 

हम इस निष्कर्ष पर पहुंचे हैं कि अब हमें अपने तत्व को न केवल कॉल करने की आवश्यकता है, बल्कि इसके लिए 2 मापदंडों को भी पास करना होगा, इसके लिए हम डेटा संग्रह को अपने नियंत्रक के सूचकांक विधि में जोड़ते हैं:

 Dictionary<string, int> languages = new Dictionary<string, int> { {"ActionScript", 0}, {"Delphi", 1}, {"GO", 2}, {"Lua", 3}, {"Prolog", 4}, {"Basic", 5}, {"Eiffel", 6}, {"Haskell", 7}, {"Objective-C", 8}, {"Python", 9}, {"C", 10}, {"Erlang", 11}, {"Java", 12}, {"Pascal", 13}, {"Ruby", 14}, {"C++", 15}, {"F#", 16}, {"JavaScript", 17}, {"Perl", 18}, {"Scala", 19}, {"C#", 20}, {"Fortran", 21}, {"Lisp", 22}, {"PHP", 23} }; 

और हम एक मॉडल के रूप में इस डेटा के साथ अपना दृष्टिकोण प्रदान करेंगे:

 return View(languages); 

हमारे विचार के कोड में, हम यह संकेत देते हैं कि इसके लिए मॉडल डेटा प्रकार शब्दकोश <string, int> है और हमारे चेकबॉक्स को कॉल करें:

 @model Dictionary<string, int> @using MVC3Controls_H.Core @{ ViewBag.Title = "Index"; } <h2>Index</h2> @Html.CheckBoxList(Model, new CheckBoxList_Settings { cbl_Name = "SelectedCheckBoxListItems", cbl_Layout = Layoutt.Table, cbl_Direction = Direction.Horizontal, cbl_RepeatColumns = RepeatColumns.FiveColumns }) 

हम परियोजना शुरू करते हैं और उसी रिकॉर्ड को देखते हैं जो हमारे लिए परिचित है:

वर्तमान आवेदन संरचना का विश्लेषण

आगे बढ़ने से पहले, हमें एप्लिकेशन की वर्तमान संरचना को समझने और संभवतः इसे बदलने की आवश्यकता है। यहाँ मैं क्या करना चाहता हूँ:

• फिलहाल, हम अपने विचार में डिक्शनरी का एक मॉडल टाइप कर रहे हैं डिक्शनरी <string>, int>, हालांकि, ज्यादातर मामलों में, एप्लिकेशन कंट्रोलर से प्रेषित अन्य डेटा का उपयोग करता है, यह पेज या इकाई (पंजीकरण, फॉर्म) के मेटा टैग (शीर्षक, विवरण) हो। आदेश), - इसलिए हमें अपने नियंत्रण के लिए विशेष रूप से मॉडल का एकाधिकार नहीं करना चाहिए। इसके अलावा, हमें उपयोगकर्ता द्वारा चुने गए हमारे तत्व के मूल्यों को स्टोर करने और प्राप्त करने की आवश्यकता होगी।
• मान लीजिए कि समय के साथ, हमारी परियोजना में, चेकबॉक्सलिस्ट को अधिक से अधिक दृश्यों में बुलाया जाएगा और कुछ बिंदु पर, हमें एक नया पैरामीटर जोड़ने या मौजूदा लोगों को बदलने की आवश्यकता होगी। इस मामले में, आपको सभी कॉल को हमारे नियंत्रण में बदलना होगा (सभी परियोजना विचारों में), लेकिन यह बहुत सुविधाजनक नहीं है।

ऊपर से यह इस प्रकार है कि हमें आवश्यकता है:

• प्रस्तुति के लिए एक मॉडल जोड़ें (ViewModel) और अन्य डेटा के साथ इस मॉडल के हिस्से के रूप में चेकबॉक्स लिस्ट में प्रदर्शन के लिए संग्रह पास करें।
• हमारे नियंत्रण की कॉल को दृश्य से आंशिक दृश्य में स्थानांतरित करें, ताकि निर्माणकर्ता या मापदंडों में बदलाव के मामले में, हमें अपने प्रोजेक्ट में उपयोग किए गए सभी तत्वों के लिए कॉल को केवल एक स्थान पर बदलना पड़े।
• हमारे नियंत्रण के लिए एक अलग डेटा मॉडल में CheckBoxList में संचरित मूल्यों को स्थानांतरित करने और तत्व कॉल में परिवर्तन से हमारे विचारों को जितना संभव हो उतना अलग करने के लिए इसे हमारे आंशिक दृश्य में स्थानांतरित करें।

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

एक दृश्य मॉडल जोड़ना

चूंकि हमारा प्रेजेंटेशन मॉडल न केवल इसमें डेटा संचारित करने का काम करता है, बल्कि इसे प्राप्त करने के लिए, हमें प्रेषित संग्रह के अलावा चयनित तत्वों की एक सरणी जोड़ने की आवश्यकता होगी। मॉडल फ़ोल्डर में ViewModels फ़ोल्डर जोड़ें, फिर ViewModel_Index.cs फ़ाइल को नीचे दिए गए ViewModels में जोड़ें:



और हमारे दृश्य मॉडल का कोड:

 public class ViewModel_Index { public IDictionary<string, int> Languages { get; set; } public int[] SelectedCheckBoxListItems { get; set; } } 

हमारे DemoController की अनुक्रमणिका विधि निम्नानुसार बदल जाएगी:

 public ActionResult Index() { Dictionary<string, int> languages = new Dictionary<string, int> { {"ActionScript", 0}, {"Delphi", 1}, {"GO", 2}, {"Lua", 3}, {"Prolog", 4}, {"Basic", 5}, {"Eiffel", 6}, {"Haskell", 7}, {"Objective-C", 8}, {"Python", 9}, {"C", 10}, {"Erlang", 11}, {"Java", 12}, {"Pascal", 13}, {"Ruby", 14}, {"C++", 15}, {"F#", 16}, {"JavaScript", 17}, {"Perl", 18}, {"Scala", 19}, {"C#", 20}, {"Fortran", 21}, {"Lisp", 22}, {"PHP", 23} }; ViewModel_Index _ViewModel_Index = new ViewModel_Index { Languages = languages }; return View(_ViewModel_Index); } 

चूंकि हमने नियंत्रक में प्रेषित मॉडल को बदल दिया है, इसलिए संबंधित दृश्य में ऐसा करना भी आवश्यक है:

 @using MVC3Controls_H.Models.ViewModels @using MVC3Controls_H.Core @model ViewModel_Index @{ ViewBag.Title = "Index"; } <h2>Index</h2> @Html.CheckBoxList(Model.Languages, new CheckBoxList_Settings { cbl_Name = "SelectedCheckBoxListItems", cbl_Layout = Layoutt.Table, cbl_Direction = Direction.Horizontal, cbl_RepeatColumns = RepeatColumns.FiveColumns }) 

इस प्रकार, यदि आपको हमारे नियंत्रण के लिए डेटा संग्रह के अलावा, पृष्ठ पर कुछ और भेजने की आवश्यकता है, तो आप इसे केवल दृश्य मॉडल /Models/ViewModels/ViewModels_Index.cs को बदलकर (इसमें नए गुण जोड़कर) और उनकी आरंभीकरण जोड़कर कर सकते हैं। नियंत्रक विधि में।

हमारे CheckBoxList के लिए एक कॉल encapsulating

अपने पहले लेख में , मैंने पहले से ही विस्तार पद्धति को कॉल करने के लिए एक समान योजना लागू की थी, हालांकि, कई अन्य उद्देश्यों के लिए। वर्तमान परियोजना में, हमारे CheckBoxList के कॉल को आंशिक दृश्य में करने के लिए, हम आंशिक फ़ोल्डर को / दृश्य फ़ोल्डर, इसके लिए नियंत्रण फ़ोल्डर और नियंत्रण फ़ोल्डर में नए आंशिक CheckBoxList.cshtml दृश्य जोड़ेंगे:



अब हमारे आवेदन की संरचना इस प्रकार है:



हम CheckBoxList के बजाय अपने आंशिक दृश्य को कॉल करके अपने अनुक्रमणिका दृश्य को बदलते हैं।

 @using MVC3Controls_H.Models.ViewModels @using MVC3Controls_H.Core @model ViewModel_Index @{ ViewBag.Title = "Index"; } <h2>Index</h2> @Html.Partial("~/Views/Partial/Controls/CheckBoxList.cshtml") 

CheckBoxList के लिए एक डेटा मॉडल जोड़ना

चूंकि हम अपने नियंत्रण के कॉल को अपने आंशिक दृश्य में स्थानांतरित करने की योजना बनाते हैं, इसलिए हमें इसके लिए डेटा भी वहां स्थानांतरित करना होगा - इसलिए, हमें इसके लिए एक डेटा मॉडल जोड़ने की आवश्यकता है। मॉडल फ़ोल्डर में, एक नया चेकबॉक्स लिस्ट बनाएं, इसमें चेकबॉक्स लिस्ट_मॉडल.क्स क्लास जोड़ें:

 public class CheckBoxList_Model { public IDictionary<string, int> items; public CheckBoxList_Settings settings; } 

डेटा के रूप में जोड़े गए मॉडल को पास करते हुए, हमारे सूचकांक दृश्य में आंशिक दृश्य कॉल बदलें:

 @Html.Partial("~/Views/Partial/Controls/CheckBoxList.cshtml", new CheckBoxList_Model { items = Model.Languages, settings = new CheckBoxList_Settings { cbl_Name = "SelectedCheckBoxListItems", cbl_Layout = Layoutt.Table, cbl_Direction = Direction.Horizontal, cbl_RepeatColumns = RepeatColumns.FiveColumns } }) 

और इस मॉडल को हमारे आंशिक दृश्य के लिए /Views/Partial/Controls/CheckBoxList.cshtml में मॉडल के रूप में परिभाषित करें, हमारे नियंत्रण के लिए मानों को कॉल करना और पास करना:

 @model CheckBoxList_Model @Html.CheckBoxList(Model.items, Model.settings) 

यह एप्लिकेशन संरचना का अंत है। इसके मुख्य बिंदुओं पर विचार करें:



अच्छी खबर यह है कि हम आखिरकार अपने आवेदन की संरचना के साथ समाप्त हो गए हैं, और बुरी खबर यह है कि हमने अपने चेकबॉक्सलिस्ट के बारे में अभी तक कुछ भी नहीं लिखा है।

चेकबॉक्सवादी कार्यान्वयन

शुरू करने के लिए, हम अपने तत्व के निर्माण के लिए सामान्य एल्गोरिथ्म का वर्णन करते हैं:
1. cbl_Layout पैरामीटर के आधार पर फ़्रेमिंग HTML टैग (तालिका, div) का चुनाव ।
2. संग्रह में cbl_RepeatColumns पैरामीटर और अभिलेखों की संख्या के आधार पर पुनरावृत्तियों की संख्या का निर्धारण करना।
3. वर्तमान पुनरावृत्ति के सीरियल नंबर के आधार पर संग्रह से आइटम का चयन करने के लिए शर्तों का गठन:
3.1। यदि आउटपुट क्षैतिज है, और स्तंभों की संख्या = 4 है, तो पहली पंक्ति में संग्रह के पहले 4 तत्वों से युक्त होना चाहिए, निम्नलिखित 4 में से दूसरा, आदि:

 [0 1 2 3] - 0  [4 5 6 7] - 1  [8 9 10 11] 

3.2। यदि आउटपुट को लंबवत रूप से किया जाता है, तो स्तंभों की संख्या = 4 और तत्वों की कुल संख्या 24 है, तो पहले संग्रह के प्रत्येक छठे तत्व से मिलकर (!) होना चाहिए, पुनरावृत्ति संख्या + 6, आदि का दूसरा:;

 [0 6 12 18] - 0  [1 7 13 19] - 1  [2 8 14 20] [3 9 15 21] [4 10 16 22] [5 11 17 23] 

3.3। विभाजन के शेष भाग के बारे में पुनरावृत्तियों (तत्वों की संख्या / स्तंभों की संख्या) की गणना करते समय मत भूलना! = 0. इस मामले में, हमें पूरे संग्रह को प्रदर्शित करने के लिए एक अतिरिक्त पुनरावृत्ति की आवश्यकता है।

 [0 1 2 3] - 0  [4 5 6 7] - 1  [8 9 10 11] [12 13 - -] 

4. फ्रेमिंग टैग (डि, टेबल) के आधार पर, प्रत्येक पुनरावृत्ति के लिए उपयुक्त नमूनों की एक स्ट्रिंग का गठन:
4.1। एक div के लिए, यह केवल पंक्ति के अंत में हाइफ़न होगा।
4.2। तालिका के लिए, यह है:
4.2.1। लाइन की शुरुआत में। Leibel तत्वों की गणना करने की प्रक्रिया में। पंक्ति के अंत में।
5. फ्रेमिंग टैग को बंद करना और उत्पन्न स्ट्रिंग को दृश्य में वापस करना।

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

HTML मार्कअप चेकबॉक्स और मॉडल बाइंडिंग का गठन

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

 public static string GenerateHtmlMarkup_CheckBox(KeyValuePair<string, int> item, CheckBoxList_Settings settings) { TagBuilder tagBuilder = new TagBuilder("input"); tagBuilder.MergeAttribute("type", "checkbox"); tagBuilder.MergeAttribute("name", settings.cbl_Name); tagBuilder.MergeAttribute("value", item.Value.ToString()); return tagBuilder.ToString(TagRenderMode.SelfClosing); } 

लेबल का HTML मार्कअप

 public static string GenerateHtmlMarkup_Label(KeyValuePair<string, int> item) { TagBuilder tagBuilder = new TagBuilder("label"); tagBuilder.SetInnerText(item.Key); return tagBuilder.ToString(TagRenderMode.Normal); } 

पुनरावृत्तियों की संख्या की गणना:

 int iMod = items.Count % (int)settings.cbl_RepeatColumns; int iterationsCount = items.Count / (int)settings.cbl_RepeatColumns + (iMod == 0 ? 0 : 1); 

प्रत्येक पुनरावृत्ति के लिए नमूनाकरण स्थिति:

 foreach (KeyValuePair<string, int> item in items.Where((item, index) => settings.cbl_Direction == Direction.Horizontal ? index / (int)settings.cbl_RepeatColumns == i : (index - i) % iterationsCount == 0)) 

जहां मैं पुनरावृत्ति संख्या है
क्षैतिज रूप से प्रदर्शित करते समय, हम उन तत्वों को लेते हैं जिनके सूचकांक स्तंभों की संख्या से विभाजित होते हैं == i:

 [0 1 2 3] [4 5 6 7] [8 9 10 11] 

जब हम लंबवत प्रदर्शित करते हैं, तो हम ऐसे तत्वों को लेते हैं, जिनकी संख्या और वर्तमान पुनरावृत्तियों को पुनरावृत्तियों की संख्या से विभाजित करने से = 0:

 [0 6 12 18] [1 7 13 19] 

स्वास्थ्य जाँच

आइए 3 चेकबॉक्सवादियों के उदाहरण को देखें, जो हमें अंत में मिला:

 <h2>Index</h2> @using (Html.BeginForm()) { @Html.Partial("~/Views/Partial/Controls/CheckBoxList.cshtml", new CheckBoxList_Model { items = Model.Languages, settings = new CheckBoxList_Settings { cbl_Name = "SelectedCheckBoxListItems", cbl_Layout = Layoutt.Table, cbl_Direction = Direction.Horizontal, cbl_RepeatColumns = RepeatColumns.FiveColumns }, htmlAttributes = new { @cellpadding = "0", @cellspacing = "0" } }) <br /> @Html.Partial("~/Views/Partial/Controls/CheckBoxList.cshtml", new CheckBoxList_Model { items = Model.Languages, settings = new CheckBoxList_Settings { cbl_Name = "SelectedCheckBoxListItemsTwo", cbl_Layout = Layoutt.Flow, cbl_Direction = Direction.Vertical, cbl_RepeatColumns = RepeatColumns.ThreeColumns } }) <br /> @Html.Partial("~/Views/Partial/Controls/CheckBoxList.cshtml", new CheckBoxList_Model { items = Model.Languages, settings = new CheckBoxList_Settings { cbl_Name = "SelectedCheckBoxListItemsThree", cbl_Layout = Layoutt.Flow, cbl_Direction = Direction.Horizontal, cbl_RepeatColumns = RepeatColumns.TwoColumns } }) <br /> <input type="submit" value="send" /> } 

चयनित मान प्राप्त करने के लिए, हमें अपने व्यू बॉक्स के नामों के साथ 3 सरणियाँ जोड़ने की आवश्यकता है, जो हमारे ViewModel_Index दृश्य के मॉडल में हैं:

 public class ViewModel_Index { public IDictionary<string, int> Languages { get; set; } public int[] SelectedCheckBoxListItems { get; set; } public int[] SelectedCheckBoxListItemsTwo { get; set; } public int[] SelectedCheckBoxListItemsThree { get; set; } } 

अनुक्रमणिका नियंत्रक विधि जोड़ने के साथ ही पोस्ट अनुरोधों को संसाधित करता है:

 [HttpPost] public ActionResult Index(ViewModel_Index model) { //TODO: return View(); } 

ब्रेकपॉइंट सेट करने के बाद, आइए परिणाम देखें:



यदि आप कोड डुप्लिकेशन, प्रतिनिधित्व मॉडल और रखरखाव के प्रति बिल्कुल उदासीन हैं, तो आप सीधे चेकबॉक्स को सीधे देखने के लिए कॉल कर सकते हैं और सर्वर पर चयनित मानों को सीधे सरणी में प्राप्त कर सकते हैं (हालांकि, यह मत भूलिए कि चेकबॉक्सवादी नाम और स्वीकृत पैरामीटर सर्वर पर समान होना चाहिए):







ठीक है, अब जब हमने पूरी तरह से समाप्त कर लिया है जो हमने योजना बनाई है, तो अंतिम अवशेष। ऑब्जेक्ट HTMLAttributes उदाहरण का उपयोग करके नए गुणों के साथ हमारे नियंत्रण का विस्तार करने पर विचार करें।

चेकबॉक्सवाद का विस्तार

हमारे तत्व के कोड को एक नई संपत्ति पारित करने के लिए, हमें कंस्ट्रक्टर से प्रारंभिक कॉल (या इसके विपरीत, जैसा कि आप सबसे अच्छा लगता है) पर जाने की आवश्यकता है। यह सब Controls.cs में हमारे निर्माता के साथ शुरू होता है - एक नई वस्तु जोड़ें htmlAttributes पैरामीटर:

 public static MvcHtmlString CheckBoxList(this HtmlHelper helper, IDictionary<string, int> items, CheckBoxList_Settings settings, object htmlAttributes) 

हमारे कंस्ट्रक्टर को CheckBoxList.cshtml नाम के साथ आंशिक दृश्य में कहा जाता है। CheckBoxList मॉडल के लिए एक नई संपत्ति जोड़ें:

 public class CheckBoxList_Model { public IDictionary<string, int> items; public CheckBoxList_Settings settings; public object htmlAttributes; } 

और इसे हमारे आंशिक दृश्य में कॉल पर पास करें:

करने के लिए:

 @model CheckBoxList_Model @Html.CheckBoxList(Model.items, Model.settings) 

के बाद:

 @model CheckBoxList_Model @Html.CheckBoxList(Model.items, Model.settings, Model.htmlAttributes) 

यह सूचकांक दृश्य में संपत्ति के बहुत इनिशियलाइज़ेशन को जोड़ने और हमारे तत्व के कोड को पूरक करने के लिए बना हुआ है:

  @Html.Partial("~/Views/Partial/Controls/CheckBoxList.cshtml", new CheckBoxList_Model { items = Model.Languages, settings = new CheckBoxList_Settings { cbl_Name = "SelectedCheckBoxListItemsThree", cbl_Layout = Layoutt.Table, cbl_Direction = Direction.Vertical, cbl_RepeatColumns = RepeatColumns.FourColumns }, htmlAttributes = new { @border = "3", style = "color: Grey; border-style:dashed;" } }) 

वायरफ्रेम चयन कोड (तालिका, div):

 public static TagBuilder GenerateHtmlMarkup_OuterTag(Layoutt cbl_Layout, IDictionary<string, object> htmlAttributes) { ... TagBuilder tagBuilder = new TagBuilder(htmlTag); tagBuilder.MergeAttributes(htmlAttributes); ... } 

जैसा कि आप नीचे देख सकते हैं, सब कुछ काम करता है:

निष्कर्ष

अंत में, मैं यह समझना चाहूंगा कि हमने क्या किया:

• हमने Html ASP .NET MVC सहायकों के आधार पर अपने स्वयं के नियंत्रण को बनाने, उपयोग करने और विस्तारित करने की संभावना पर विचार किया;
• नियंत्रण के आगे विकास के लिए एक परियोजना रूपरेखा तैयार की;
• प्रत्येक कार्यात्मक इकाई की जिम्मेदारियों के विभाजन के साथ एक वेब अनुप्रयोग की संरचना को लागू किया;
• हमने उस साइट के बारे में सीखा जिसके साथ अपने नियंत्रण को लिखने में प्रतिस्पर्धा करने के लिए कुछ है।

सामग्री की सूची

1.http : //mvc.devexpress.com/Editors/CheckBoxList
2. ASP.NET MVC रूपों में चेकबॉक्स को कैसे संभालना है
3. प्रोजेक्ट सोर्स कोड