ASP.NET वेब फ़ॉर्म, क्लिक करने योग्य div और आवधिक सर्वर मतदान में ट्रैफ़िक कम करें

ASP.NET वेब फॉर्म तकनीक धीरे-धीरे लेकिन निश्चित रूप से अतीत की बात है। यह एक वेब एपीआई द्वारा कोणीय 6 और इसी तरह के ढेर के साथ बदल दिया जा रहा है। लेकिन मुझे बड़ी विरासत के साथ वेब फॉर्म पर एक प्रोजेक्ट विरासत में मिला। मेरे कुछ दोस्त हैं जिनके पास एक या अधिक समान स्थिति है। पुरानी तकनीक पर लंबे समय से लिखे गए अनुप्रयोग जिन्हें विकसित और बनाए रखने की आवश्यकता है। वेब फॉर्म में पोस्टबैक को पूरे पृष्ठ को रीफ्रेश नहीं करने की क्षमता है, लेकिन इसका केवल एक हिस्सा है। UpdatePanel में क्या लपेटा गया है। यह अन्तरक्रियाशीलता जोड़ता है, लेकिन यह अभी भी काफी धीरे-धीरे काम करता है और बहुत सारे ट्रैफ़िक का उपभोग करता है, क्योंकि सर्वर पर हर बार रेंडरिंग होता है, और क्लाइंट को रेडी-मेड मार्कअप दिया जाता है, जिसे वर्तमान डिव के अंदर डालने की आवश्यकता होती है। वैसे, UpdatePanel सिर्फ एक div में प्रदान किया जाता है, जिसमें तब मार्कअप को बदल दिया जाता है।

यातायात को कम करने के लिए क्या किया जा सकता है?

1. पेज पर WebMethod लिखें और AJAX टूल का उपयोग करके क्लाइंट से कॉल करें, जब आपको कोई प्रतिक्रिया मिलती है, तो DOM को JS के माध्यम से बदल दें।
   
   इस समाधान का नकारात्मक पक्ष यह है कि आप WebMethod को नियंत्रण में परिभाषित नहीं कर सकते हैं। मैं पृष्ठ पर सभी कार्यक्षमता लिखना नहीं चाहता, खासकर यदि इसका उपयोग विभिन्न पृष्ठों पर कई बार किया जाता है।
2. एक asmx सेवा लिखें, और इसे क्लाइंट से कॉल करें। यह बेहतर है, लेकिन इस मामले में नियंत्रण और सेवा के बीच कोई स्पष्ट संबंध नहीं है। सेवाओं की संख्या नियंत्रणों की संख्या में वृद्धि के साथ बढ़ेगी। इसके अलावा, ViewState हमारे लिए उपलब्ध नहीं होगा, जिसका अर्थ है कि हम सेवा का उपयोग करते समय स्पष्ट रूप से मापदंडों को पारित करेंगे, इसलिए हम सर्वर सत्यापन करेंगे और जांचें कि क्या उपयोगकर्ता को वह करने का अधिकार है जो उसने अनुरोध किया था।
3. ICallbackEventHandler इंटरफ़ेस का उपयोग करें। यह मेरी राय में, एक बहुत अच्छा विकल्प है।
   
   मैं इस पर अधिक विस्तार से ध्यान दूंगा।

पहली बात यह है कि हमारे यूजरकंट्रोल को ICallbackEventHandler से विरासत में मिला है और RaiseCallbackEvent और GetCallbackResult विधियाँ लिखी हैं। यह थोड़ा अजीब है कि उनमें से 2 हैं। पहला ग्राहक से पैरामीटर प्राप्त करने के लिए जिम्मेदार है, दूसरा परिणाम वापस करने के लिए जिम्मेदार है।
यह कुछ इस तरह दिखेगा

