यह लेख सहायक विधि Ajax.ActionLink, या बल्कि एक्सटेंशन विधि Ajax.ActionImageLink का उपयोग करके एक चित्र के साथ एक लिंक बनाने के लिए समर्पित है, जिसे हम बनाएंगे।

शुरुआत के लिए, अजाक्स, एएसपी .NET एमवीसी 3 और उनके साझाकरण के लिए एक त्वरित परिचय।

AJAX (अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल - "अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल") एक वेब सर्वर के साथ ब्राउज़र डेटा के "पृष्ठभूमि" विनिमय में शामिल वेब अनुप्रयोगों के इंटरैक्टिव उपयोगकर्ता इंटरफेस के निर्माण के लिए एक दृष्टिकोण है। नतीजतन, डेटा अपडेट करते समय, वेब पेज पूरी तरह से फिर से लोड नहीं होता है, और वेब एप्लिकेशन तेज और अधिक सुविधाजनक हो जाते हैं।

ASP .NET MVC वेब अनुप्रयोगों को बनाने के लिए एक रूपरेखा है जो ASP .NET तकनीक पर आधारित मॉडल-व्यू-कंट्रोलर ( MVC ) टेम्पलेट को लागू करता है।

ASP। NET MVC 3 में AJAX का उपयोग करने के लिए कई एक्शन तरीके हैं , लेकिन हम Ajax.ActionLink में रुचि रखते हैं, इसलिए इसके बारे में अधिक है:

Ajax.ActionLink

Ajax.ActionLink - एक ऐसी विधि जो पारित किए गए मापदंडों के आधार पर बनाई गई लिंक को वापस करती है, जिस पर क्लिक करने से सर्वर को एक अतुल्यकालिक अनुरोध भेजा जाएगा और पृष्ठ के आगे के व्यवहार का निर्धारण किया जाएगा।
कुल मिलाकर, इस विधि को ओवरलोड करने के लिए 12 विकल्प हैं - नीचे इनपुट पैरामीटर हैं जो इसके उपयोग के लिए स्थानांतरित किए जा सकते हैं:

• यह AjaxHelper ajaxHelper - एक वर्ग जो AJAX स्क्रिप्ट में HTML प्रदर्शित करने के लिए समर्थन प्रदान करता है;
• string linkText - लिंक टेक्स्ट;
• string ActionName - सर्वर-साइड एक्शन विधि का नाम कंट्रोलर के लिए जहां प्रोसेसिंग के लिए अनुरोध प्राप्त होगा;
• स्ट्रिंग कंट्रोलरनाम - नियंत्रक का नाम जहां अनुरोध प्रसंस्करण के लिए एक्शन विधि की तलाश में भेजा जाएगा;
• स्ट्रिंग प्रोटोकॉल - वह प्रोटोकॉल जिसके द्वारा अनुरोध भेजा जाएगा (उदाहरण के लिए, "http" या "https");
• स्ट्रिंग होस्टनाम - डोमेन नाम (उदाहरण के लिए, "habrahabr.ru");
• स्ट्रिंग टुकड़ा - टुकड़ा का नाम, जो URL के अंत में # के बाद जोड़ा जाएगा;
• रूटवैल्यूड / ऑब्जेक्ट रूटवैल्यूज़ - URL स्ट्रिंग में सर्वर को दिए गए पैरामीटर;
• AjaxOptions ajaxOptions - अतुल्यकालिक अनुरोध निष्पादन विकल्प
  
  • स्ट्रिंग की पुष्टि - एक संदेश जो उपयोगकर्ता द्वारा कार्यों की पुष्टि के लिए अनुरोध के साथ सर्वर को डेटा भेजने से पहले प्रदर्शित किया जाएगा;
  • string HttpMethod - वह विधि जिसके द्वारा सर्वर को डेटा भेजा जाता है ("POST", "GET");
  • InsertionMode InsertionMode - एक संपत्ति है जो यह दिखाती है कि प्राप्त आंकड़ों के साथ HTML पृष्ठ के DOM को कैसे अपडेट किया जाए ("InsertAfter", "InsertBefore", या "बदलें");
  • स्ट्रिंग LoadingElementId - HTML तत्व की आईडी जो प्रदर्शित की जाती है जबकि अतुल्यकालिक अनुरोध निष्पादित किया जा रहा है (OnBegin से OnComplete तक), उदाहरण के लिए, यह ajaxLoader.gif हो सकता है;
  • स्ट्रिंग OnBegin - जावास्क्रिप्ट फ़ंक्शन का नाम जिसे अनुरोध भेजे जाने से पहले निष्पादित किया जाएगा;
  • string OnComplete - जावास्क्रिप्ट फ़ंक्शन का नाम जिसे सर्वर से डेटा आने के बाद निष्पादित किया जाएगा, लेकिन पृष्ठ अभी तक अपडेट नहीं किया गया है;
  • string OnFailure - जावास्क्रिप्ट फंक्शन का नाम जिसे पेज रिफ्रेश एरर के मामले में निष्पादित किया जाएगा। उदाहरण के लिए, आप सर्वर को वापस करने वाले त्रुटि कोड को रोक सकते हैं;
  • स्ट्रिंग OnSuccess - जावास्क्रिप्ट फ़ंक्शन का नाम जिसे सर्वर से डेटा सफलतापूर्वक प्राप्त करने और पृष्ठ को अपडेट करने के बाद निष्पादित किया जाएगा;
  • string UpdateTargetId - HTML तत्व की आईडी जिसे सर्वर से प्राप्त डेटा के साथ अपडेट किया जाएगा (उदाहरण के लिए, HTML मार्कअप या एक div को अपडेट करने के लिए एक लाइन या स्पैन में एक संदेश प्रदर्शित करने के लिए);
  • string Url - अनुरोध भेजने के लिए URL पता;
