ASP.NET रेजर: व्यू मॉडल के लिए कुछ आर्किटेक्चर मुद्दों को हल करना

परिचय

नमस्कार साथियों!
आज मैं रेजर टेम्पलेट इंजन का उपयोग करके ASP.NET वेब अनुप्रयोगों के विकास के भाग के रूप में मॉडल मॉडल को विकसित करने में अपना अनुभव आपके साथ साझा करना चाहता हूं।
इस आलेख में वर्णित तकनीकी कार्यान्वयन एएसपी के सभी वर्तमान संस्करणों के लिए उपयुक्त हैं । NET ( MVC 5 , कोर , आदि)। यह लेख उन पाठकों के लिए है जो कम से कम पहले से ही इस स्टैक के साथ काम करने का अनुभव रखते थे। यह भी ध्यान देने योग्य है कि इस के ढांचे में, हम दृश्य मॉडल की उपयोगिता और इसके काल्पनिक अनुप्रयोग पर विचार नहीं करते हैं (यह माना जाता है कि पाठक पहले से ही इन चीजों से परिचित है), हम सीधे कार्यान्वयन पर चर्चा करते हैं।

कार्य

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

कार्यान्वयन

मॉडल को निम्न प्रकार से देखें (सादगी के लिए, इस तरह की चीजों को नौवहन गुण और इतने पर नहीं दिया गया है):

class Transport { public int Id { get; set; } public int TransportTypeId { get; set; } public string Number { get; set; } } 

बेशक, TransportTypeId प्रकार की वस्तु के लिए एक विदेशी कुंजी है TransportType :

 class TransportType { public int Id { get; set; } public string Name { get; set; } } 

फ्रंटएंड और बैकएंड के बीच कनेक्शन के लिए हम डेटा ट्रांसफर ऑब्जेक्ट टेम्पलेट का उपयोग करेंगे। तदनुसार, कार जोड़ने के लिए डीटीओ कुछ इस तरह दिखाई देगा:

 class TransportAddDTO { [Required] public int TransportTypeId { get; set; } [Required] [MaxLength(10)] public string Number { get; set; } } 

* System.ComponentModel.DataAnnotations से मानक सत्यापन विशेषताओं का उपयोग करता है।

यह जानने का समय है कि कार के ऐड पेज के लिए व्यू मॉडल क्या होगा। कुछ डेवलपर्स ख़ुशी से घोषणा करते हैं कि TransportAddDTO स्वयं ऐसा होगा, हालाँकि, यह मौलिक रूप से गलत है, क्योंकि इस वर्ग में सीधे तौर पर इस तरह से "crammed" कुछ भी नहीं हो सकता है सिवाय एक नए तत्व (परिभाषा के) को जोड़ने के लिए आवश्यक बैकएंड जानकारी के। इसके अलावा, ऐड पेज पर अन्य डेटा की आवश्यकता हो सकती है: उदाहरण के लिए, वाहन प्रकारों की एक निर्देशिका (जिसके आधार पर TransportTypeId को बाद में व्यक्त किया गया है)। इस संबंध में, निम्न देखें मॉडल स्वयं सुझाव देता है:

 class TransportAddViewModel { public IEnumerable<TransportTypeDTO> TransportTypes { get; set; } } 

जहां इस मामले में TransportTypeDTO , TransportType का प्रत्यक्ष मानचित्रण होगा (और यह हमेशा के मामले से बहुत दूर है - दोनों के बीच कटाव की दिशा में और विस्तार की दिशा में):

 class TransportTypeDTO { public int Id { get; set; } public string Name { get; set; } } 

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

 class TransportAddViewModel { public TransportAddDTO AddDTO { get; set; } public IEnumerable<TransportTypeDTO> TransportTypes { get; set; } } 

अब पहली समस्याएं शुरू होती हैं। चलो हमारी .cshtml फ़ाइल में पृष्ठ पर "वाहन संख्या" के लिए एक मानक टेक्स्टबॉक्स जोड़ने की कोशिश करें (इसे TransportAddView.cshtml होने दें):

 @model TransportAddViewModel @Html.TextBoxFor(m => m.AddDTO.Number) 

यह इस तरह से HTML कोड में प्रस्तुत करेगा:

 <input id="AddDTO_Number" name="AddDTO.Number" /> 

