ASP.NET MVC क्लाइंट-साइड रूटिंग

समस्या कथन

ASP.NET MVC रूटिंग सिस्टम डेवलपर के लिए रूटिंग टेबल और यूरिया पैटर्न का उपयोग करके एप्लिकेशन में उपयोग किए जाने वाले URL को मैन्युअल रूप से बनाए रखने की आवश्यकता को समाप्त करता है। इस प्रकार, प्रोग्रामर URL को मैन्युअल रूप से जेनरेट करने के कार्य को हटा देता है। इसके विपरीत, उसके पास URL सहायकों का एक समृद्ध समूह है। यह महान है! लेकिन जब वे आते हैं तो सब कुछ बदल जाता है - AJAX अनुरोध करता है ।

समस्या यह है कि राउटिंग टेबल और URL पीढ़ी तंत्र asp.net mvc सर्वर आर्किटेक्चर का हिस्सा हैं और जावास्क्रिप्ट फ़ाइलों से सुलभ नहीं हैं।
परिणामस्वरूप, स्क्रिप्ट में आप अक्सर निम्नलिखित कोड पा सकते हैं:

var url="/items/get-items?typeid="+typeId+"&groupid="+groupId+"&skip="+skip+"&take="+take; 

इस तथ्य के अलावा कि यह कोड बहुत अच्छा नहीं लगता है, आपकी स्क्रिप्ट में कम से कम एक स्थान पर इसकी उपस्थिति URL के अंतिम रूप के बारे में जानकारी के अलगाव का उल्लंघन करती है। अब, यदि आपको URL की संरचना को बदलने की आवश्यकता है और उदाहरण के लिए, क्वेरी स्ट्रिंग से URL के शरीर में पैरामीटर स्थानांतरित करें, तो आपको बस टेम्पलेट को संपादित करने की आवश्यकता है। आपको लिपियों से गुजरना होगा और आवश्यक बदलाव करने होंगे। यह गलतियां पैदा कर सकता है: कहीं वे बदल गए, कहीं वे भूल गए, कहीं वे सील कर दिए गए।

एडवांस सर्वर जेनरेशन URL

क्लाइंट स्क्रिप्ट को .js फ़ाइलों में स्थित होना चाहिए, इसलिए हम दृश्य के निर्माण के दौरान स्क्रिप्ट की पीढ़ी के साथ विकल्प को तुरंत छोड़ देते हैं। इस स्थिति में एक समाधान सर्वर पर URL को पूर्व-उत्पन्न करना और इसे डेटा में तत्व में लिखना है- * विशेषता, उदाहरण के लिए:

 <div id="some_container" data-url="@Url.Action("Action","Controller",new {Id=10})"> ... </div> 

यहां, हम अभी भी ASP.NET MVC रूटिंग तंत्र पर भरोसा करते हैं और क्लाइंट से URL को मैन्युअल रूप से प्राप्त करने से छुटकारा पा लेते हैं, इसे विशेषता से प्राप्त करते हैं। कुछ मामलों में, यह समाधान पर्याप्त होगा, लेकिन यह समस्या को पूरी तरह से हल नहीं करता है। स्थिति पर विचार करें। आप एक जावास्क्रिप्ट मॉड्यूल लिख रहे हैं जिसे आप एप्लिकेशन के कई हिस्सों में उपयोग करने की योजना बना रहे हैं, और इसे अजाक्स अनुरोध करने की आवश्यकता होगी। इस मामले में, मैं इस मॉड्यूल के बाहर कहीं और अनुरोधों के लिए URL जानकारी नहीं लेना चाहता। इसलिए, URL को विशेषताओं में संग्रहीत करने और मॉड्यूल के अंदर इसे पारित करने का विकल्प हमारे लिए उपयुक्त नहीं है। लेकिन हम इसे मैन्युअल रूप से भी नहीं बनाना चाहते हैं। क्या करें?

मार्गज पुस्तकालय