• IDEDIA <string, Object> htmlAttributes - एक कुंजी-मूल्य संग्रह जिसमें आप जेनरेट किए गए HTML मार्कअप में जोड़े जाने वाले गुणों को निर्दिष्ट कर सकते हैं (उदाहरण के लिए, नया { class = "add"})।

एमवीसी 3 परियोजना में अजाक्स की सुविधाओं का उपयोग करने के लिए, हमें निम्नलिखित फ़ाइलों को शामिल करना होगा, जो कि डिफ़ॉल्ट रूप से / लिपियों फ़ोल्डर में हैं:

• jQuery-1.4.4.js
• jquery.unobtrusive-ajax.min.js

समस्या का बयान

एक छवि के रूप में एक लिंक बनाने की आवश्यकता है (हमारे मामले में, एक तारांकन चिह्न), जिस पर क्लिक करने से सर्वर के लिए एक अतुल्यकालिक अनुरोध होगा, और प्रतिक्रिया प्राप्त करने के बाद, इसे अपडेट किया जाएगा (छवि का बदलना, टूलटिप:



Microsoft ने हमें अजाक्स एक्शनलिंक हेल्पर के साथ काम करने की संभावनाओं की जांच करने के बाद, हम इस निष्कर्ष पर पहुँचे कि यहाँ बाइक के बिना करने के लिए पर्याप्त नहीं है, इसलिए हमें अपने स्वयं के सहायक की आवश्यकता है। चलिए शुरू करते हैं।

1. एक रिक्त ASP .NET MVC 3 प्रोजेक्ट बनाएँ

दृश्य इंजन में, रेजर निर्दिष्ट करें।

2. एक होमकंट्रोलर जोड़ें और सूचकांक विधि के लिए देखें

हमारे विचार के लिए मास्टर पेज के रूप में ~ / Views / Shared / _Layout.cshtml चुनें।



और इसलिए, अब हमें अपने अजाक्स सहायक के लिए एक एक्सटेंशन विधि बनाने की आवश्यकता है।

3. एक्सटेंशन विधि Ajax.ActionImageLink बनाएँ

प्रोजेक्ट रूट में कोर फ़ोल्डर जोड़ें और इसमें एक नया स्थिर वर्ग Extensions.cs



विस्तार विधियाँ बनाने के बारे में यहाँ पढ़ें।

हम एक विस्तार विधि के निर्माण के लिए सीधे आगे बढ़ते हैं। और इसलिए, हमारी छवि लिंक के आधार पर, हम HTML मार्कअप और habrahabr.ru शैलियों को लेते हैं, फिर कंटेनर की सामग्री को दो राज्यों द्वारा दर्शाया जाएगा:

<div class="favourite"> <a class="add" title="  " href="#"></a> </div> <div class="favourite"> <a class="remove" title="  " href="#"></a> </div> 

अनावश्यक रूप से सब कुछ काटकर, हम इस निष्कर्ष पर आते हैं कि कंटेनर (बदलने के लिए ऑब्जेक्ट अपडेटटार्इग्ड है) एक div होगा, और हमारी विधि को HTML मार्कअप को एक बदलते वर्ग और शीर्षक के साथ लिंक के रूप में वापस करना चाहिए।

* यहां लेखक ने पहली बार सोचा, और महसूस किया कि यह सब निम्नलिखित कोड के माध्यम से तरीकों का विस्तार किए बिना हल किया जा सकता है :

 @Ajax.ActionLink(" ", "Hello", "World", null, new AjaxOptions() { }, new { @title= Model.inFavourite? "  " : "  ", @class = Model.inFavourite? "add" : "remove" }) 

लेकिन यह निश्चय कर लिया कि यह बहुत सरल होगा, और थोड़ा दिलकश होने के कारण, उसने अपने कार्य को जटिल बना दिया । *

सब कुछ काट देना ... बहुत कुछ जोड़ते हुए, अतिश्योक्तिपूर्ण जोड़ते हुए, हम इस तथ्य पर आते हैं कि कंटेनर (बदलने के लिए ऑब्जेक्ट UpdateTargetId है) एक div होगा, और हमारी विधि को HTML मार्कअप को एक लिंक के रूप में वापस करना चाहिए जिसमें एक बदलते शीर्षक के साथ एक छवि और छवि के लिए पथ है।

 <div id="favourite"> <a href="/Home/AddOrRemoveFavourite"> <img src="/Content/images/star-off.png" title="  " /> </a> </div> <div id="favourite"> <a href="/Home/AddOrRemoveFavourite"> <img src="/Content/images/star-on.png" title="  " /> </a> </div> 

नोट:
आप अपने पसंदीदा में प्रविष्टियों को जोड़ने / हटाने के लिए विभिन्न तरीकों का उपयोग कर सकते हैं, लेकिन इस लेख के ढांचे के भीतर, एक विधि का उपयोग किया जाएगा - AddOrRemoveFavourite ।
और इसलिए, हमारी विस्तार विधि का ढांचा नीचे प्रस्तुत किया गया है:

  public static IHtmlString ImageActionLink(this AjaxHelper helper, string actionName, bool inFavourite, AjaxOptions ajaxOptions) { } 

इनपुट पैरामीटर हैं:

1. क्रियानाम - नियंत्रक विधि का नाम (AddOrRemoveFavourite);
2. inFavourite - इस बात का संकेत कि क्या प्रविष्टि पहले से ही पसंदीदा में जोड़ दी गई है;
3. ajaxOptions - क्वेरी निष्पादन पैरामीटर।

हमारी छवि के लिए HTML मार्कअप बनाने के लिए, TagBuilder वर्ग का उपयोग करें:

 var builder = new TagBuilder("img"); builder.MergeAttribute("src", String.Format("/Content/images/star-{0}.png", inFavourite ? "on" : "off")); builder.MergeAttribute("title", inFavourite ? "  " : "  "); 

लिंक बनाने के लिए, मानक Ajax.ActionLink विधि का उपयोग करें:

 var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions).ToHtmlString(); 

