ASP.Net MVC में विनीत सत्यापन द्वारा उत्पन्न HTML कोड को समझना

यह ASP.Net MVC सीरीज़ में अंडरस्टैंडिंग विनीत मान्यता का भाग 2 है

1. अंदर jQuery के मान्य प्लगइन काम करते हैं
2. ASP.Net MVC में विनीत सत्यापन द्वारा उत्पन्न HTML कोड को समझना
3. ASP.Net MVC में विनीत jQuery के मान्य प्लगइन का आंतरिक कार्य।

हम इस लेख में क्या बात करेंगे:

• विनीत जावास्क्रिप्ट आइडिया
• सामान्य और विनीत मान्यता के बीच का अंतर
• विनीत मान्यता को समझना:
  
  • इनपुट तत्व, उनकी मान्यता के नियम और वे कैसे काम करते हैं
  • सत्यापन संदेश और वे कैसे विनीत सत्यापन में काम करते हैं।
  
  

विनीत जावास्क्रिप्ट का मूल विचार

Microsoft ने MVC के पहले संस्करण में पहला सत्यापन मॉड्यूल पेश किया। प्रत्येक संस्करण के साथ मॉड्यूल में सुधार हुआ, और ASP.Net MVC 3 में एक विनीत मान्यता के रूप में बदल गया।
संक्षेप में, यहां तक ​​कि आधुनिक जावास्क्रिप्ट में, जिसे हम मुख्य रूप से एक अलग जेएस फाइल में लिखते हैं, हमें कभी-कभी एचटीएमएल से संबंधित डेटा की आवश्यकता होती है, और इसलिए एचटीएमएल पेज के अंदर जावास्क्रिप्ट ऑब्जेक्ट्स के मेटाडेटा लिखते हैं। हम js फ़ाइल से फ़ंक्शन को कॉल करते हैं, जिससे हम पृष्ठ पर ऑब्जेक्ट के मेटाडेटा को पास करते हैं।

विनीत जावास्क्रिप्ट के लक्ष्यों में से एक है जावास्क्रिप्ट को HTML मार्कअप से अलग करना।
आप इसके बारे में और अधिक यहाँ पढ़ सकते हैं (लेखक हमें अंग्रेज़ी भाषा विकिपीडिया पर विनीत जावास्क्रिप्ट के बारे में एक लेख के लिए संदर्भित करता है। लगभग। अनुवादक)

सामान्य और विनीत मान्यता के बीच का अंतर।

नीचे MVC 2 सत्यापन और विनीत MVC 3 सत्यापन का उपयोग करके उत्पन्न मॉडल कोड और HTML मार्कअप है।

हमारा मॉडल
C #

public class ValidationModel { [Required] public string FirstName { get; set; } [Required, StringLength(60)] public string LastName { get; set; } [Range(1, 130)] public int Age { get; set; } } 

MVC 2 में एचटीएमएल हेल्पर एस का उपयोग करके प्रतिनिधित्व
एचटीएमएल

 <label for="FirstName">FirstName</label> <input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" /> <span id="FirstName_validationMessage" class="field-validation-valid"></span> <label for="LastName">LastName</label> <input id="LastName" class="text-box single-line" type="text" name="LastName" value="" /> <span id="LastName_validationMessage" class="field-validation-valid"></span> <label for="Age">Age</label> <input id="Age" class="text-box single-line" type="text" name="Age" value="" /> <span id="Age_validationMessage" class="field-validation-valid"></span> <script type="text/javascript">// <![CDATA[ if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; } window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The FirstName field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":true,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The LastName field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field LastName must be a string with a maximum length of 60.","ValidationParameters":{"max":60},"ValidationType":"length"}]},{"FieldName":"Age","ReplaceValidationMessageContents":true,"ValidationMessageId":"Age_validationMessage","ValidationRules":[{"ErrorMessage":"The field Age must be between 1 and 130.","ValidationParameters":{"min":1,"max":130},"ValidationType":"range"},{"ErrorMessage":"The Age field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Age must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"form0","ReplaceValidationSummary":true,"ValidationSummaryId":"validationSummary"}); // ]]></script> 

MVC 3 में एचटीएमएल हेल्पर और विनीत सत्यापन का उपयोग करके प्रतिनिधित्व
एचटीएमएल

 <label for="FirstName">FirstName</label> <input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." /> <label for="LastName">LastName</label> <input id="LastName" class="text-box single-line" type="text" name="LastName" value="" data-val="true" data-val-length="The field LastName must be a string with a maximum length of 60." data-val-length-max="60" data-val-required="The LastName field is required." /> <label for="Age">Age</label> <input id="Age" class="text-box single-line" type="text" name="Age" value="" data-val="true" data-val-number="The field Age must be a number." data-val-range="The field Age must be between 1 and 130." data-val-range-max="130" data-val-range-min="1" data-val-required="The Age field is required." /> 

