एएसपी.नेट एमवीसी

Question

के साथ jQuery सत्यापन को मैन्युअल रूप से सक्षम करने के लिए कैसे करें मैं एएसपी.नेट एमवीसी के साथ वायर्ड के रूप में jQuery सत्यापन के कुछ मूलभूत बातें समझने के लिए संघर्ष कर रहा हूं।

इस प्रश्न का संक्षिप्त संस्करण यह है: मैं कौन सा जादू खो रहा हूं जो jQuery सत्यापन को करने के लिए @Html.EditorFor() द्वारा उत्पादित कोड की अनुमति देता है, लेकिन काम नहीं करता है, मैं एक ही HTML का उपयोग करके अपने स्वयं के jQuery सत्यापन को तार करने का प्रयास करता हूं?

एक सीखने अभ्यास के रूप में (और क्योंकि यह की नकल करता क्या मैं वास्तव में मेरे वेबसाइट में क्या करना चाहते हैं) मैं दृश्य स्टूडियो 2012 में एक नया MVC 4 एप्लिकेशन मैं एक दृश्य मॉडल जोड़ा बनाया:

using System.ComponentModel.DataAnnotations; 
namespace ValidationTest.Models 
{ 
    public class MyViewModel 
    { 
     [Required] 
     public string MyStringValue { get; set; } 
    } 
} 

और मैं संशोधित दृश्य \ होम \ Index.cshtml इस तरह मेरे विचार मॉडल पर आधारित एक बनाने के लिए करें:

@model ValidationTest.Models.MyViewModel 
@using (Html.BeginForm(new { id = "MyForm" })) { 
    @Html.LabelFor(m => m.MyStringValue) 
    @Html.EditorFor(m => m.MyStringValue) 
    @Html.ValidationMessageFor(m => m.MyStringValue) 

    <br /> 
    <input type="submit" value="Submit" /> 
} 

अंत में, मैं घर नियंत्रक की तरह, फार्म के लिए दृश्य मॉडल की आपूर्ति करने और संबद्ध पोस्ट को संभालने के लिए संशोधित यह:

using System.Web; 
using System.Web.Mvc; 
using ValidationTest.Models; 

namespace ValidationTest.Controllers 
{ 
    public class HomeController : Controller 
    { 
     [HttpGet] 
     public ActionResult Index() 
     { 
      var viewModel = new MyViewModel(); 
      return View(viewModel); 
     } 

     [HttpPost] 
     public ActionResult Index(MyViewModel viewModel) 
     { 
      if (!ModelState.IsValid) return View(viewModel); 

      return RedirectToAction("About"); 
     } 

     public ActionResult About() 
     { 
      ViewBag.Message = "Your app description page."; 
      return View(); 
     } 

     public ActionResult Contact() 
     { 
      ViewBag.Message = "Your contact page."; 
      return View(); 
     } 
    } 
} 

जब मैं प्रोजेक्ट चलाता हूं, तो वेब पेज एक टेक्स्ट बॉक्स प्रदर्शित करता है और जादुई रूप से मान्य करता है कि उपयोगकर्ता को एक मान दर्ज करना होगा। अब तक बहुत अच्छा ...

अब, मेरा वास्तविक ऐप एक ऑनलाइन सर्वेक्षण है। यह एक स्क्रिप्ट के आधार पर प्रश्नों और अनुरोधों को हल करता है। मेरे वास्तविक व्यूमोडेल में वे गुण होते हैं जो प्रश्न के पाठ, उपयोगकर्ता द्वारा प्रदान किए गए मूल्य इत्यादि में मैप करते हैं। व्यूमोडेल में एक बूलियन आवश्यक संपत्ति भी होती है जो निर्दिष्ट करती है कि उपयोगकर्ता को मूल्य प्रदान करना चाहिए या नहीं (यानी, सक्षम करने के लिए या नहीं दृश्य में "आवश्यक" सत्यापन) - इसलिए इसका मतलब है कि मुझे अपने व्यूमोडेल में MyStringValue प्रॉपर्टी पर [Required] विशेषता को निकालना होगा और व्यूमोडेल में आवश्यक संपत्ति के आधार पर अपना स्वयं का सत्यापन जादू प्रदान करना होगा।

यह वह जगह है जहां मैं खो जाता हूं। आईई में, मैं देख सकता हूँ कि @ html.xxx नमूना एप्लिकेशन (ऊपर उल्लिखित है) में कॉल फार्म के लिए इस HTML पैदा करता है:

<label for="MyStringValue">MyStringValue</label> 
<input class="text-box single-line" 
     data-val="true" 
     data-val-required="The MyStringValue field is required." 
     id="MyStringValue" 
     name="MyStringValue" 
     type="text" 
     value="" /> 
<span data-valmsg-for="MyStringValue" data-valmsg-replace="true"></span> 

