एमवीसी 3 रेजर @ एचटीएमएल। वैलिडेशन मैसेज jquery.load()

Question

के माध्यम से आंशिक लोड में काम नहीं कर रहा है, मैंने समस्या को दोहराने के लिए यहां एक छोटा सा उदाहरण दिया है। मैं एक जोरदार आंशिक दृश्य _Name.cshtml टाइप किया है:

@model ValidationInPartial.ViewModels.MyViewModel 

<h2>@ViewBag.Message</h2> 

    <fieldset> 
     <legend>Name</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.MyName) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.MyName) 
      @Html.ValidationMessageFor(model => model.MyName) 
     </div> 

     <a href="#" id="reload">Reload Name</a> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#reload").click(function() { 
      $("#divName").load("Home/NameReload"); 
     }); 
    }); 
</script> 

है कि शुरू में भरी हुई है और मुख्य Index.cshtml

<div id="divForm"> 
    @using (Html.BeginForm()) { 

     <div id="divName"> 
      @Html.Partial("_Name") 
     </div> 
    } 
</div> 

क्षेत्र MyName की आवश्यकता है और सत्यापन आवश्यक विशेषता के माध्यम से कार्यान्वित किया जाता है के अंदर प्रदर्शित किया जाता है अगर आप मैदान खाली वैध छोड़ने बनाएं बटन पर क्लिक करें MyViewModel

namespace ValidationInPartial.ViewModels 
{ 
    public class MyViewModel 
    { 
     [Required(ErrorMessage = "Please enter a Name.")] 
     public string MyName { get; set; } 
    } 
} 

पेज के बाद में पहली बार भरी हुई है, आयन संदेश "कृपया एक नाम दर्ज करें।" क्षेत्र के बगल में दिखाता है और क्षेत्र स्वयं गुलाबी हो जाता है, जो अपेक्षित व्यवहार है। अब "पुनः लोड का नाम" लिंक है, जो एक ajax कॉल (jquery.load (...)) बनाता है, आंशिक पुनः लोड है पर क्लिक करके, यहाँ नियंत्रक कोड है:

public PartialViewResult NameReload() 
{ 
    MyViewModel myViewModel = new MyViewModel(); 
    ViewBag.Message = "Name Reloaded"; 
    return PartialView("_Name", myViewModel); 
} 

इस बार यदि आप क्लिक करें फ़ील्ड को खाली छोड़कर बटन बनाएं, सत्यापन संदेश फ़ील्ड के बगल में दिखाई नहीं देता है, हालांकि फ़ील्ड गुलाबी हो जाती है। यह पता चला है कि आंशिक @ html.ValidationMessageFor को पुनः लोड करते समय सत्यापन संदेश पहली बार प्रस्तुत नहीं करता है।

यहाँ jQuery फ़ाइलें है मैं

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

का उपयोग मुझे आश्चर्य है अगर इस तरह से एक बग है उस्तरा इंजन renders @ Html.ValidationMessageFor या कि jQuery के साथ एक समस्या है? कोई विचार क्यों ऐसा होता है?

मैंने कहीं भी पढ़ा है कि AJAX कॉल पृष्ठ के लिए सभी स्क्रिप्ट खो देता है, वास्तव में मुझे आंशिक के अंदर कोई जावास्क्रिप्ट कोड रखना होगा ताकि उन्हें फिर से प्रस्तुत किया जा सके और फिर से उपयोग किया जा सके।

इस बीच में मैं एक समाधान के लिए मैन्युअल रूप से आंशिक में प्रस्तुत करने के लिए क्या @ Html.ValidationMessageFor जो है द्वारा प्रदान की गई होने वाली थी है जिसमें पाया गया:

<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="MyName"></span> 

हालांकि इस समाधान का अर्थ है कि हम प्रकार बदल अगर ViewModel में आवश्यक विशेषता के अंदर सत्यापन या केवल सत्यापन संदेश के लिए, हमें दृश्य में इस हार्ड-कोडित टुकड़े को संशोधित करने की आवश्यकता है।

Answer 1

