ASP.NET MVC में इतिहास एपीआई का उपयोग करके एक-पेज के आवेदन को लागू करना

शुभ दोपहर, प्रिय खाबरोवस्क निवासी। साइट ने बार-बार सिंगल-पेज अजाक्स एप्लिकेशन बनाने का मुद्दा उठाया है। मैंने कुछ समय पहले इस कार्य का सामना किया था। हालांकि, मैंने सोचा कि क्यों, html5 की क्षमताओं और MVC की शक्ति होने के कारण, मुझे मैन्युअल रूप से और यहां तक ​​कि js का उपयोग करते हुए इतनी सारी चीजें लिखनी थीं।

शायद यह [sacwar = on] js भाषा के लिए शत्रुता थी [sacwar = off] जिसने मुझे ASP.NET MVC की क्षमताओं के आधार पर एक सरल समाधान बनाने के लिए प्रेरित किया। आगे, मैं एक-पेज ajax एप्लिकेशन बनाने की कोशिश करते समय आने वाली समस्याओं का विस्तार से वर्णन करूंगा, और चरण दर चरण एक संपूर्ण समाधान बनाने पर विचार करूंगा।

यदि यह दिलचस्प हो गया - कटौती में आपका स्वागत है (कोड और चित्र संलग्न हैं)।

इसलिए, हम मानक MVC 3 टेम्प्लेट एप्लिकेशन के साथ प्रयोग करेंगे। हम प्रोजेक्ट कॉन्फ़िगरेशन प्राप्त करने के लिए उसमें से लगभग हर चीज को निकाल देंगे, जैसा कि नीचे दिए गए आंकड़े में है, और धीरे-धीरे डाउनलोड को लागू करना शुरू करते हैं।

चरण 1 - समस्या विश्लेषण

जब मैं पहली बार अजाक्स से मिला था। क्या आसान हो सकता है, इस तरह से पूरे आवेदन को लागू करें! हम पृष्ठ टेम्पलेट में मुख्य ब्लॉक (_Layout.cshtml) को मुख्य के रूप में पहचानते हैं और अन्य सभी पृष्ठों को इसमें लोड करते हैं। हालाँकि, समस्याएं तुरंत उत्पन्न होती हैं:

1. उपयोगकर्ता एक नए पृष्ठ पर चला गया है और उम्मीद करता है कि "बैक" बटन इसे पिछले एक पर लौटाएगा, हालांकि ऐसा नहीं होता है - उपयोगकर्ता पिछले नहीं, बल्कि पहले पूरी तरह से लोड किए गए पृष्ठ पर लौटता है। फॉरवर्ड बटन भी काम नहीं करता है।
2. उपयोगकर्ता एक नए पृष्ठ पर गया और इसे अद्यतन करना चाहता था (उदाहरण के लिए, F5 का उपयोग करके), लेकिन वर्तमान पृष्ठ को अपडेट करने के बजाय, पहले पूरी तरह से लोड किए गए पृष्ठ को फिर से लोड किया गया।
3. उपयोगकर्ता ने नए टैब / विंडो में एक नए पृष्ठ का लिंक खोला। हालांकि, एक सामान्य पृष्ठ खोलने के बजाय, मुख्य टेम्पलेट, शैलियों और लिपियों के बिना PartialView लोड किया गया है।
4. उपयोगकर्ता साइट के पृष्ठों के माध्यम से चला गया, फिर विचलित हो गया और उस पृष्ठ को ढूंढना चाहता था जिसके साथ उसने टैब (खिड़की) के नाम से पहले काम किया था। लेकिन पेज का नाम _Layout.cshtml में निहित है और इसलिए यह नेविगेशन प्रक्रिया के दौरान भी नहीं बदला है।
5. नेविगेशन से ध्यान भंग करना। उपयोगकर्ता उस डेटा प्रविष्टि पृष्ठ पर गया जिसकी उसे आवश्यकता थी, लेकिन ... ajax द्वारा दिए गए पृष्ठ पर डेटा का क्लाइंट-साइड सत्यापन काम नहीं करता है!
6. और अब उपयोगकर्ता ने लिंक का पालन किया है, जो डेटाबेस से 100500 रिकॉर्ड निकालता है और उन पर संचालन करता है। और फिर उन्होंने फिर से उसी लिंक पर क्लिक किया, जैसा कि उन्होंने तय किया था कि "मेरे लिए फिर से कुछ काम नहीं किया"। और फिर। और उसके बाद, यह बेहतर होगा यदि उपयोगकर्ता इन सभी अनुरोधों के अंत की प्रतीक्षा नहीं करता है, तो यह पृष्ठ पर होने लगेगा ...)