कल्पना करें कि वाहनों को जोड़ने की विधि के साथ नियंत्रक का हिस्सा इस तरह दिखता है ( कोर के लिए एमवीसी 5 के अनुसार कोड, यह थोड़ा अलग होगा, लेकिन सार समान है ):

 [Route("add"), HttpPost] public ActionResult Add(TransportAddDTO transportAddDto) { //     transportAddDto... } 

यहाँ हम कम से कम दो समस्याएं देखते हैं:

1. Id और Name विशेषताओं में AddDTO उपसर्ग है, और, बाद में, यदि मॉडल बाइंडिंग सिद्धांत का उपयोग करके नियंत्रक में परिवहन जोड़ने की विधि क्लाइंट से आए डेटा को TransportAddDTO में बाँधने का प्रयास करती है, तो अंदर की वस्तु पूरी तरह से शून्य (डिफ़ॉल्ट मान) से मिलकर बनेगी, यानी यह सिर्फ एक नया खाली उदाहरण होगा। यह तार्किक है - प्रपत्र संख्या के बाइंडर अपेक्षित नाम, AddDTO_Number नहीं।
2. सभी मेटा गुण चले गए हैं, अर्थात् डेटा-वैल-आवश्यक और अन्य सभी जिन्हें हमने सावधानी से AddDTO में मान्यता विशेषताओं के रूप में वर्णित किया है। रेजर की पूरी शक्ति का उपयोग करने वालों के लिए, यह महत्वपूर्ण है, क्योंकि यह दृश्यपटल के लिए जानकारी का एक महत्वपूर्ण नुकसान है।
   हम भाग्यशाली हैं, और उनके पास इसके समान निर्णय हैं।

उदाहरण के लिए, उपयोग करते समय ये चीजें "काम" करती हैं, @Html.Kendo().TextBoxFor() यूआई के लिए रैपर (यानी @Html.Kendo().TextBoxFor() , आदि)।

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

 class TransportAddViewModel { public TransportAddDTO AddDTO { get; set; } = new TransportAddDTO(); public IEnumerable<TransportTypeDTO> TransportTypes { get; set; } } 

इन परिवर्तनों के बाद, परिणाम निम्नानुसार होगा:

 <input data-val="true" id="AddDTO_Number" name="AddDTO.Number" data-val-required="The Number field is required." data-val-length="The field Number must be a string with a maximum length of 10." data-val-length-max="10" /> 

पहले से बेहतर! यह पहली समस्या से निपटने के लिए बनी हुई है - इसके साथ, वैसे, सब कुछ कुछ अधिक जटिल है।
इसे समझने के लिए, पहले आपको यह पता लगाने की आवश्यकता है कि रेज़र (जिसका अर्थ है वेबव्यूपेज, जिसका एक उदाहरण अंदर .cshtml इस प्रकार उपलब्ध है) एक एचटीएमएल गुण है जिसे हम TextBoxFor कॉल करने के लिए TextBoxFor ।
इसे देखते हुए, आप तुरंत समझ सकते हैं कि यह HtmlHelper<T> प्रकार का है, हमारे मामले में, HtmlHelper<TransportAddViewModel> । समस्या का एक संभावित समाधान उत्पन्न होता है - अपने स्वयं के HtmlHelper को बनाने के लिए, और एक इनपुट के रूप में हमारे TransportAddDTO को पास करें। हम इस वर्ग के उदाहरण के लिए सबसे छोटा संभव कंस्ट्रक्टर पाते हैं:

 HtmlHelper<T>.HtmlHelper(ViewContext viewContext, IViewDataContainer viewDataContainer); 

हम इसके माध्यम से सीधे अपने WebViewPage उदाहरण से ViewContext पास कर सकते हैं। अब आइए यह पता करें कि एक वर्ग का एक उदाहरण प्राप्त करने के लिए जो IVIVDataContainer इंटरफ़ेस लागू करता है। उदाहरण के लिए, अपना कार्यान्वयन बनाएं:

 public class ViewDataContainer<T> : IViewDataContainer where T : class { public ViewDataDictionary ViewData { get; set; } public ViewDataContainer(object model) { ViewData = new ViewDataDictionary(model); } } 

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

 var vdc = new ViewDataContainer<TransportAddDTO>(Model.AddDTO); 

तदनुसार, कोई नई HtmlHelper बनाने में कोई समस्या नहीं है:

 var Helper = new HtmlHelper<T>(this.ViewContext, vdc); 

अब आप निम्नलिखित का उपयोग कर सकते हैं:

 @model TransportAddViewModel @{ var vdc = new ViewDataContainer<TransportAddDTO>(Model.AddDTO); var Helper = new HtmlHelper<T>(this.ViewContext, vdc); } @Helper.TextBoxFor(m => m.Number) 

यह इस तरह से HTML कोड में प्रस्तुत करेगा:

 <input data-val="true" id="Number" name="Number" data-val-required="The Number field is required." data-val-length="The field Number must be a string with a maximum length of 10." data-val-length-max="10" /> 

जैसा कि आप देख सकते हैं, अब प्रदान किए गए तत्व के साथ कोई समस्या नहीं है, और यह पूर्ण उपयोग के लिए तैयार है। यह कोड को केवल "कंघी" करने के लिए ही रहता है ताकि यह कम भारी न दिखे। उदाहरण के लिए, हम अपने ViewDataContainer को इस प्रकार बढ़ाते हैं:

 public class ViewDataContainer<T> : IViewDataContainer where T : class { public ViewDataDictionary ViewData { get; set; } public ViewDataContainer(object model) { ViewData = new ViewDataDictionary(model); } public HtmlHelper<T> GetHtmlHelper(ViewContext context) { return new HtmlHelper<T>(context, this); } } 

फिर रेजर से आप इस तरह काम कर सकते हैं:

 @model TransportAddViewModel @{ var Helper = new ViewDataContainer<TransportAddDTO>(Model.AddDTO).GetHtmlHelper(ViewContext); } @Helper.TextBoxFor(m => m.Number) 

इसके अलावा, कोई भी WebViewPage के मानक कार्यान्वयन को विस्तारित करने के लिए परेशान नहीं करता है ताकि इसमें वांछित संपत्ति (डीटीओ वर्ग के उदाहरण के लिए एक सेटर के साथ) शामिल हो।

निष्कर्ष

इससे समस्या हल हो गई, और रेज़र के साथ काम करने के लिए व्यू मॉडल आर्किटेक्चर भी मिला, जिसमें संभवतः सभी आवश्यक तत्व शामिल हो सकते हैं।

यह ध्यान देने योग्य है कि परिणामी ViewDataContainer सार्वभौमिक हो गया है, और उपयोग के लिए उपयुक्त है।

यह हमारी .cshtml फ़ाइल में कुछ बटन जोड़ने के लिए बना हुआ है, और कार्य पूरा हो जाएगा (बैकएंड पर प्रसंस्करण पर विचार नहीं करते हुए)। यह मैं अपने दम पर करने का प्रस्ताव करता हूं।

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

निष्ठा से,
पीटर ओसब्रिज