यह कोड ब्रैड विल्सन के लेख "ASP.NET MVC 3 में विनीत ग्राहक सत्यापन" से लिया गया है ।
जैसा कि हम देख सकते हैं, HTML "इनपुट" तत्वों को पता नहीं है कि उनके लिए क्या सत्यापन नियम लागू होते हैं। केवल एक बड़ी जावास्क्रिप्ट ऑब्जेक्ट है जिसमें पृष्ठ के प्रत्येक तत्व पर लागू सत्यापन जानकारी शामिल है।
दूसरी ओर, यदि हम MVC 3 द्वारा उत्पन्न "इनपुट" तत्वों को देखते हैं, तो हम देखेंगे कि उनमें अधिक मेटाडेटा है। सत्यापन के लिए आवश्यक सभी जानकारी डेटा में निहित है- * विशेषताएँ। जावास्क्रिप्ट जावास्क्रिप्ट ऑब्जेक्ट की कोई आवश्यकता नहीं है

विनीत मान्यता को समझना

1. "इनपुट" तत्व, उनका सत्यापन नियम और वे कैसे काम करते हैं

तो, आइए जानें कि "डेटा- *" विशेषताओं के साथ क्या होता है।

MVC सत्यापन नियमों के आधार पर "डेटा- *" विशेषताएँ बनाता है।
jquery.validate.unobtrusive नियमों को पढ़ता है और उन्हें एक पथ में परिवर्तित करता है।
विनीत मान्यता द्वारा इन नियमों को परिवर्तित करने के बाद, यह "मान्य ()" विधि को बुलाएगा और उन्हें मान्य करने के लिए अपनी सेटिंग्स के साथ नियमों की एक सरणी में पास करेगा।

किसी भी HTML तत्व के विनीत नियम के तीन भाग हैं:

• data-val = "true" सिर्फ एक ध्वज है जो दर्शाता है कि एक विनीत मान्यता तत्व से जुड़ी है।
• data-val-rulename = "संदेश" - दो काम करता है। डेटा-वैल-रूलेन का हिस्सा नियम के नाम को इंगित करता है, और सत्यापन संदेश का पाठ संदेश में लिखा जाता है।
• डेटा-वैल- rulename-extravalues ​​= "मान" सत्यापन को पूरा करने के लिए सत्यापन नियम द्वारा आवश्यक अतिरिक्त मान जोड़ने के लिए। (उदाहरण के लिए, मानों की एक श्रेणी की "श्रेणी" को मान्य करते समय जब मूल्य कुछ मूल्य से कम और किसी अन्य से अधिक होना चाहिए)
  

उत्पन्न इनपुट तत्व पर अधिक विस्तार से विचार करें और डेटा की व्याख्या करें- * विशेषताएँ।

 <input id="Name" class="ignore" type="text" name="Name" value="" data-val="true" data-val-required="*" data-val-atleastonerequired="Enter at least Name, Email or Lastname" data-val-atleastonerequired-attributes="Email,LName" /> 

एक तत्व पर दो नियम लागू होते हैं। एक अंतर्निहित विशेषता "आवश्यक" है, और दूसरा अपना स्वयं का है, जिसे "एटलस्टेरोनक्वायर्ड" कहा जाता है।
जब उपयोगकर्ता कोई डेटा दर्ज नहीं करता है और "सबमिट फ़ॉर्म" पर क्लिक करता है, तो "*" एक सत्यापन संदेश के रूप में प्रकट होता है जो इंगित करता है कि तत्व की आवश्यकता है।
यदि उपयोगकर्ता "atleastonerequired" नियम का उल्लंघन करता है, तो उसका सत्यापन संदेश दिखाई देगा।

2. सत्यापन संदेश और वे कैसे विनीत सत्यापन में काम करते हैं।

एक उदाहरण से शुरू करते हैं।

 <!-- Required input using unobtrusive validation --> <input id="FirstName" class="text-box single-line" type="text" name="FirstName" value="" data-val="true" data-val-required="The FirstName field is required." /> <!-- The input's validation message placeholder --> <span data-valmsg-replace="true" data-valmsg-for="Name" class="field-validation-valid help-inline" /> 

जैसा कि हम देख सकते हैं, त्रुटि संदेश के लिए कंटेनर में दो "डेटा- *" तत्व हैं

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

यदि सत्यापन नियमों में से एक का उल्लंघन किया जाता है, तो "वर्ग" विशेषता के मान में "फ़ील्ड-सत्यापन-त्रुटि" होगी, और यदि नहीं, तो "फ़ील्ड-सत्यापन-वैध"।

नदीम खेडर के लेख का अनुवाद "Asp.net LVVC में विनीत मान्यता द्वारा उत्पन्न Html को समझें"

अद्यतन ०६/०१/१३: श्रृंखला में अन्य पदों के लिए लिंक जोड़ा गया