ASP.NET MVC: JQuery.Validate.Hooks + Tipsy का उपयोग करके ग्राहक सत्यापन प्रदर्शन को अनुकूलित करना

ASP.NET MVC फ्रेमवर्क बॉक्स से बाहर सर्वर और क्लाइंट सत्यापन दोनों को करने के लिए बहुत आसान बनाता है। अपने मॉडलों में DataAnnotations का उपयोग करना डेवलपर के लिए सत्यापन प्रक्रिया को सबसे आसान एल्गोरिदम बनाता है। बदले में, फ्रेमवर्क JQuery सत्यापन का उपयोग कर त्रुटियों को प्रदर्शित कर सकता है, या अधिक जटिल स्थितियों के मामले में, सर्वर सत्यापन के बाद त्रुटियों को वापस किया जा सकता है। यहां एक छोटे मॉडल और त्रुटि क्षेत्रों में संबंधित सत्यापन संदेशों का एक उदाहरण है।





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

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

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

हमारा लक्ष्य पिछले फॉर्म को निम्नलिखित फॉर्म में लाना है:



आइए अपने फॉर्म के रेजर मार्कअप से शुरू करें।

@model WebUI.ViewModels.LinkViewModel @using (Html.BeginForm("AddLink", "Links", FormMethod.Post, new { enctype = "multipart/form-data", name = "AddLinkForm", @class = "add-link" })) { <h2> <b>Add a new link</b><a href="#">(?)</a></h2> <div class="right"> <div class="fields"> <div class="close-button" id="hide_form_link"></div> <div id="cell"> <div class="text-field name-url"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model=>model.Name, null, new {style="display:none;"}) </div> </div> <div id="cell"> <div class="text-field for-file"> @Html.TextBoxFor(model => model.Link, new { @class = "file_1", @type = "file" }) @Html.ValidationMessageFor(model => model.Link, null, new { style = "display:none;" }) </div> </div> <div id="cell"> <div class="text-field price-url"> @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price, null, new { style = "display:none;" }) </div> </div> </div> <div class="button"> <span class="left-bg"></span><span class="right-bg">Add link </span> <input type="submit" name="" /> </div> </div> <div class="clearFix"> </div> } 

यहां सब कुछ मानक है, मैं केवल कुछ विवरण नोट करूंगा:

• प्रत्येक इनपुट को एक अतिरिक्त ब्लॉक में लपेटा जाता है ;
  सत्यापन संदेश style = "display:none;" विशेषता का उपयोग कर छिपा हुआ है ।
  
  यह सब, सरल चरणों के माध्यम से हमने रंग को सत्यापन त्रुटियों को उजागर करने के लिए हमारे रूप को अनुकूलित किया, और इसी तत्व के ऊपर मंडराने पर टूलटिप्स के रूप में सत्यापन संदेशों के आउटपुट को भी लागू किया।