लेकिन मैं किसी भी HTML कहीं पृष्ठ पर नहीं दिख रहा है कि स्पष्ट रूप से संदर्भ jQuery-सत्यापन लाइब्रेरी, और न ही मुझे जावास्क्रिप्ट कोड दिखाई देता है जो सत्यापन को सक्षम बनाता है, इसलिए मुझे समझ में नहीं आता कि यह बिल्कुल क्यों काम करता है।

इसके अलावा, अगर मैं [Required] विशेषता को हटा देता हूं, और ऊपर दिए गए HTML को छोड़ने के लिए दृश्य को हार्ड कोड (जादू @ html.xxx() कॉल के बिना) तो कोई सत्यापन नहीं होता है।

मुझे क्या याद आ रही है?

Answer 1

हाँ, मैं वास्तव में कुछ मौलिक याद कर रहा था।

पृष्ठ टेम्पलेट (_Layout.cshtml) एक नई MVC 4 परियोजना के लिए बनाए गए पृष्ठ के अंत में इस कोड में शामिल हैं:

 @Scripts.Render("~/bundles/jquery") 
     @RenderSection("scripts", required: false) 
    </body> 
</html> 

कि कोड पर HTML के सभी के बाद jQuery पुस्तकालय (में खींचती है पेज ब्राउज़र द्वारा देखा गया है) और उसके बाद एक वैकल्पिक "सेक्शन" प्रस्तुत करता है जिसे दृश्य द्वारा आपूर्ति की जा सकती है। वह कोड jQuery सत्यापन लायब्रेरी में खींचता है।

एएसपी.नेट एमवीसी सत्यापन jQuery सत्यापन के बिना काम करता है, लेकिन सर्वर में सभी सत्यापन किया जाता है। सावधान पर्यवेक्षक ध्यान देंगे कि, एक बार चेतावनी दी जाती है कि एक लापता स्ट्रिंग मान की आपूर्ति की जानी चाहिए, क्लाइंट-साइड सत्यापन चेतावनी को टेक्स्ट बॉक्स में केवल एक वर्ण दर्ज करके चेतावनी देता है। लेकिन jQuery सत्यापन सक्षम किए बिना, टेक्स्ट बॉक्स में टाइप करना गतिशील रूप से चेतावनी को हटा नहीं देता है।

एकल दृश्य के लिए jQuery सत्यापन को चालू करने के लिए, इस कोड को दृश्य की सीएसटीएमएल फ़ाइल में कहीं भी रहने की आवश्यकता है (स्टाइलिस्टिक रूप से, यह फ़ाइल के अंत में होना चाहता है क्योंकि यह अंत में दिखाई देगा एचटीएमएल) की:

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

तो, मेरे सवाल का संक्षिप्त उत्तर मेरे विचार \ होम \ Index.cshtml फ़ाइल के अंत में इसके बाद के संस्करण कोड जोड़ने के लिए है। यह jQuery सत्यापन को सक्षम बनाता है, जादू होता है, और डेटा-xxx विशेषताओं को अब अनदेखा नहीं किया जाता है। ज़िंदगी अच्छी है।

Answer 2

कोई जादू नहीं है जिसे आप याद कर रहे हैं। Microsoft 'अविभाज्य सत्यापन' स्क्रिप्ट का उपयोग किसी भी वेबसाइट पर किया जा सकता है जो jquery और jquery मान्य का उपयोग करता है। यह एएसपी.नेट से जुड़ा नहीं है - जब तक एचटीएमएल प्रारूप है जो अविभाज्य स्क्रिप्ट की अपेक्षा करता है, तो स्क्रिप्ट काम करेगी। This fiddle shows the unobtrusive script applied to a form not produced by ASP.NET।

1. jquery.validate प्रारंभ:

   विनीत स्क्रिप्ट दो मुख्य कार्य है।जे एस प्लगइन

2. डेटा-वैल पढ़ें * मार्कअप में विशेषताओं और jQuery मान्य नियमों

As you may have read में इस का अनुवाद, मार्कअप जिम्मेदार बताते हैं कि विनीत स्क्रिप्ट पढ़ता हैं के रूप में इस प्रकार है

data-val="true" 
data-val-rulename="message" 
data-val-rulename-paramname1="paramvalue" 
data-val-rulename-paramname2="paramvalue" 

तो एक इनपुट फ़ील्ड इस तरह दिख सकता है

<input 
    data-val="true" 
    data-val-required="This field is required..." 
    data-val-number="Please enter a number..." 
    data-val-range="Must be between 50 and 100...", 
    data-val-range-min="50" 
    data-val-range-max="100" 
    id="mynumber" 
    name="mynumber" 
    type="text" value="" /> 

अविभाज्य स्क्रिप की मेरी व्यक्तिगत राय टी यह है कि यह his MVC book में स्टीव सैंडर्सन को 'डेमोवर' कहता है। यह बॉक्स से कुछ अच्छी चीजें करता है लेकिन it hobbles jquery validate जो अपने आप उपयोग करना बहुत आसान है। जब मैं एक नई परियोजना शुरू करता हूं तो मैं इसे हटाना चाहता हूं।