काफी समस्याएं थीं। और उन सभी को सरल जेएस कोड द्वारा हल नहीं किया जाता है। यहां हमें वास्तुकला के लिए एक एकीकृत दृष्टिकोण की आवश्यकता है। और यदि ऐसा है, तो तुरंत कुछ और आवश्यकताएं जोड़ें:

1. मान लीजिए कि एक नया पृष्ठ लोड करते समय, वर्तमान को बस अवरुद्ध कर दिया जाता है और उपयोगकर्ता को एक संदेश दिखाया जाता है कि सिस्टम में वास्तव में क्या हो रहा है।
2. इतिहास के माध्यम से नेविगेशन को सरल और सहज होने दें, जैसे कि एप्लिकेशन सामान्य मल्टी-पेज मोड में काम करता है।
3. जैसा कि मैंने कहा, मुझे js पसंद नहीं है। कोड की अधिकतम राशि को c # में लिखे जाने दें। और js पर हम केवल 10 लाइनों के बारे में लिखेंगे।

अंत में स्वीकृत तकनीकी सीमाएँ:

1. हम html5 चिप्स का उपयोग करेंगे।
2. हम लेआउट और डिजाइन के साथ सौदा नहीं करेंगे। बस हमारे पोर्टल फ़ंक्शन को ठीक से बनाएं।
3. पोर्टल को जटिल करते समय हमारा समाधान यथासंभव सरल होना चाहिए। इसके तुरंत बाद क्षेत्रों का समर्थन, कार्यक्षमता का मुख्य भाग Ajax / Html सहायकों में प्रदान किया जाएगा।
4. समाधान को सरल बनाने के लिए, हम कुछ जादुई नामकरण परंपराएँ लेंगे। इन समझौतों पर बाद में चर्चा की जाएगी।

समस्याओं का वर्णन किया गया है, लक्ष्य निर्धारित किए गए हैं, चलिए!

स्टेज 2 - नियंत्रक कार्यान्वयन

नियंत्रक के साथ शुरू करते हैं। जाहिर है, ajax का उपयोग करके पृष्ठों के दोनों हिस्सों को लोड करने के लिए, और पृष्ठ पूरी तरह से (यदि उपयोगकर्ता सीधे लिंक पर क्लिक करता है, या पृष्ठ को ताज़ा करता है), तो क्रियाओं की आवश्यकता होती है जो PartialViewResult और ViewResult दोनों को लौटाएंगे।

इसलिए, हम प्रत्येक लॉजिकल एक्शन के लिए कंट्रोलर में दो फिजिकल एक्शन डालते हैं - SomeAction टाइप में से एक : ViewResult , दूसरा AjaxSomeAction: PartialViewResult । इस मामले में अजाक्स उपसर्ग पहला जादू नामकरण सम्मेलन है। याद रखें और इस तथ्य का उपयोग करना जारी रखेंगे।
कुल हमें मिलता है:

public class HomeController : Controller { private Object GenerateIndexPage() { Object model = null; for (int i = 0; i < 1000000000; i++) { } return model; } [HttpGet] public ViewResult Index() { return View("Index", GenerateIndexPage()); } [HttpGet] public PartialViewResult AjaxIndex() { return PartialView("Index", GenerateIndexPage()); } [HttpGet] public ViewResult About() { return View("About"); } [HttpGet] public PartialViewResult AjaxAbout() { return PartialView("About"); } } 