public partial class SomeControl : UserControl, ICallbackEventHandler { #region  /// <summary> ///    /// </summary> private Guid _someFileId; #endregion #region  ICallbackEventHandler /// <inheritdoc /> public void RaiseCallbackEvent(string eventArgument) { //    try { dynamic args = JsonConvert.DeserializeObject<dynamic>(eventArgument); _someFileId = (Guid) args.SomeFileId; string type = (string) args.Type; } catch (Exception exc) { //  throw; } } /// <inheritdoc /> public string GetCallbackResult() { //  try { // -  return JsonConvert.SerializeObject(new { Action = actionName, FileId = _someFileId, }); } catch (Exception exc) { //  throw; } } #endregion } 

यह सर्वर साइड था। अब ग्राहक

 var SomeControl = { _successCallbackHandler: function (responseData) { let data = JSON.parse(responseData); switch (data.Action) { case "continue": // -   break; case "success": //  -  break; case "fail": //   break; default: //   alert,     alert("      "); break; } }, _failCallbackHandler: function() { alert("      "); }, } 

वह सब नहीं है। हमें अभी भी अपने सभी कार्यों को जोड़ने के लिए जेएस उत्पन्न करने की आवश्यकता है।

  protected override void OnLoad(EventArgs e) { base.OnLoad(e); //   SomeControl.js,     Page.ClientScript.RegisterClientScriptInclude(Page.GetType(), "SomeControl", "/Scripts/controls/SomeControl.js?v=2.24.0"); string callbackArgument = //   //***  .***   JS   SomeControl  CallServer.       ,     ScriptManager.RegisterStartupScript(Page, Page.GetType(), "SomeControl.Initialize", $@"SomeControl.CallServer = function(someFileId) {{ let args = JSON.stringify({{ SomeFileId : someFileId, Type: '{callbackArgument}' }}); {Page.ClientScript.GetCallbackEventReference(this, "args", "SomeControl._successCallbackHandler", string.Empty, "SomeControl._failCallbackHandler", true)}; }};", true); //    ScriptManager.GetCurrent(Page)?.RegisterAsyncPostBackControl(this); } 

यह स्पष्ट रूप से नियंत्रण के पीछे का कोड है।

सबसे दिलचस्प बात यह है कि GetCallbackEventReference विधि का उपयोग करके जेएस कार्यों की पीढ़ी है।

हम इसमें पास हो गए

• हमारे नियंत्रण के लिए लिंक
• JS वैरिएबल का नाम जिसका मान इवेंट के माध्यम से RaiseCallbackEvent विधि में सर्वर के पास जाएगा (तर्क के ऊपर की लाइन ट्रांसमिशन के लिए JSON में ऑब्जेक्ट को क्रमबद्ध करता है और वास्तव में इस args वेरिएबल का मान सेट करता है)
• सफलता के लिए JS फ़ंक्शन कॉलबैक नाम
• निष्पादन संदर्भ (मैं इसका उपयोग नहीं करता)
• कुछ गलत होने पर जेएस कॉलबैक फ़ंक्शन का नाम
• हम ASP.NET टूल का उपयोग करके सर्वर पर आए अनुरोध को मान्य करेंगे

यह सब एक साथ कैसे चलेगा?

JS से हम SomeControl.CallServer को कॉल कर सकते हैं, यह फ़ंक्शन स्थानीय वैरिएबल आर्ग्स बनाएगा और एक फ़ंक्शन को कंट्रोल ट्रांसफर करेगा जो AJAX के माध्यम से सर्वर से अनुरोध करेगा।
अगला, नियंत्रण RaiseCallbackEvent सर्वर विधि के लिए दिया गया है। सभी जो आर्ग्स क्लाइंट वैरिएबल में था अब सर्वर इनपुट पैरामीटर ईवेंट में गिर गया।
RaiseCallbackEvent निष्पादित होने के बाद, नियंत्रण GetCallbackResult को पारित किया जाएगा।

स्ट्रिंग जो हम रिटर्न के माध्यम से लौटाएंगे, ग्राहक को भेजी जाएगी और SomeControl._successCallbackHandler फ़ंक्शन के इनपुट पैरामीटर में मिल जाएगी, अर्थात् responseData में।
यदि किसी चरण में सर्वर कोड एक अपवाद फेंकता है, तो नियंत्रण ग्राहक को स्थानांतरित किया जाएगा SomeControl._failCallbackHandler

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

पहली नज़र में डिज़ाइन भ्रामक है, लेकिन यदि आप देखते हैं, तो यह बहुत सुविधाजनक है, और ट्रैफ़िक को बचा लिया गया था।

दूसरा सवाल जिसे मैं इस लेख में शामिल करना चाहता हूं वह क्लिक करने योग्य डिव है या आप क्लाइंट साइड से अपडेटपैनल अपडेट को कैसे कॉल कर सकते हैं।

क्लिक करने योग्य divs की आवश्यकता क्यों है, क्या आप बस <asp: बटन> का उपयोग कर सकते हैं?
मुझे पसंद है कि div को जैसा मैं चाहता हूं, वैसे बनाया जा सकता है, मैं इनपुट प्रकार = "बटन" द्वारा सीमित नहीं हूं "

कार्यान्वयन के लिए इसे IPostBackEventHandler इंटरफ़ेस से विरासत में प्राप्त करना आवश्यक है

उसके पास केवल 1 विधि है

 public void RaisePostBackEvent(string eventArgument) 

अब, पिछले मामले में, हमें इस पद्धति को कॉल करने के लिए जेएस उत्पन्न करने की आवश्यकता है

ऐसा दिखता है

 Page.ClientScript.GetPostBackEventReference(this, callbackArgument) 

callbackArgument सर्वर पर सेट है और क्लाइंट पर इसे बदलने से काम नहीं चलेगा। लेकिन आप हमेशा कुछ छिपाकर रख सकते हैं। हमारे पास एक पूरा पोस्टबैक है

अब GetPostBackEventReference का परिणाम किसी भी div या स्पैन, या जो भी हो, के onclick पर लटका दिया जा सकता है।

या सिर्फ टाइमर से जेएस से कॉल करें।

नियंत्रण को अतुल्यकालिक के रूप में पंजीकृत करना सुनिश्चित करें (OnLoad पर हम कहते हैं

 ScriptManager.GetCurrent(Page)?.RegisterAsyncPostBackControl(this); 

), अन्यथा, UpdatePanel के अंदर होने पर भी, तुल्यकालिक PostBack को कॉल किया जाएगा और पूरे पृष्ठ को अपडेट किया जाएगा, और केवल UpdatePanel की सामग्री नहीं

ऊपर वर्णित 2 विधियों का उपयोग करते हुए, मैंने लागू किया, उदाहरण के लिए, ऐसा परिदृश्य।

उपयोगकर्ता ने बटन पर क्लिक किया, एक लंबे ऑपरेशन (10-15 सेकंड) के लिए एक छोटा सा अनुरोध सर्वर को भेजा गया था, उपयोगकर्ता को एक छोटी प्रतिक्रिया मिली, जिसके विश्लेषण के दौरान क्लाइंट स्क्रिप्ट सेटटाइमआउट कहता है। सेटटाइमआउट में, सर्वर को कॉलबैक के लिए एक फ़ंक्शन दिया जाता है ताकि पहले से अनुरोध किए गए ऑपरेशन के परिणामों के बारे में पता लगाया जा सके। यदि परिणाम तैयार है, तो PostPack को UpdatePanel में कॉल करें - निर्दिष्ट UpdatePanel अपडेट किया गया है। यदि परिणाम अभी तक तैयार नहीं है, तो फिर से सेटटाइमआउट कॉल करें।

उन सभी को शुभकामनाएं जो अभी भी वेब फॉर्म के साथ काम कर रहे हैं, मुझे आशा है कि लेख आपके सिस्टम को तेज और अधिक सुंदर बना देगा, और उपयोगकर्ता आपको धन्यवाद देंगे।