AJAX MVC 4 में AJAX एकीकरण

संभवतः अब कोई वेब डेवलपर नहीं है जिसने अजाक्स के बारे में नहीं सुना है। Microsoft इस स्थिति में अलग नहीं हो सकता है, प्रत्येक रिलीज़ के साथ यह हमारे लिए ASP.NET MVC डेवलपर्स के लिए जीवन को आसान बनाने की कोशिश करता है। लेकिन इससे पहले कि मैं लेख जारी रखूं, मैं विषय से थोड़ा हटकर हूं।

जब मैं एमवीसी ढांचे से परिचित हुआ, तब यह केवल दूसरे संस्करण में था, और @Ajax.... जैसे सहायकों के साथ सामना किया, स्पष्ट रूप से, ग्राहक पक्ष पर उनके कार्यान्वयन ने मुझे प्रभावित नहीं किया। नहीं, नहीं, मैंने खुद से सोचा, मेरे पास $.ajax साथ jQuery है, मेरी नज़र में यह मेरे पास है। इसलिए मैं कई सालों तक उनके बारे में भूल गया, अपने बड़े अफसोस के साथ, तीसरी रिलीज के साथ इस पल को याद किया। जो था, था सौभाग्य से, मैंने अपना मन बना लिया और एमवीसी पर दो किताबें पढ़ीं। इसके बाद, मैं आपको बताता हूं कि मैंने जिन उपयोजकों का उल्लेख किया है, उनके लिए कोड धन्यवाद की पंक्तियों को कैसे कम किया जाए।

MVC के साथ शुरू करने के लिए, अजाक्स पुस्तकालयों के दो संस्करणों के साथ काम कर सकते हैं (बेशक मैं बॉक्स के साथ मतलब है, और कुछ नहीं) - jQuery और Microsoft अजाक्स। किस एडाप्टर के लिए मार्कअप बनाने के लिए, वेब में सेटिंग है web.config UnobtrusiveJavaScriptEnabled और संबंधित मान true (jQuery के साथ काम करने के लिए) और f alse (Microsoft Ajax के साथ काम करने के लिए)। यदि हमें केवल एक दृश्य के लिए मान बदलने की आवश्यकता है, तो हम इस विधि का उपयोग कर सकते हैं - @{Html.EnableUnobtrusiveJavaScript(bool);} । मैं यह नोट करना चाहता हूं कि यह सेटिंग क्लाइंट पक्ष पर सत्यापन डेटा के गठन को भी प्रभावित करती है।


आप किस विकल्प पर निर्भर करते हैं, आपको उपयुक्त एडेप्टर कनेक्ट करना होगा। Microsoft अजाक्स के लिए

 <script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script> <script src="~/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 

, jQuery के लिए

 <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script> 

जैसा कि मैंने ऊपर लिखा था, jQuery संस्करण मेरे साथ ठीक है। इसलिए, मैं विनीत जावास्क्रिप्ट (यानी /> साथ web.config ) के पथ का अनुसरण करूंगा, और सबसे सरल से शुरू करूंगा।

ActionLink

इस समस्या पर विचार करें। एक लिंक है, जब हम उस पर क्लिक करते हैं, तो हम कंटेनर की सामग्री को अपडेट करना चाहते हैं। मैंने पहले क्या किया था।

कार्रवाई विधि का टुकड़ा

 public ActionResult Index() { if (Request.IsAjaxRequest()) return PartialView("_IndexPartial"); return View(); } 

Index दृश्य

 <script type="text/javascript"> jQuery(function($) { $('#update-container').click(function(e) { e.preventDefault(); $.ajax({ url: '@Url.Action("Index", "Home")', success: function(data) { $('#container').html(data); } }); }) }) </script> <div id="container"> @Html.Partial("_IndexPartial") </div> @Html.ActionLink(" ", "Index", "Home", new {}, new {id = "update-container"}) 

_IndexPartial आंशिक दृश्य

 <div>     </div> 

