javascript - jQuery - dynamically loading ASP.NET partial view into modal -
प्रश्न पृष्ठभूमि:
मेरे पास एक MVC परियोजना है जहां मैं कोशिश कर रहा हूं एक आंशिक दृश्य मोडल सामग्री को बनाने के लिए, जो उसके बाकी के संबंधित कोड modal मार्कअप में समाहित है और फिर अंत में एक 'मुख्य' modal Div।
कोड :
मुख्य मोडल div:
& lt; div class = "modal fade" id = "बेसिक मॉडेल" टैबिंडेक्स = "- 1" भूमिका = "डायलॉग" एरिया-लिबेलिबिल = "बेसिक मॉडेल" अरिया -छिपा = "सच" & gt; & Lt; / div & gt; मोडल सामग्री बनाने के लिए AddModal विधि के साथ मोडल पॉपअप को ट्रिगर करने के लिए:
& lt; स्क्रिप्ट & gt; $ (Document) .ready (function () {$ ("। बीटीएन")। क्लिक करें (फ़ंक्शन () {AddModal (); $ ("# basicModal")। मोडल ("शो");});}); & Lt; / स्क्रिप्ट & gt; मोडल बनाने के लिएAddModal विधि:AddModal = function () {var partialHtml = $ (@ HTML.Partial ("../Modal/Index", new {id = 1}) $ html = $ ('& lt; div class = "modal-dialog" & gt;' + '& lt; div class = "modal-content" & gt ;; & Lt; div class = "modal-header" & gt; '+' & lt; बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" aria-hidden = "true" & gt; एक्स & lt; / बटन & gt; '+' & lt; h4 class = "modal-title" id = "myModalLabel" & gt; मॉडल शीर्षक & lt; / h4 & gt; '+' & lt; / div & gt; '+' & lt; div class = "modal-body" Gt; '+ partialHtml +' & lt; / div & gt; '+' & lt; div वर्ग = "मोडल-पाद लेख" & gt; '+' & lt; बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-डीफॉल्ट" डेटा-खारिज = " '+' & Gt; बंद करें & lt; / button & gt; '+' & lt; बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" & gt; परिवर्तन सहेजें & lt; / button & gt; '+' & lt; / div & gt; '+' & lt; / Div & gt; '+' & lt; / div & gt; '); $ ( "# BasicModal") संलग्न ($ एचटीएमएल)। };
आंशिक दृश्य:
& lt; h4 & gt; आंशिक दृश्य का परीक्षण & lt; / h4 & gt;समस्या:
मैं
अनचाहे सिंटेक्स त्रुटि: अनपेक्षित टोकन & lt;की एक त्रुटि में भाग रहा हूँ आंशिक दृश्य के एचटीएमएल मार्कअप के कारण दिखाया गया है:< P> मैं सफलतापूर्वक इस फ़ॉरवर्ड स्लैश से कैसे बच सकता हूं ताकि मेरे आंशिक दृश्य से एचटीएमएल बाकी गतिशील रूप से जोड़ा गया मार्कअप में सही ढंग से जोड़ा जाए?var partialHtml = $ (& lt; h4 & gt; टेस्ट आंशिक दृश्य & lt; / h4 & gt;)
Html.Partial () का उपयोग करने के बजाय और एक जावास्क्रिप्ट स्ट्रिंग में संग्रहीत करने के बजाय, इस तकनीक का उपयोग करने पर विचार करें:
असल में, आपके AddModal () विधि, एक GET अनुरोध को बंद करें जो एक्शन को हिट करता है जो आंशिक दृश्य को HTML के रूप में देता है फिर, लौटे हुए HTML के साथ #basicModal की सामग्री को प्रतिस्थापित करें:
AddModal = function () {var partialHtml; Var url = '../Modal/Index?id=1'; $ .get (यूआरएल, फंक्शन (डेटा) {$ ("# बुनियादी मॉडेल")। Html (डेटा);}); }; मैंने इससे पहले मॉडल्स लोड करने के लिए इस तकनीक का उपयोग किया है और यह अच्छी तरह से काम करता है। हालांकि, ऐसा करने में एक समस्या यह है कि $। Get () एक async कॉल है, इसलिए .modal ("show") शायद डेटा को प्राप्त करने से पहले आग लगने वाली है। हम AddModal के द्वारा उत्पन्न किए गए वादे को $ द्वारा प्राप्त कर सकते हैं। Get () :
AddModal = function () {var partialHtml ; Var url = '../Modal/Index?id=1'; $ $ वापस लौटें (यूआरएल, फ़ंक्शन (डेटा) {$ ("# बुनियादी मॉडेल")। Html (डेटा);}); }; तब आप अपनी कॉलिंग लाइन को इसमें बदल सकते हैं:
AddModal ()। Done (function () {$ ("# basicModal")। मोडल ( "दिखाना"); });
Comments
Post a Comment