स्व AJAX: अपडेट ASP.Net MVC में आंशिक-दृश्य/नियंत्रक और नकल div

Question

मैं MVC में एक आंशिक दृश्य है ऐसा ही कुछ हो जाता है:

<div id="comments"> 
    ... 
</div> 

कि अंदर div एक रूप है कि एक कॉल है AJAX का उपयोग कर नियंत्रक और उसी आंशिक दृश्य को वापस ले जाता है। समस्या यह है कि दृश्य बुला के परिणामों div, न कि पूरी div की सामग्री को बदल है, और मैं अंत:

<div id="comments"> 
    <div id="comments"> 
     ... 
    </div> 
</div> 

एकमात्र समाधान मैं एएसपी में अनुभव के मेरे सप्ताह के साथ के बारे में सोच सकते हैं। नेट एमवीसी और AJAX आंशिक दृश्य के बाहर div को डालने और आंशिक दृश्य को केवल अंदर के हिस्से को रखना है, लेकिन फिर फॉर्म उस दृश्य के बाहर एक आईडी को संदर्भित करेगा जहां फॉर्म वहां स्थित छोटे encapsulation को तोड़ने के लिए स्थित है। क्या कोई बेहतर समाधान है?

Answer 1

क्या आप AjaxHelper.Form या jQuery का उपयोग कर रहे हैं। यदि आप jQuery का उपयोग कर रहे हैं, तो क्या आपने replaceWith() का उपयोग करने का प्रयास किया है? AjaxHelper का उपयोग कर आप AjaxOptions { InsertionMode = InsertionMode.Replace } का उपयोग कर रहे हैं? मुझे लगता है कि या तो आप आंशिक दृश्य से परिणामों के साथ पूरे डीआईवी को प्रतिस्थापित करने में सक्षम होंगे।

Answer 2

आपका (MS MVC form AJAXifying techniques पर मेरा उत्तर से) भी jQuery के साथ प्रयास करना चाहिए:

<script type="text/javascript"> 
    $(document).ready(function() { 
     ajaxify($('div#comments')); 
    }); 

    function ajaxify(divWithForm) { 
     var form = $('form', divWithForm); 
     $(':submit', form).click(function (event) { 
      event.preventDefault(); 
      $.post(form.attr('action'), form.serialize(), 
       function(data, status) { 
        if(status == 'success') { 
         var newDivWithForm = $(data); 
         ajaxify(newDivWithForm); 
         divWithForm.after(newDivWithForm).remove(); 
        } 
       } 
      ); 
     }); 
    } 
</script> 

Answer 3

AjaxOptions { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace } 

का उपयोग करना, '#myDiv' तत्व की पूरी सामग्री को प्रतिस्थापित करना चाहिए के रूप में tvanfosson कहते हैं। आपकी समस्या यह है कि '#myDiv' स्थित है।

<div id="myDiv"> 
    <% Html.RenderPartial("MyPartialView"); %> 
</div> 

जहां MyPartialView है:

<div id="comments"> 
    <% using (Ajax.BeginForm(new AjaxOptions() { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace })) {%>   
    ... 
    <input type="submit" value="Submit comment" /> 
    <% } %> 
</div> 

आप आंशिक दृश्य के अंदर '#myDiv' div शामिल करते हैं तो यह सही प्रतिक्रिया (एक साथ अपनी सामग्री के साथ) प्राप्त करने के बाद रेंडर किया जाएगा यहाँ एक उदाहरण है , और फिर इसकी सामग्री प्रतिक्रिया के साथ प्रतिस्थापित की जाएगी जो एक ही आंशिक दृश्य है (इसके अपने '#myDiv' div सहित), और यही कारण है कि आप हमेशा 2 नेस्टेड divs के साथ समाप्त होते हैं।

आपको हमेशा अपने आंशिक विचारों के लिए एक कंटेनर का उपयोग करना चाहिए और फिर UpdateTargetId को कंटेनर आईडी पर सेट करना चाहिए।

संपादित करें: मैंने आपके प्रश्न में वर्णित सटीक स्थिति का प्रतिनिधित्व करने के लिए कोड अपडेट किया है।

Answer 4

अविभाज्य अजाक्स लाइब्रेरी जो .NET MVC 3 के साथ जहाजों को कॉलबैक का उपयोग करती है जो jQuery.ajax से चार कॉलबैक पर आधारित होती हैं। हालांकि, InsertionMode = InsertionMode। Ajax.BeginForm विधि से बदलें परिणामस्वरूप jQuery की प्रतिस्थापन के साथ बुलाया जा रहा है। इसके बजाय, .html (डेटा) का लक्ष्य लक्ष्य तत्व के सामग्री को प्रतिस्थापित करने के लिए किया जाता है (और तत्व स्वयं नहीं)।

मैं अपने ब्लॉग पर इस समस्या का समाधान का वर्णन किया है: http://buildingwebapps.blogspot.com/2011/11/jquerys-replacewith-and-using-it-to.html

Answer 5

क्या आप समस्या हल हो?मैं एक ही मुद्दा था, लेकिन मैं इस पाया:

http://buildingwebapps.blogspot.ro/2011/11/jquerys-replacewith-and-using-it-to.html

मुझे आशा है कि यह आप में मदद करता है।

Answer 6

मैं Asp.Net MVC में यह एक ही समस्या थी 5.

मैं PartialView क्या div इसके भीतर शामिल किया जा सकता है के बारे में कुछ जानकारी नहीं करना चाहता था, इसलिए मैं चारों ओर है कि काम को स्वीकार नहीं किया।

फिर, मैं अन्य उत्तर ReplaceWith की चर्चा करते हुए देखा और सरल समाधान पाया: ही बाहर के नाम पर किसी भी निर्भरता बिना

InsertionMode = InsertionMode.ReplaceWith 

अब, MVC आंशिक दृश्य पूरी तरह से अपने आप ajax सहायकों के साथ बदल सकते हैं।