ज्यादातर ऐसे हेल्पर विधि से परिचित हैं जैसे कि Html. ActionLink(...) Html. ActionLink(...) ऊपर प्रस्तुत किया गया। ऐसा लगता है कि, सिद्धांत रूप में, कोड की कई पंक्तियाँ नहीं हैं, और मैं पहले से ही इस तरह की प्रोग्रामिंग के लिए उपयोग किया जाता हूं, इसलिए सब कुछ ठीक है, लेकिन मैं बहुत आलसी प्रोग्रामर हूं और मेरी क्षमता के अनुसार, मैं स्वच्छता और कोड की कमी के लिए लड़ रहा हूं। इसलिए, मैं प्रस्तुति को २२ पंक्तियों से घटाकर Ajax.ActionLink(...) और Ajax.ActionLink(...) । Ajax.ActionLink(...) मेरी सहायता के लिए आता है (बेशक, स्केप्टिक्स कह सकते हैं कि। .load या $.get का उपयोग $.get .load किया जा सकता है, लेकिन अनिवार्य रूप से। यह नहीं बदलता है, हमने दृश्य को कम कर दिया है, जो कभी-कभी हमारे बीच में शुरू होता है)

वोइला, Index व्यू

 <div id="container"> @Html.Partial("_IndexPartial") </div> @Ajax.ActionLink(" ", "Index", "Home", new {}, new AjaxOptions{UpdateTargetId = "container"}, new {id = "update-container"}) //id     ,     

दो उन्नत विधियों Html.ActionLink और Ajax.ActionLink बीच का अंतर केवल एक पैरामीटर में निहित है, AjaxOptions । उसके बारे में बात करते हैं।

AjaxOptions

जैसा कि आप देख सकते हैं, सिद्धांत रूप में, उसके पास कई गुण नहीं हैं, दूसरी ओर, यह अच्छा है जब वे एक चांदी की गोली बनाना शुरू करते हैं, चाहे वह एक वस्तु या एक पुस्तकालय हो, यह बस बोझिल और निष्क्रिय होने की संभावना नहीं है।

किस गुण के लिए जिम्मेदार है, बेहतर मैं एमएसडीएन नहीं कह सकता।



गुणों पर चलते हैं:

Confirm - जावास्क्रिप्ट confirm(...) अनुरूप confirm(...)

HttpMethod - टाइप string , सबसे दिलचस्प बात यह है कि एमएस ने HttpMethod केवल 2 तरीकों तक ही HttpMethod मजबूर किया, मुझे नहीं पता कि क्यों, और जाहिरा तौर पर एल्गोरिथ्म यह है कि सब कुछ GET , null या खाली स्ट्रिंग के बाद नहीं है। .Trim() - सभी POST

InsertionMode - " InsertAfter " (कंटेनर के अंत में सम्मिलित करें), " InsertBefore " (कंटेनर की शुरुआत में सम्मिलित करें) या " Replace " (कंटेनर की सामग्री को Replace ) के मूल्यों के साथ एक गणना

Loading... - मूल छिपा हुआ तत्व

On..... - जावास्क्रिप्ट कार्य, $.ajax समान

• OnBegin - से पहले beforeSend
• complete - complete
• OnFailure - error
• success - success

Url - एक अलग अजाक्स अनुरोध पते के लिए एक कड़ी, अगर हमें अजाक्स अनुरोध से विभिन्न मार्गों / नियंत्रकों / कार्यों / मापदंडों के लिए अनुरोध को पार्स करने की आवश्यकता है (आवश्यकतानुसार रेखांकित करें)

अजाक्स सहायक विधियाँ

अंत में, मैं उन तरीकों की एक प्लेट देना चाहूंगा जो समय-समय पर हमारे जीवन को आसान बनाएगा।

Ajax.ActionLink	नियंत्रक कार्रवाई के लिए एक हाइपरलिंक बनाता है, जिसे क्लिक करने पर, एक अजाक्स अनुरोध भेजता है।
Ajax.RouteLink	Ajax.ActionLink समान है, लेकिन एक विशिष्ट मार्ग के लिए एक लिंक बनाता है, नियंत्रक क्रिया नहीं
Ajax.BeginForm	एक प्रपत्र तत्व बनाता है जो एक विशिष्ट नियंत्रक कार्रवाई के लिए इनपुट भेजेगा
Ajax.BeginRouteForm	Ajax.BeginForm समान, लेकिन एक विशिष्ट मार्ग पर एक अनुरोध भेजता है, नियंत्रक क्रिया नहीं
Ajax.GlobalizationScript	एक वैश्वीकरण स्क्रिप्ट का लिंक बनाता है जिसमें भाषा और क्षेत्रीय सेटिंग्स की जानकारी होती है
Ajax.JavaScriptStringEncode	जावास्क्रिप्ट में सुरक्षित उपयोग के लिए एक स्ट्रिंग को एनकोड करता है