और फिर हमारे HTML img तत्व की सामग्री के लिए लिंक पाठ का प्रतिस्थापन जोड़ें:

 return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing))); 

परिणामस्वरूप, हमारी एक्सटेंशन्स.cs क्लास फॉर्म लेगी:

  public static class Extensions { public static IHtmlString ImageActionLink(this AjaxHelper helper, string actionName, bool inFavourite, AjaxOptions ajaxOptions) { var builder = new TagBuilder("img"); builder.MergeAttribute("src", String.Format("/Content/images/star-{0}.png", inFavourite ? "on" : "off")); builder.MergeAttribute("title", inFavourite ? "  " : "  "); var link = helper.ActionLink("[replaceme]", actionName, inFavourite, ajaxOptions).ToHtmlString(); return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing))); } } 

यदि हम अपने एक्सटेंशन मेथड को देखने के लिए कॉल करते हैं ( @ MVC3_AjaxActionImageLink.Core निर्देश को निर्दिष्ट करने के बाद), निम्न HTML मार्कअप जेनरेट किया जाएगा:

 <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#favourite" ref="/Home/AddOrRemoveFavourite"> <img src="/Content/images/star-on.png" title="  " /> </a> 

या

 <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#favourite" href="/Home/AddOrRemoveFavourite"> <img src="/Content/images/star-off.png" title="  " /> </a> 

यह केवल एक div, सितारों की तस्वीरें, देखने में एक विधि कॉल और खुद AddOrRemoveFavourite विधि को जोड़ने के लिए बनी हुई है, लेकिन मैं अधिक विस्तार से उत्तरार्द्ध पर ध्यान देना चाहूंगा।

4. नियंत्रक में AddOrRemoveFavourite विधि जोड़ना