इतने सरल तरीके से GenerateIndexPage () विधि कुछ लंबे ऑपरेशन का अनुकरण करती है, उदाहरण के लिए, डेटाबेस तक पहुंच।

स्टेज 3 - _Layout.cshtml

अब हम सामान्य टेम्पलेट पर एक नज़र डालते हैं। मैं उनके कोड को तुरंत उद्धृत करता हूं:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> AjaxNavigation</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript")></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript")></script> <script src="@Url.Content("~/Scripts/ajaxnavigation.js")" type="text/javascript")></script> </head> <body> <div id="loadLayout" style="display: none; position: fixed; z-index: 20; top: 0px; left: 0px; width: 100% !important; height: 100% !important;"> <div style="margin-left: -24px; margin-top: -24px; position: relative; top: 50%; left: 50%; z-index: 20;"> <div id="loadMessage"> </div> <div> <img src="@Url.Content("~/Content/progress.gif")" alt="..." /> </div> </div> </div> <div class="page"> <header> <nav> <ul id="menu"> <li>@Ajax.ActionLinkTo(" ", "Index", "Home", "", "  ...")</li> <li>@Ajax.ActionLinkTo(" ", "About", "Home", "", "  ...")</li> </ul> </nav> </header> <div id="main"> @RenderBody() </div> </div> </body> </html> 

इसलिए, सबसे पहले, हम jquery पुस्तकालयों को शामिल करते हैं। एक बार में उन सभी को डाउनलोड करें, ताकि अजाक्स नेविगेशन के दौरान मैनुअल रीलोडिंग के साथ अनावश्यक समस्याएं पैदा न हों। हम आगे ajaxnavigation.js स्क्रिप्ट लिखेंगे और यह फ़ाइल कोड की बहुत छोटी ~ 10 पंक्तियाँ होगी, जैसा कि मैंने पहले उल्लेख किया है।

पृष्ठ शीर्षक में एक बहुत विशिष्ट सामग्री है - हमारे आवेदन का नाम। सिद्धांत रूप में, आप इसे खाली छोड़ सकते हैं - हम इसे हर बार js का उपयोग करके असाइन करेंगे जब पृष्ठ मैन्युअल रूप से लोड होता है।

लोड करने की प्रक्रिया को प्रदर्शित करने के लिए लोडलैटआउट और लोडमेसेज तत्वों को परिभाषित किया गया है। तत्वों को इस तरह से डिज़ाइन किया गया है कि उपयोगकर्ता को एक नया पृष्ठ लोड करने के दौरान वह जगह क्लिक करने में सक्षम होने से रोकें जहाँ वे नहीं मिलते।

मुख्य नाम वाले ब्लॉक में सीधे पृष्ठ का मुख्य भाग होता है। यह इसकी सामग्री है जिसे हम अजाक्स का उपयोग करके अपडेट करेंगे। दो पिछले ब्लॉकों (लोडलैटआउट और लोडमैसेज) के साथ, मुख्य ब्लॉक का एक जादू नाम भी है, हम इसे बाद में उपयोग करेंगे।

Ajax.ActionLinkTo (...) सभी संबद्ध मापदंडों के साथ एक लिंक बनाता है। हम इसे नीचे और अधिक विस्तार से विचार करेंगे।

चरण 4 - अजाक्स।