क्रमिक गिरावट सुनिश्चित करना

इस स्थिति पर विचार करें। Ajax अनुरोध JSON / XML / आंशिक दृश्य देता है - और सब कुछ ठीक है, लेकिन यह दृष्टिकोण बिल्कुल स्वीकार्य नहीं है यदि उपयोगकर्ता ने जावास्क्रिप्ट को अक्षम कर दिया है या ब्राउज़र इसका समर्थन नहीं करता है। ऐसे मामलों में, आपको उपयोगकर्ता को पृष्ठ को पूरी तरह से वापस करना होगा। एक समाधान एक एक्शन विधि में वायरिंग का उपयोग करना है यह निर्धारित करने के लिए कि क्या यह अनुरोध एक अजाक्स अनुरोध है। यह ऊपर वर्णित चर्चा के अनुसार Request.IsAjaxRequest() का उपयोग करके किया जा सकता है।

समस्या का दूसरा समाधान कार्रवाई के दो अलग-अलग तरीकों का निर्माण करना है: एक अजाक्स अनुरोध के लिए, और दूसरा सामान्य के लिए। आइए इस विकल्प को उपयोगकर्ता से प्राप्त टिप्पणी को बचाने के सरलीकृत कार्य पर अधिक विस्तार से देखें।

हम कार्रवाई के दो तरीके बनाते हैं

 [HttpPost] public ActionResult AddComment(string comment) { //  return View(); } [HttpPost] public ActionResult AddCommentAjax(string comment) { //  return Json(new {resultMessage = "   !"}); } 

AddComment का AddComment

 <h3>   !</h3> 

और फार्म के साथ हमारी प्रस्तुति

 <script type="text/javascript"> function OnSuccessComment(data) { alert(data.resultMessage); } </script> @using (Ajax.BeginForm("AddComment", new AjaxOptions { Url = Url.Action("AddCommentAjax"), OnSuccess = "OnSuccessComment", HttpMethod = "POST" })) { @Html.TextArea("comment") <input type="submit" value=" "/> } 

यह कैसे काम करता है

ब्राउज़र के लिए निम्न प्रपत्र प्रस्तुत किया गया है

 <form id="comment-form" action="/Home/AddComment" method="POST" data-ajax-url="/Home/AddCommentAjax" data-ajax-success="OnSuccessComment" data-ajax-method="POST" data-ajax="true"> <textarea rows="2" name="comment" id="comment" cols="20"></textarea> <input type="submit" value=" "> </form> 

हम देखते हैं कि @using (Html.BeginForm("AddComment", "Home")) से अंतर केवल अतिरिक्त data- विशेषताओं में है। दूसरे शब्दों में, विकलांग जावास्क्रिप्ट के लिए, प्रपत्र public ActionResult AddComment(string comment) को public ActionResult AddComment(string comment) जाएगा। जब जावास्क्रिप्ट सक्षम होता है, तो एडेप्टर data- विशेषताओं से डेटा को पढ़ता है, प्रपत्र जमा को public ActionResult AddCommentAjax(string comment) और public ActionResult AddCommentAjax(string comment) लिए अनुरोध करता है। हमें संचरित JSON के रूप में सफल परिणाम मिलता है और निर्दिष्ट js में OnSuccessComment फ़ंक्शन को OnSuccessComment करता है।

सारांश

मेरे लेख का उद्देश्य केवल यह दिखाना था कि कुछ चीजों को थोड़ा तेज किया जा सकता है और पहिया को सुदृढ़ नहीं किया जा सकता है (मैं केवल अपने आप को आंकता हूं)।

---

किताबों के अध्यायों ने मुझे इस लेख को लिखने के लिए प्रेरित किया:
ASP.NET MVC में अजाक्स (कार्रवाई में ASP.NET MVC 4)
और
URL और Ajax के लिए सहायक विधियाँ (ASP.NET MVC 4 प्रो)

---