आदर्श रूप से, मैं जावास्क्रिप्ट से सीधे रूट URL तक पहुंचना चाहूंगा, लेकिन इसके लिए ASP.NET MVC में कोई अंतर्निहित तंत्र नहीं है। हालाँकि, आप इसे छोटे रूटजेज लाइब्रेरी से जोड़कर जोड़ सकते हैं। यह WebForms और ASP.NET MVC (संस्करण 2 से शुरू) दोनों के साथ काम करता है और इसे तीसरे पक्ष के जावास्क्रिप्ट फ्रेमवर्क के उपयोग की आवश्यकता नहीं होती है। आप इसे Nuget के माध्यम से प्रोजेक्ट में जोड़ सकते हैं। इस स्थिति में, आपको केवल पृष्ठ की स्क्रिप्ट का लिंक शामिल करना होगा:

 <script src="@RouteJs.RouteJsHandler.HandlerUrl"></script> 

परिणामस्वरूप, आप राउटर ऑब्जेक्ट का उपयोग करके जावास्क्रिप्ट से सीधे अपने मार्गों तक पहुंच पाएंगे।

उदाहरण

डिफ़ॉल्ट मार्ग

 routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); 

हमें क्या मिलता है:

 >Router.action('Home','Index') "/Home/Index" >Router.action('Home','Index',{id:1}) "/Home/Index/1" >Router.action('Home','Index',{type:1, group:2}) "/Home/Index?type=1&group=2" 

और यदि आप क्षेत्र जोड़ते हैं?

 public override void RegisterArea(AreaRegistrationContext context) { context.MapRoute( "TestArea_default", "TestArea/{controller}/{action}/{id}", new { action = "Index", id = UrlParameter.Optional } ); } 

हम जाँच करते हैं:

 >Router.action('Home','Index',{area:'TestArea'}) "/TestArea/Home/Index" 

प्रतिबन्ध

