ASP.NET AJAX Client-Side Callback Example

ASP.NET AJAX Client-Side Callback – इस Callback Approach को ठीक से समझने के लिए हम निम्नानुसार एक Example देख सकते हैं, जिसमें हमारे Webpage पर केवल एकही  HTML Button Element व एक ही TextBox Server Control है और जब User इस Page पर स्थित Button को Click करता है, तो एक Random Number Generate होकर इस Page पर स्थित TextBox Server Control में Store हो जाता है।


File Name: Default.aspx
<%@PageLanguage="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<script type="text/javascript">
function getNumber(){
  UseCallback();
}
function getRandomNumberFromServer(callbackResult, context){
document.forms[0].txtRandom.value = callbackResult;
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/x html">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtRandom" runat="server"></asp:TextBox><br/><br/>
<input id="btnRandom" type="button" value="Get Random Number" onclick="GetNumber()"/>
</form>
</body>
</html>

File Name: Default.aspx.cs
using System;
public partial class Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
  private string _callbackResult = null;
  protectedvoid Page_Load(object sender, EventArgs e)
  {
  string cbReference = Page.ClientScript.GetCallbackEventReference(
  this, "arg", "GetRandomNumberFromServer", "context");
  string cbScript = "function UseCallback(arg, context)" + "{" + cbReference + "; " +"}";
  Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"UseCallback", cbScript, true);
}

public void RaiseCallbackEvent(string eventArg)
{
  Random rnd = newRandom();
  _callbackResult = rnd.Next().ToString();
}

publicstring getCallbackResult()
{
  return _callbackResult;
}
}

जैसे ही हम इस Page को Run करते हैं, हमारे सामने निम्नानुसार Output Render होता है:

ASP.NET AJAX Client-Side Callback in ASP.NET WebForms in Hindi

इस Page पर दिखाई देने वाले “Get Random Number” Button पर जैसे ही Click करते हैं, TextBox में हमें एक Random Number दिखाई देने लगता है।

हालांकि हम जानते हैं कि इस Page पर जो TextBox Control है, वह एक Server-Side Web Control है, जिसका Client-Side JavaScript से Directly कोई सम्बंध नहीं होता, फिर भी जब  HTML Button Control को Click किया जाता है, तो Server-Side Code द्वारा Generate होने वाला Resultant Random Number इस TextBox में Fill हो जाता है और ऐसा होता है ASP.NET 2.0 द्वारा Page में Add किए गए Client-Callback Capability के कारण।

क्योंकि जैसे ही हम इस Page पर दिखाई देने वाले Button पर Click करते हैं, Client-Side में Specified निम्न JavaScript Function Execute होता है:


function getNumber(){
  UseCallback();
}

ये Function Execute होतेही UseCallback() Method को Invoke करता है, जबकि इस UseCallback() JavaScript Function को Code-Behind File द्वारा Page_Load Event के Fire होते समय पहले ही Create कर दिया जाता है।

अत: जब इस Page को Request/Run किया जाता है, तो ये UseCallback() Function हमारे ASP.NET Page के Markup Code के साथ पहले से ही हमारे Page पर उपलब्ध हो जाए, इसके लिए हमने अपनी Code-Behind File में निम्न Statements Specify किए हैं:


string cbScript = "function UseCallback(arg, context)" +"{" + cbReference + "; " + "}";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"UseCallback", cbScript, true);

जहां cbReference String Object में निम्नानुसार Code Stored है, जो कि हमारे UseCallback() Function की Body का Program Logic बनता है:


string cbReference = Page.ClientScript.GetCallbackEventReference(
this, "arg", "GetRandomNumberFromServer", "context");

इस प्रकार से जब UseCallback() Function Execute होता है, जो कि हमारे Page के Markup में पहले से Exist होता है, इसमें उस Function का नाम तीसरे Parameter की तरह Specify किया गया होता है, जो Web Server द्वारा Generate होने वाले Random Number को Client Browser में Loaded Page के TextBox Control में Fill करने का काम करता है और हमारे उदाहरण में उस Client-Side Method का नाम GetRandomNumberFromServer() है, जो कि Render होने के बाद Markup Source Code में निम्नानुसार Expand होता है:


<script type="text/javascript">
//<![CDATA[
function UseCallback(arg, context) {
  WebForm_DoCallback('__Page', arg, getRandomNumberFromServer, context, null, false);
}//]]>
</script>

हम देख सकते हैं कि हमारे ASP.NET Page में हमने इस JavaScript Function को निम्नानुसार Specify किया है:


function getRandomNumberFromServer(callbackResult, context){
  document.forms[0].txtRandom.value = txtRandom;
}

जहां पहले Parameter के रूप में हमारे callbackResult Specified है, जिसमें Asynchronous Request के Perform होने के बाद आने वाला Data Stored रहता है, जिसे Webpage पर स्थित TextBox Control में Fill किया जाता है। जबकि दूसरे Parameter के रूप में context Parameter को Pass करके हम JavaScript को ये बता रहे हैं कि Random Value को प्राप्त करने के लिए जिस Context में Request Perform किया गया था, Response का Context भी वही है।