@NickBork का यहां एक अच्छा जवाब है। कुंजी यह है कि एएसपी.नेट के एमवीसी रेंडरिंग इंजन सत्यापन स्क्रिप्ट को आउटपुट नहीं करता है अगर ऐसा नहीं लगता कि एक फॉर्म है। उदाहरण दिया गया हैक इसे एक फॉर्म में डालकर खरीदता है और फिर एचटीएमएल का एक आंतरिक भाग का चयन वापस कर दिया गया था, अनिवार्य रूप से फॉर्म के बाहरी आवरण को फेंक दिया गया था।

वहाँ एक और तरीका तो यह है कि आप बस अपने दृश्य प्राप्त कर सकते है:

ViewContext.FormContext = new FormContext(); 

इस विधि के साथ, वहाँ वास्तव में फार्म कोड उत्पादन नहीं होगा, लेकिन सत्यापन मार्कअप नहीं होगा।

धन्यवाद, जॉन

Answer 2

मुझे याद नहीं है कि मुझे समाधान कहां मिला। इसका कारण यह है कि आप एक दृश्य में पार्टिकल व्यू लोड कर रहे हैं जिसे jquery.validator.unobtrusive लाइब्रेरी द्वारा पहले ही पार्स किया गया है। आप विनीत पुस्तकालय

function ReparseValidation(){ 
     jQuery.validator.unobtrusive.parse("#yourcontainer"); 
    } 

Answer 3

मान्यता मार्कअप (अवधि टैग, कस्टम फ़ील्ड गुण, आदि) को फिर से पार्स करने के लिए प्रदान की गई नहीं कर रहे हैं जब तक आपके खेतों एक फार्म के भीतर समाहित कर रहे हैं की जरूरत है। प्रमाणीकरण प्लगइन स्वयं एक रूप के बाहर तत्वों के साथ काम नहीं करता है।

जब एएसपी.नेट आपके आंशिक दृश्य को प्रस्तुत करता है तो नियंत्रण एक रूप में नहीं होते हैं और इस प्रकार तत्वों को प्रस्तुत नहीं किया जाता है।

जब आप लोड करते हैं तो आप आंशिक सामग्री हैं, आपको jQuery चयनकर्ता का उपयोग करके HTML को पार्स करने की आवश्यकता होगी।

नीचे मेरे नमूने में मेरे पास मूल पृष्ठ पर एक टीबीओडीवाई है जिसमें पंक्तियां हैं। जब मुझे अतिरिक्त पंक्तियां जोड़ने की ज़रूरत होती है, तो मैं एक दृश्य को कॉल करता हूं जिसमें एक फॉर्म, टेबल, टैब और पंक्तियों का संग्रह होता है।

$.ajax({ 
    type: "POST", 
    url: "/controller/action", 
    data: ({Your: 'dataHere'}), 
    dataType: "html", 
    success: 
     function(response){ 
      $('tbody').append($('tbody',$(response)).html()); 

      //The validation plugin can't bind to the same form twice. 
      //We need to remove existing validators 
      $('form').removeData("validator"); 

      //Refresh the validators 
      $.validator.unobtrusive.parse(document); 
     }, 
    error: 
     function(){ 
      alert('An error occured while attempting to add the new content'); 
     } 
}); 

ध्यान दें कि मैं पंक्तियों को देखें/PartialView कि AJAX का उपयोग करके में लोड किए गए हैं के अंदर कर रहे हैं का चयन करने के लिए एक jQuery चयनकर्ता का उपयोग कर रहा:

$('tbody',$(response)).html() 

आवरण के बाकी सिर्फ संलग्न कर देता है बुला माता-पिता tbody लिए AJAX देखें/PartialView से पंक्तियों:

$('tbody').append($('tbody',$(response)).html()); 

एक जोड़े अन्य नोट्स, के बाद सत्यापनकर्ता प्लगइन एक फार्म पर चलाया जा रहा है, इसे फिर से नहीं कहा जा सकता बिना इसे फिर से जोड़ने (jquery.validate.unobtrusive not working with dynamic injected elements देखें)

इसे ठीक करने के, मैं पहले निम्न विधि सभी प्रमाणकों को दूर करने के लिए कॉल:

$('form').removeData("validator"); 
$("form").removeData("unobtrusiveValidation"); 

मैं तो का उपयोग कर प्रमाणकों ताज़ा निम्नलिखित:

$.validator.unobtrusive.parse(document);