RouteJs डिफ़ॉल्ट regexp प्रतिबंध के साथ काम कर सकते हैं:

 routes.MapRoute( name: "DefaultWithConstraint", url: "constr/{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }, constraints:new {action="^ConstrAction$"} 

की जाँच करें:

 >Router.action('Home','Index') "/Home/Index" >Router.action('Home','ConstrAction') "/constr/Home/ConstrAction" 

हालांकि, स्पष्ट कारणों के लिए, यह आपके कस्टम IRouteConstaints को संसाधित करने में सक्षम नहीं होगा। इसके अलावा, वर्तमान संस्करण में, राउटर काम करना बंद कर देता है यदि कस्टम बाधाएं किसी भी मार्ग में उपयोग की जाती हैं। (ऑब्जेक्ट को एक्सेस करते समय जावास्क्रिप्ट में एक त्रुटि होती है। इसके चारों ओर जाने के लिए, समस्या नियंत्रक पर [HideRoutesInJavaScript] विशेषता को [HideRoutesInJavaScript] । मुझे लगता है कि यह बग निकट भविष्य में तय हो जाएगा)।

कैशिंग

उत्पन्न स्क्रिप्ट एक्सपायर हेडर के साथ दी गई है, जो ब्राउज़र को बताता है कि स्क्रिप्ट को 1 वर्ष के लिए कैश करने की आवश्यकता है। इस स्थिति में, पृष्ठ में जोड़े गए लिंक के प्रारूप पर ध्यान दें:

  <script src="/routejs.axd/2512dbb48b9018a4c8f9eac5fb92f903800d94da/router.js"></script> 

लिंक में कुछ हैश है, जो मार्गों की सूची से बनता है और उनके साथ बदलता है। यह सुनिश्चित करता है कि कैशिंग करते समय क्लाइंट पर एक मान्य रूट टेबल है।

JsAction लाइब्रेरी

JsAction पुस्तकालय क्लाइंट-साइड रूटिंग समस्याओं को हल करने के लिए एक अलग दृष्टिकोण प्रदान करता है। आप इसे Nuget के माध्यम से भी इंस्टॉल कर सकते हैं। उसके बाद, आपको लेआउट से लिंक जोड़ने की जरूरत है (jQuery के बाद कनेक्ट करें):

 @Html.JsActionScript() 

इसके बाद, आप अजाक्स अनुरोधों के लिए उपयोग करने की योजना विशेष [JsAction] विशेषता के साथ चिह्नित की गई है:

 [JsAction] [HttpGet] public JsonResult Do(int a, int b) { return Json(a + b, JsonRequestBehavior.AllowGet); } 

उसके बाद, आप इस क्रिया को जावास्क्रिप्ट से नाम से पुकार सकते हैं:

 $(function() { JsActions.Home.Do(1, 3); }) 

इस प्रकार, यह लाइब्रेरी क्लाइंट के रूट URL को पोर्ट करने से ज्यादा करती है। यह डेवलपर को मैन्युअल रूप से अजाक्स अनुरोध लिखने से बचाता है। कई सुखद दुष्प्रभाव हैं। कल्पना करें कि GET अनुरोध पर उपलब्ध विधि को POST द्वारा प्रतिस्थापित किया जाना चाहिए। आपके कर्म आप [HttpPost] के लिए [HttpGet] विशेषता को बदल देंगे और फिर $ .Ajax (यदि आप jQuery का उपयोग करते हैं, तो) की कॉल सेटिंग्स को बदलने के लिए स्क्रिप्ट में इस पद्धति पर कॉल की तलाश करेंगे। यह पुस्तकालय आपको इस आवश्यकता से बचाता है। अब से, ये सेटिंग्स केवल विधि के गुणों में पाए जाएंगे। अजाक्स अनुरोध के परिणामों को संसाधित करना उसी तरह होता है जैसे कि सामान्य कॉल $ .ajax () में।

 $(document).ready(function () { JsActions.Home.Do(1,2).then(function(data){ alert(data); }); }); 

यदि आप संस्करण 1.5 से पहले jQuery का उपयोग करते हैं, तो एक समान तंत्र आपके लिए उपलब्ध है:

 $(document).ready(function () { var ret = JsActions.Home.Do(1, 2, { success: function (data) { alert(data); } }); }); 

IntelliSense

JsAction Visual Studio में Intellisense इंजन का समर्थन करता है। यह निम्नानुसार काम करता है। आप अपनी विधि में xml टिप्पणियाँ जोड़ें:

  /// <summary> /// Sums two numbers /// </summary> /// <param name="a">First number</param> /// <param name="b">Second number</param> /// <returns></returns> [JsAction()] [HttpGet] public JsonResult Do(int a, int b) { return Json(a + b, JsonRequestBehavior.AllowGet); } 

प्रोजेक्ट सेटिंग्स में एक ही समय में "XML डॉक्यूमेंटेशन फाइल" टिक करना चाहिए:



उसके बाद, टूल्स-> लाइब्रेरी पैकेज मैनेजर-> पैकेज मैनेजर कंसोल खोलें और JsAction-GenDoc कमांड दर्ज करें। परिणामस्वरूप, Scripts फ़ोल्डर में JsActions.vsdoc.js फ़ाइल उत्पन्न होगी। अब स्क्रिप्ट लिखते समय, विजुअल स्टूडियो आपकी मदद कर सकता है:

कैशिंग

पिछले पुस्तकालय के विपरीत, वर्तमान संस्करण में ब्राउज़र में गतिशील रूप से उत्पन्न स्क्रिप्ट की कैशिंग प्रदान नहीं की गई है।

निष्कर्ष

प्रस्तुत पुस्तकालयों में से प्रत्येक सफलतापूर्वक क्लाइंट-साइड रूटिंग की समस्या को हल करता है। इस या उस उपकरण के पक्ष में चुनाव आपकी आवश्यकताओं और वरीयताओं पर निर्भर करता है। RouteJs अतिरिक्त कुछ भी किए बिना url रूटिंग समस्या को हल करने पर ध्यान केंद्रित करता है। JsAction, इसके विपरीत, अपने स्वयं के इंटरफ़ेस प्रदान करके अजाक्स अनुरोधों को निष्पादित करने के लिए एक उच्च-स्तरीय और लचीला दृष्टिकोण प्रदान करता है।

अतिरिक्त लिंक:

1. लेख में उठाए गए समस्या को हल करने के लिए, आप रेजरज लाइब्रेरी का उपयोग भी कर सकते हैं, जो आपको रेजर को जावास्क्रिप्ट फ़ाइलों में सम्मिलित करने की अनुमति देता है;
2. https://github.com/zowens/ASP.NET-MVC-JavaScript-Rout क्लाइंट-साइड में मार्गों को स्थानांतरित करने के लिए एक और पुस्तकालय है;
3. फिल हैक का एक लेख उनके पुस्तकालय का हवाला देता है।