यदि आपको JavaScript Context के बारे में जानकारी नहीं है, तो आपको बेहतर जानकारी के लिए हमारी अन्‍य पुस्तक “Advance JavaScript in Hindi” पढनी चाहिए, जिसमें JavaScript Programming को काफी सरल भाषा में सैकडों Example Programs का प्रयोग करते हुए समझाया गया है।

इस प्रकार से ASP.NET Page में Specify किया गया GetNumber() Method, Web Server पर Asynchronously Request Send करने का काम करता है जबकि getRandomNumberFromServer() Function, Web Server से Asynchronously आने वाले Response को फिर से Client Browser के Webpage के TextBox Control में Fill करने का काम करता है।

चलिए, अब हम Code-Behind File में Specify किए गए उपरोक्त Example Code द्वारा समझने की कोशिश करते हैं, जहां Page Class में System.Web.UI.ICallbackEventHandler Interface को Implement किया गया है।

इस Interface में RaiseCallbackEvent()GetCallbackResult() Method को Specify किया गया होता है, इसलिए जब हम हमारी Page Class में इस Interface को Implement करते हैं, तब हमें अपनी Page Class में इन दोनों Methods को Implement करना जरूरी होता है और ये दोनों ही Methods, Client Script Request के साथ काम करते हैं।

यानी RaiseCallbackEvent() Method, Send की जाने वाली Asynchronous Request की Processing के बाद Return होने वाली String Value को Current Page पर Retrieve करने की सुविधा देता है, जिसके लिए हमने हमारे Example में इसे निम्नानुसार Define किया है:


public void RaiseCallbackEvent(string eventArg)
{
  Random rnd = newRandom();
  _callbackResult = rnd.Next().ToString();
}

ये Method जब Callback के रूप में Execute होता है, तो Client-JavaScript Function को एक Random Number Generateकरता है।

जबकि यानी Asynchronous Request Processing के बाद RaiseCallbackEvent() Method द्वारा जो मान Generate होता है, उसे Return करने का काम GetCallbackResult() Method का होता है। इसीलिए हमने हमारे Example में इस Method को निम्नानुसार Define किया है:


public string getCallbackResult()
{
  return _callbackResult;
}

जबकि Page_Load() Event Handler में Client-Callback Script Manager को Create करके Generate होने वाले .aspx Page में Insert किया गया है और इस जरूरत को पूरा करने के लिए Page_Load() Event Handler को निम्नानुसार Define किया गया है:


protectedvoid Page_Load(object sender, EventArgs e)
{
string cbReference = Page.ClientScript.GetCallbackEventReference(
  this, "arg", "GetRandomNumberFromServer", "context");
  string cbScript = "function UseCallback(arg, context)" + "{" + cbReference + "; " + "}";
  Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"UseCallback", cbScript, true);
}

इस प्रकार से Page_Load() Event Handler, Client से आने वाली Request को Server पर Asynchronously पहुंचाने के लिए UseCallback() Method को Define करके Webpage में Embed कर देता है, ताकि User द्वारा Send की जाने वाली Asynchronous HTTP Request के लिए ये JavaScript Function Execute हो सके।

अत: अब यदि हम हमारे Page की Asynchronous Processing को समझें तो सबसे पहले Page की Request करते ही उस Page का Page_Load() Event Execute होता है, जो Client-Side में Run होने के लिए एक UseCallback() नाम के JavaScript Function को Define करके Page के Markup Source Code में Embed कर देता है, ताकि वह JavaScript Function Client Side में JavaScript Event के लिए Response कर सके।

परिणामस्वरूप जैसे ही हम हमारे Page पर दिखाई देने वाले Button को Click करते हैं, getNumber() नाम का JavaScript Function Run होता है और UseCallback() नाम के Function को Run कर देता है, जो कि Web Server पर एक Asynchronous Request Send करता है, जो Code-Behind File में Defined RaiseCallbackEvent() Method को Execute करता है।

इस RaiseCallbackEvent() Method के Execute होते ही एक Random Number Generate होता है, जिसे Page Class में Specify किए गए Data Member _callbackResult में Store कर दिया जाता है और इस Data Member में Stored Value को फिर से Client Webpage को Response के रूप में Send करने के लिए GetCallbackResult() Method Execute होता है।

परिणामस्वरूप Client-Webpage को Generated Random Number getRandomNumberFromServer() नाम के JavaScript Function के callbackResult नाम के First Parameter को प्राप्त होता है और ये Method Execute होते ही Client Page पर स्थित TextBox में Server से आने वाला Random Number Refresh हो जाता है।

इस प्रकार से Client-Callback द्वारा ASP.NET 2.0 में Add किए गए एक Feature के माध्‍यम से Asynchronously बिना पूरे Webpage के Reload हुए ही Page के किसी एक हिस्से को Update किया जाना सम्भव हो जाता है, जो कि पूरी तरह से ASP.NET में Define किया गया AJAX Technology ही है।

ASP.NET AJAX – The Client-Side Callback
Working with Page Events of ASP.NET Web Application

Core ASP.NET WebForms in Hindi - BccFalna.com: TechTalks in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook Core ASP.NET WebForms with C# in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

Core ASP.NET WebForms in Hindi | Page:647 | Format: PDF

BUY NOW GET DEMO REVIEWS