🙏🏼 🤴🏼 👩🏻‍✈️ नॉकआउट MVC - ASP.NET MVC के लिए नॉकआउट की बिजली 🧗 👋 🍤

जो लोग नहीं जानते हैं, उनके लिए Knockout.js एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है जो क्लाइंट पर मॉडल-व्यू-व्यू मॉडल (MVVM) पैटर्न को लागू करने की अनुमति देता है। होबे पर पहले से ही उनके बारे में बहुत कुछ लिखा ( एक , दो , तीन , चार , पांच , वीडियो )। आप Knockout.js को बहुत जल्दी सीख सकते हैं - आखिरकार, एक इंटरैक्टिव प्रशिक्षण प्रणाली है , लाइव उदाहरणों का एक गुच्छा (आप स्रोत कोड को पोक और देख सकते हैं) और उत्कृष्ट प्रलेखन ।

बहुत बार, Knockout.js ASP.NET MVC के साथ संयोजन में उपयोग किया जाता है - आखिरकार, पुस्तकालय क्लाइंट लॉजिक के लेखन को बहुत सरल करता है। हालांकि, क्लाइंट-सर्वर के विकास के लिए कई विशिष्ट समस्याएं उत्पन्न होती हैं: इसके प्रसंस्करण के तर्क का मुख्य मॉडल और हिस्सा क्लाइंट (जावास्क्रिप्ट) और सर्वर (सी # / वीबी) दोनों पर वर्णित किया जाना है। इसके अलावा, क्लाइंट के सर्वर विधियों से अपील करने और उन्हें प्रसंस्करण के लिए एक मॉडल से संबंधित एक नियमित हिस्सा है। लेकिन दुखी मत हो! अब हमारे पास नॉकआउट एमवीसी है - यह नॉकआउट.जेएस के लिए .NET शेल है, जो हमारे लिए सभी आवश्यक जावास्क्रिप्ट कोड उत्पन्न करता है। हमें केवल C # में अपने मॉडल का वर्णन करने की आवश्यकता है, और MVVM शैली में, प्रत्येक HTML तत्व के लिए हमें निर्दिष्ट करना होगा कि हमें किस मॉडल की संपत्ति को बांधने की जरूरत है (और आप पूरे भाव भी निर्दिष्ट कर सकते हैं - वे js में अनुवादित होंगे)। इस प्रकार, आप जावास्क्रिप्ट की एक भी लाइन के बिना एक पूर्ण क्रॉस-ब्राउज़र क्लाइंट वेब एप्लिकेशन प्राप्त कर सकते हैं!

और अब थोड़ा और

आदर्श

मॉडल को सर्वर पर एक बार लिखा जाता है (कहते हैं, C # में)। क्लाइंट की ओर, सभी जावास्क्रिप्ट कोड स्वचालित रूप से उत्पन्न होते हैं। इसके अलावा, हम न केवल साधारण गुणों का वर्णन कर सकते हैं, बल्कि बहुत जटिल अभिव्यक्ति भी नहीं हैं जो जावास्क्रिप्ट में अनुवादित होंगी। इसके अलावा, यह सब न केवल मुख्य मॉडल के लिए किया जाता है, बल्कि इसके सबमॉडल्स (शुद्ध नॉकआउट पर भी होता है। जेएस ऐसा करना इतना आसान नहीं है)। उदाहरण के लिए, हम इस तरह के एक मॉडल का वर्णन करते हैं:

public class Item { public string FirstName { get; set; } public string LastName { get; set; } public Expression<Func<string>> FullName() { return () => FirstName + " " + LastName; } } public class Model { public List<Items> Items { get; set; } } // ... var model = new Model { Items = new List<Item> { new Item {FirstName = "Annabelle", LastName = "Arnie"}, new Item {FirstName = "Bertie", LastName = "Brianna"}, new Item {FirstName = "Charles", LastName = "Cayenne"}, } };

और निम्न जावास्क्रिप्ट स्वचालित रूप से इसके द्वारा उत्पन्न होता है:

 var viewModelJs = {"Items":[{"FirstName":"Annabelle","LastName":"Arnie"},{"FirstName":"Bertie","LastName":"Brianna"},{"FirstName":"Charles","LastName":"Cayenne"}]}; var viewModelMappingData = { 'Items': { create: function(options) { var data = ko.mapping.fromJS(options.data); data.FullName = ko.computed(function() { try { return this.FirstName()+' '+this.LastName()} catch(e) { return null; } ;}, data); return data; }}}; var viewModel = ko.mapping.fromJS(viewModelJs, viewModelMappingData); ko.applyBindings(viewModel);

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

डेटा बाइंडिंग

यदि आप ASP.NET MVC के साथ काम कर रहे हैं, तो आप शायद विचारों का वर्णन करने के लिए रेजर व्यू इंजन का उपयोग करते हैं। यदि नहीं, तो कम से कम इस इंजन की कार्यक्षमता से परिचित होना उचित है - यह साइट के लेआउट को एक नए स्तर पर उठाता है। रेजर के लिए विशेष रूप से प्रतिनिधित्व के उदाहरण निम्नलिखित हैं।
खैर, उदाहरण के लिए, मैं एक टेक्स्टबॉक्स बनाना चाहता हूं जिसमें हमारे मॉडल की कुछ संपत्ति ए का मूल्य होगा। मेरे लिए यह लिखना पर्याप्त है:

 @ko.Html.TextBox(m => mA)

कोष्ठक में एक लंबोदर अभिव्यक्ति है जो हमारे मॉडल मीटर के साथ एक संपत्ति के साथ मेल खाती है जिसके लिए मैं डेटा को बांधना चाहूंगा। और इस मामले में हम C # में एक अभिव्यक्ति लिख रहे हैं, जिसका अर्थ है कि IntelliSense हमारी मदद करता है:
स्क्रीन IntelliSense

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

 @using (ko.If(model => model.Condition1 && model.Condition2))

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

 @using (var items = ko.Forearch(m => m.Items))

दस्तावेज़ में सभी उपलब्ध सिंटैक्स निर्माणों का पूरा विवरण पाया जा सकता है।

सर्वर का उपयोग

खैर, अब एक बटन बनाने की कोशिश करते हैं जो कुछ सर्वर-साइड पद्धति को कॉल करता है जो मॉडल पर संचालन करता है। हमें अपने जावास्क्रिप्ट कोड में निम्नलिखित बिंदुओं के बारे में सोचना चाहिए:

वर्तमान मॉडल के बारे में डेटा एकत्र करना और उन्हें एक पंक्ति में क्रमबद्ध करना आवश्यक है
हमें अपने बटन को अजाक्स-इस लाइन को सर्वर पर भेजने की आवश्यकता है
किसी तरह सर्वर से डेटा प्राप्त करने और दृश्य तत्वों को अपडेट करने के तर्क का वर्णन करना आवश्यक है

इसे रोको! इसमें से कुछ भी करने की जरूरत नहीं है! आपको बस यह पंक्ति लिखने की आवश्यकता है:

 @ko.Html.Button("Some text", "FooAction", "Foo")

एक विचारशील पाठक पूछेगा: "और अगर मैं सर्वर विधि के लिए कुछ मापदंडों को पारित करना चाहता हूं?" कुछ भी आसान नहीं है:

 @ko.Html.Button("Some text", "FooAction", "Foo", new { index = 0, caption = "Knockout MVC"})

और इसलिए हम सर्वर पर संबंधित विधि का वर्णन करेंगे:

 public class FooController : KnockoutController { public ActionResult FooAction(FooModel model, int index, string caption) { model.FooAction(index, caption); //     return Json(model); } }

वह सब है! आपको एक भी अतिरिक्त लाइन लिखने की आवश्यकता नहीं है! आप इस तथ्य के बारे में भूल सकते हैं कि हमारे पास एक क्लाइंट-सर्वर एप्लिकेशन है, साथ में तकनीकी दिनचर्या - विकास के दौरान आपको केवल मॉडल लॉजिक पर ध्यान देने की आवश्यकता है! आप अधिक विस्तार से देख सकते हैं कि यह सब यहां कैसे काम करता है

संदर्भों के साथ काम करें

सीधे Knockout.js में जो किया जाता है वह बहुत सुविधाजनक नहीं है - यह संदर्भों के साथ काम कर रहा है । जब आप नेस्टेड foreach और कंस्ट्रक्शन के with नेस्टेड foreach पैदा होते हैं। यदि आपके पास एक स्तर का घोंसला है, तो सब कुछ ठीक है। लेकिन यदि आप एक जटिल एप्लिकेशन लिख रहे हैं जिसमें 4-5 स्तर की नेस्टिंग उत्पन्न होती है, तो कभी-कभी आप फॉर्म $parents[2].name $parentContext.$parentContext.$parentContext.$index या $parentContext.$parentContext.$parentContext.$index निर्माण में आ सकते हैं $parentContext.$parentContext.$parentContext.$index । इस तरह के कोड को समझना काफी मुश्किल है, और जब यह रीफैक्टरिंग की बात आती है, तो यह पूरी तरह से दुखी हो जाता है। नॉकआउट MVC में लिखना बहुत आसान है - अब हर संदर्भ का अपना नाम है! और अब कोड इस तरह दिखता है:

 @using (var subModel = ko.With(m => m.SubModel)) { using (var subSubModel = subModel.With(m => m.SubSubModel)) { @subSubModel.Html.Span(m => ko.Model.A + " " + subModel.GetIndex() + " " + mB) } }

एक नेस्टेड अभिव्यक्ति खुद में बदल जाएगी:

  <span data-bind="text : $parents[1].A()+' '+$parentContext.$index()+' '+B()"></span>

आप एक उदाहरण देख सकते हैं।

अन्य स्वादिष्ट बन्स

अन्य चीजों के अलावा, पुस्तकालय में कुछ अतिरिक्त कार्य हैं जो कभी-कभी जीवन को बहुत आसान बना सकते हैं:

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

सारांश

इसलिए संक्षेप में। नॉकआउट MVC की मुख्य विशेषताएं:

लोकप्रिय जॉक लाइब्रेरी नॉकआउट.जेएस पर आधारित
ASP.NET MVC3 के साथ पूर्ण एकीकरण
मॉडल-व्यू-व्यू मॉडल (MVVM) पैटर्न का उपयोग करके एप्लिकेशन बनाना
सभी डेटा बाइंडिंग (विशिष्ट गुणों और अभिव्यक्तियों के लिए) C # / VB में लिखे गए हैं
मॉडल को केवल एक बार सर्वर पर वर्णित करने की आवश्यकता है
IntelliSense सभी डेटा बाइंडिंग लिखने के लिए काम करता है
जावास्क्रिप्ट कोड लिखने की आवश्यकता नहीं है
और कनेक्टेड js-code का आकार बहुत छोटा है (संपीड़ित नॉकआउट में लगभग 40Kb लगता है)
Ajax का सक्रिय उपयोग - सभी सर्वर तरीके पृष्ठों को फिर से लोड किए बिना काम करते हैं
लघु संक्षिप्त वाक्य रचना जो लिखने में आसान हो और पढ़ने में आसान हो
विकास बहुत सरल है और एक नियमित अनुप्रयोग के निर्माण जैसा दिखता है - आप क्लाइंट-सर्वर इंटरैक्शन के बारे में पूरी तरह से भूल सकते हैं
लगभग कोई निर्भरता नहीं है: केवल नॉकआउट। जेएस (खुद के द्वारा) और jQuery (और यह सबसे अधिक संभावना है कि आप पहले से ही जुड़ा हुआ है)
क्रॉस-ब्राउज़र संगतता: IE 6+, फ़ायरफ़ॉक्स 2 +, ओपेरा 10+, क्रोम, सफारी
अन्य पुस्तकालयों के साथ पूर्ण संगतता (jQuery, प्रोटोटाइप और वह सब कुछ जो आप चाहते हैं)
विस्तृत प्रलेखन, एपीआई का विस्तृत विवरण, कई जीवित उदाहरण

नॉकआउट MVC - ASP.NET MVC के लिए नॉकआउट की बिजली