यह सहायक मानक Ajax.ActionLink (...) पर एक छोटा सा विस्तार है:

 public static class AjaxHelpers { /// <summary> ///   ,    Ajax       main ///  PartialView /// </summary> public static MvcHtmlString ActionLinkTo(this AjaxHelper ajaxHelper, String linkText, String actionName, String controllerName = null, String areaName = null, String loadMessage = null, Object routeValues = null, Object htmlAttributes = null) { //   RouteValueDictionary routeValueDictionary = new RouteValueDictionary(routeValues); if (!String.IsNullOrEmpty(actionName) && !routeValueDictionary.ContainsKey("action")) { routeValueDictionary.Add("action", actionName); } if (!String.IsNullOrEmpty(controllerName) && !routeValueDictionary.ContainsKey("controller")) { routeValueDictionary.Add("controller", controllerName); } if (!routeValueDictionary.ContainsKey("area")) { if (!String.IsNullOrEmpty(areaName)) routeValueDictionary.Add("area", areaName); else routeValueDictionary.Add("area", ""); } //   Ajax AjaxOptions ajaxOptions = new AjaxOptions() { UpdateTargetId = "main", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", LoadingElementId = "loadLayout", OnBegin = "changeLoadMesage('" + loadMessage + "')", OnSuccess = "onPageLoaded()" }; //   String ajaxActionName = "Ajax" + actionName; return ajaxHelper.ActionLink(linkText, ajaxActionName, null, routeValueDictionary, ajaxOptions, HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes)); } } 

सहायक क्षेत्र को ध्यान में रखते हुए आवश्यक मार्ग बनाता है (आखिरकार , बहुत वास्तविक परियोजनाओं के पास क्षेत्र हैं), और यह कार्रवाई और नियंत्रक के साथ उन्हें स्थापित करने के लिए बेहद सुविधाजनक निकला। हमें इस मार्ग को ब्राउज़र के एड्रेस बार में डालने की आवश्यकता होगी जब पेज के माध्यम से अजाक्स-नेवीगेटिंग, साथ ही साथ नेविगेशन का इतिहास रखने के लिए।

AjaxOptions ऑब्जेक्ट प्राप्त सामग्री के साथ मुख्य ब्लॉक के शरीर को बदल देगा और दो जेएस फ़ंक्शन करेगा (बाद में उन पर अधिक):

• changeLoadMesage - एक नया पृष्ठ लोड करने की प्रक्रिया के दौरान उपयोगकर्ता को प्रदर्शित होने वाले पाठ को बदलता है।
• onPageLoaded - एक सफल पृष्ठ लोड के बाद कहा जाता है और पता बार और इतिहास से संबंधित कुछ क्रियाएं करता है।

यह भी ध्यान दिया जाना चाहिए कि, वास्तव में, यहां तक ​​कि जब हम सहायक को बुलाते हैं, तो हमने कार्रवाई का नाम इंडेक्स / अबाउट के रूप में निर्दिष्ट किया है, सहायक ऊपर उल्लिखित अजाक्स उपसर्ग का स्थानापन्न करेगा और अजाक्स अनुरोध के लिए बिल्कुल कार्रवाई करेगा, अर्थात्। AjaxIndex / अजाक्सअबाउट ।

चरण 5 - द मैजिक स्क्रिप्ट ajaxnavigation.js

स्क्रिप्ट का समय आ गया है, जिसमें केवल तीन कार्य हैं। सबसे पहले, शिलालेख को बदलने का प्राथमिक कार्य, जिसे बूट समय पर प्रदर्शित किया जाता है:

 // ,       Ajax function changeLoadMesage(message) { //      $("#loadMessage").empty(); if (message != null) $("#loadMessage").append(message); } 

दूसरे, पृष्ठ के भाग को लोड करने के बाद कहा जाने वाला कार्य:

 // ,       Ajax function onPageLoaded() { //    var url = $("#pageUrl").html().replace("&", "&"); window.history.pushState("ajax", document.title, url); //     document.title = $("#pageTitle").html(); //    $.validator.unobtrusive.parse($("#main")); } 

सबसे पहले, हमें ब्राउज़र लाइन में इस url को बदलने के लिए लोड किए गए पृष्ठ का url प्राप्त करना चाहिए, और इसे ब्राउज़िंग इतिहास में भी सहेजना चाहिए। ऐसा करने के लिए, प्रत्येक पृष्ठ पर एक छिपा हुआ पेजयूआर ब्लॉक रखा जाता है। पृष्ठ पर लिंक लेने के बाद, विंडो स्टेट स्टैक में एक नया राज्य जोड़ें, इसे कोड शब्द " अजाक्स " के साथ चिह्नित करें। यह इतिहास के माध्यम से नेविगेट करने पर उपयोगकर्ता को पृष्ठ को फिर से लोड करने के लिए एक मजबूर कमांड देने के लिए किया जाता है (जब उपयोगकर्ता आगे / पीछे की ओर धक्का देता है)।
हमें पृष्ठ शीर्षक बदलने और अंतर्निहित क्लाइंट सत्यापन को अपडेट करने की भी आवश्यकता है।

पृष्ठ लोड होने पर तीसरा फ़ंक्शन कहा जाता है:

 //      $(document).ready(function () { //       window.onpopstate = function (event) { if (event.state == "ajax") window.location.reload(); else window.history.replaceState("ajax", document.title, window.location.href); event.preventDefault(); }; //     document.title = $("#pageTitle").html(); }); 

वह दस्तावेज़ का शीर्षक भी बदल देती है, और कहानी से किसी भी राज्य को डाउनलोड करने के लिए सदस्यता भी लेती है। यदि राज्य को " अजाक्स " के रूप में चिह्नित किया जाता है, तो हम पृष्ठ को फिर से लोड करते हैं, यदि नहीं, तो बस बाद के पुनः लोड के लिए इसे इस तरह से चिह्नित करें।

स्टेज 6 - प्रस्तुति और Html.PageInfo

हमारे मामले में एक विशिष्ट प्रतिनिधित्व इस तरह दिखता है:

 @Html.PageInfo(" ","/Home/Index") <h2>Home</h2> <p> Home page </p> 

Html.PageInfo (...) सहायक दस्तावेज़ के शीर्षक और वर्तमान पृष्ठ के लिंक के साथ छिपे हुए ब्लॉक जोड़ता है। जैसा कि हमने पहले देखा, इन छिपे हुए ब्लॉक का उपयोग लिपियों में किया जाता है। सहायक बहुत सरल है:

 public static class HtmlHelpers { /// <summary> ///   : /// 1) "pageTitle" -    /// 2) "pageUrl" -    /// </summary> public static MvcHtmlString PageInfo(this HtmlHelper helper, String title, String url) { // Create title TagBuilder pageTitle = new TagBuilder("div"); pageTitle.SetInnerText(" AjaxNavigation - " + title); pageTitle.MergeAttribute("id", "pageTitle"); pageTitle.MergeAttribute("style", "display: none;"); // Create url TagBuilder pageUrl = new TagBuilder("div"); pageUrl.SetInnerText(url); pageUrl.MergeAttribute("id", "pageUrl"); pageUrl.MergeAttribute("style", "display: none;"); return new MvcHtmlString(pageTitle.ToString(TagRenderMode.Normal) + pageUrl.ToString(TagRenderMode.Normal)); } } 

स्टेज 7 - अंतरिम सारांश

अब हम web.config व्यूज फोल्डर में निर्मित html / ajax हेल्पर्स को कनेक्ट करना न भूले बिना अपना एप्लिकेशन लॉन्च कर सकते हैं:

 <system.web.webPages.razor> ... <namespaces> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> <add namespace="AjaxNavigation.Core"/> </namespaces> </pages> </system.web.webPages.razor> 

हम जल्दी से इस क्रम के साथ आवेदन का परीक्षण कर सकते हैं, मैंने इसे स्क्रीनशॉट के साथ चित्रित किया है:

1. डाउनलोड पृष्ठ / होम / इंडेक्स;
2. सुनिश्चित करें कि लिंक के बारे में / होम / AjaxAbout पृष्ठ पर जाता है;
3. लिंक का पालन करें और यह सुनिश्चित करें कि यह अजाक्स और लिंक / होम / अबाउट एड्रेस बार में दिखाई देता है;
4. इंडेक्स लिंक का पालन करें, जो कार्रवाई / होम / अजाक्सइंडेक्स को भी इंगित करता है;
5. सुनिश्चित करें कि लंबे ऑपरेशन के दौरान एक संदेश प्रदर्शित होता है और किसी अन्य लिंक का पालन करना असंभव है;
6. इंडेक्स पेज को लोड करने के बाद, सुनिश्चित करें कि कहानी संरक्षित है और उस पर नेविगेशन उपलब्ध है ("बैक" और "फॉरवर्ड");
7. सुनिश्चित करें कि एक पृष्ठ पर जाने के बाद, पृष्ठ ताज़ा सही ढंग से काम करता है।

एक हानिकारक समस्या बनी हुई है। एक नए टैब / विंडो में हमारा लिंक खोलना अभी भी काम नहीं करता है:

चरण 8 और अंतिम - एक नए टैब में खोलें ...

आइए समझने की कोशिश करें कि समस्या क्या है। जाहिर है, जब ब्राउज़र नए टैब में / Home / AjaxIndex लिंक को खोलने का प्रयास करता है, तो कोई भी अजाक्स निष्पादित नहीं किया जाएगा। इस मामले में, हमें पृष्ठ का पूर्ण प्रतिनिधित्व वापस करने की आवश्यकता है, न कि केवल इसका हिस्सा। लेकिन यह कैसे निर्धारित किया जाए कि ब्राउज़र ने एक नई विंडो खोली है?

इसके लिए हमें किसी प्रकार के डायग्नोस्टिक टूल की जरूरत है, मैं फिडलर का उपयोग करता हूं, जो एक बहुत ही सरल और तेज ट्रैफिक विश्लेषक है। हम इसे लॉन्च करते हैं और दो अनुरोधों की तुलना करते हैं जो ब्राउज़र सर्वर पर भेजता है:

• लिंक पर सामान्य क्लिक के दौरान
• जब एक नई विंडो में एक लिंक खोलने की कोशिश कर रहा है

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

 public abstract class ControllerBase : Controller { protected override void Execute(RequestContext requestContext) { //       Ajax{Something},     PartialView // ,       X-Requested-With,        / // , ,      . Boolean isAjaxRequest = requestContext.HttpContext.Request.QueryString["X-Requested-With"] != null; Boolean urlRequestPartialView = requestContext.HttpContext.Request.RawUrl.ToLower().Contains("ajax"); if ((urlRequestPartialView) && (!isAjaxRequest)) { String newUrl = requestContext.HttpContext.Request.RawUrl.ToLower().Replace("ajax", ""); requestContext.HttpContext.Response.Redirect(newUrl); } base.Execute(requestContext); } } 

खैर, कंट्रोलरबेस से हमारे सभी कंट्रोलर को इनहेरिट करना न भूलें।

स्रोत कोड और उपयोगी लिंक

आप c ifolder.ru या zalil.ru कर सकते हैं।

• इतिहास एपीआई (और इसके बिना) के समर्थन के साथ एक-पेज का अजाक्स एप्लिकेशन बनाना - habrahabr.ru/blogs/webdev/123972
• HTML5 इतिहास एपीआई का परिचय - habrahabr.ru/blogs/javascript/123106
• Ajax का उपयोग करते हुए पृष्ठ को VKontakte - habrahabr.ru/blogs/javascript/128552 के रूप में लोड करें
• पुराने ब्राउज़रों के लिए समर्थन - plugins.jquery.com/project/history-js
• अजाक्स नेविगेशन का एक दिलचस्प काम करने वाला उदाहरण, मैंने इससे बहुत कुछ सीखा - www.asual.com/jquery/address/samples/tabs/#Overview
• ग्राहक सत्यापन के बारे में - www.jasoncavett.com/2011/03/use-unobtrusive-jquery-validation.html

आपका ध्यान के लिए धन्यवाद! अच्छा कोडिंग।