सामान्य तौर पर, एसिंक्रोनस अनुरोध को संसाधित करने वाली विधि एक मान लौटाती है, यह एक स्ट्रिंग, एक संख्या, JSON डेटा, आदि हो सकती है, लेकिन हमारे मामले में, हमें नए तत्व के HTML मार्कअप को वापस करने की आवश्यकता है जो हमारा एक्सटेंशन विधि उत्पन्न करता है। काश (या सौभाग्य से), ASP .NET MVC 3 में सर्वर साइड (कंट्रोलर मेथड) में हमारे एक्स्टेंसिबल मेथड को कॉल करने की क्षमता नहीं है और इसलिए हम कंट्रोलर मेथड में कोड को कॉपी किए बिना मार्कअप नहीं बना पाएंगे (अन्यथा, मौलिक में से एक) MVC- DRY सिद्धांत)।

हालाँकि, कंट्रोलर विधि से, हम आंशिक दृश्य पर कॉल लौटा सकते हैं, जो हमारे एक्सटेंशन पद्धति पर कॉल शुरू करता है, जो बदले में HTML मार्कअप लौटाएगा।

चलिए शुरू करते हैं।

4.1। एक एक्सटेंशन विधि कॉल के साथ एक आंशिक दृश्य जोड़ें

पार्शियल फोल्डर को व्यू फोल्डर में जोड़ें। आंशिक में, पसंदीदा फ़ोल्डर जोड़ें।
आंशिक दृश्य के रूप में बनाएँ का चयन करके पसंदीदा फ़ोल्डर में दृश्य जोड़ें और AddOrRemoveFavourites_PartinyView नाम निर्दिष्ट करें



जोड़े गए आंशिक दृश्य की सामग्री के लिए निम्नलिखित निर्देश जोड़ें:

 @using MVC3_AjaxActionImageLink.Core @Model bool 

और हमारी विधि का आह्वान स्वयं:

 @Ajax.ImageActionLink("AddOrRemoveFavourite", (bool)Model, new AjaxOptions() { UpdateTargetId = "favourite" }); 

नोट। विवरण को सरल बनाने के लिए, इस लेख में मॉडल प्रकार बूल का एक स्थिर चर होगा।

Index.cshtml की सामग्री अब विस्तार पद्धति को कॉल करने का निर्देश देती है आंशिक दृश्य और इस तरह दिखता है:

 @using MVC3_AjaxActionImageLink.Core @model bool @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <div id="favourite"> @{ Html.RenderPartial("/Views/Partial/Favourites/AddOrRemoveFavourites_PartialView.cshtml", Model); } </div> 

4.2। नियंत्रक में AddOrRemoveFavourite अतुल्यकालिक अनुरोध प्रसंस्करण विधि जोड़ें और मॉडल से बांधें

हमारे आंशिक दृश्य को वापस करने के लिए, आपको पहले पैरामीटर के रूप में पथ को पार करके, बदले में आंशिक दृश्य विधि के लिए कॉल निर्दिष्ट करने की आवश्यकता है। इसके अलावा, चूंकि हम स्टेटिक तरीके से स्टेटिक बूल वैरिएबल के माध्यम से सेव करते हैं, इसलिए हम इसे अपने दोनों व्यूज के मॉडल के रूप में पास करेंगे। हमारे HomeController.cs वर्ग का अंतिम संस्करण नीचे प्रस्तुत किया गया है:

  public class HomeController : Controller { public static bool inFavourite = true; public ActionResult AddOrRemoveFavourite() { if (Request.IsAjaxRequest()) { inFavourite = !inFavourite; // TODO: Add or remove favourite return PartialView("/Views/Partial/Favourites/AddOrRemoveFavourites_PartialView.cshtml", inFavourite); } return View(); } public ActionResult Index() { // TODO: Check, if row is already in favourites return View(inFavourite); } } 

5. क्या बचा है?

अंतिम चरण छवियाँ फ़ोल्डर को स्टार-ऑफ.पीएनजी और स्टार-ऑन.पंज के साथ जोड़ना होगा, साथ ही एएसपी .NET एमवीसी 3 में AJAX के साथ काम करने के लिए एक स्क्रिप्ट को जोड़ना होगा:

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

हम कोशिश करते हैं।



हम क्लिक करते हैं

निष्कर्ष

तो, हमने इस लेख में क्या किया और क्या सीखा:

• Ajax.ActionLink विधि का उपयोग करके ASP .NET MVC 3 में AJAX का उपयोग करने पर विचार करें
• अपने स्वयं के विस्तार के तरीकों और उनके उपयोग के बारे में एक विचार प्राप्त करें
• Html हेल्पर को कॉल करके AJAX के अनुरोध से उत्पन्न HTML मार्कअप को वापस करने का तरीका सीखा
• DRY सिद्धांत का उल्लंघन न करें

टिप्पणी

एक छवि के रूप में लिंक करने की विधि और सिद्धांत का नाम स्टीफन वाल्टे की संपर्क जागीर परियोजना से लिया गया था।