In a client callback, a client-script function sends a request to an ASP.NET Web page. The Web page runs a modified version of its normal life cycle. The page is initiated and its controls and other members are created, and then a specially marked method is invoked. The method performs the processing that you have coded and then returns a value to the browser that can be read by another client script function. Throughout this process, the page is live in the browser.
I’ve copied above line from MSDN :)
To implement ClientCallback we need to implement ICallbackEventHandler interface. This interface has following two signature which we need to implement.
-
GetCallbackResult
-
RaiseCallbackEvent
GetCallbackResult method is responsible to send the call back result to the client. And RaiseCallbackEvent is responsible to perform the Postback on the server.
This can be achieved by using Ajax toolkit’s update panel. But here I will make a web page which will receive current date from the server and will display it on the web page using ASP.Net client call back approach and without using Ajax toolkit.
First of all we need that our aspx page must implement the ICallbackEventHandler interface. Then we need to implement the two methods of this interface. I am pasting code from my Default.aspx.cs.
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.UI;
6: using System.Web.UI.WebControls;
7: using System.Xml;
8: using AjaxControlToolkit;
9: using System.IO;
10: /// <summary>
11: /// Impliment the ICallbackEventHandler interface
12: /// </summary>
13: public partial class _Default : System.Web.UI.Page,ICallbackEventHandler
14: {
15: // variable to hold the Get Callback Event reference
16: public string _function = string.Empty;
17: /// <summary>
18: ///
19: /// </summary>
20: /// <param name="sender"></param>
21: /// <param name="e"></param>
22: protected void Page_Load(object sender, EventArgs e)
23: {
24: // Get Client Script Manager
25: ClientScriptManager cm = Page.ClientScript;
26: // Client Side Function which will receive Data from the Server
27:
28: //Function "DatafromServer" will be on the Client Side
29: _function = cm.GetCallbackEventReference(this, "arguments", "DatafromServer", "");
30: }
31: #region ICallbackEventHandler Members
32: string _Date = string.Empty;
33: /// <summary>
34: /// //This method will return the callback result to the client
35: /// </summary>
36: /// <returns></returns>
37: public string GetCallbackResult()
38: {
39: // Return the _Date to the Client. _Date i set to Current Date in the RaiseCallbackEvent
40: return _Date;
41: }
42: /// <summary>
43: /// //This method will be invoked to perform the callback on the server (Copied from MSDN)
44: /// </summary>
45: /// <param name="eventArgument"></param>
46: public void RaiseCallbackEvent(string eventArgument)
47: {
48: // Set the Current Time in the _Date variable
49: _Date = System.DateTime.Now.ToLongTimeString();
50: }
51:
52: #endregion
53: }
Look at Line 46. In this function i.e. RaiseCallBackEvent I am setting Current Time in a Global Variable which is _Date and this is a string Variable.
And on Line 37 i.e. in GetCallbackResult I am returning _Date variable which holds the current server’s time. This function is responsible to give the result back to client.
Now another important part is the code which is in the Load event. In the page load, first I got the ClientScriptManager’s object for the Page. Then using this object I have called the GetCallbackEventReference by passing some parameters, you can see the info. of these param on MSDN. Anyhow in these parameter you can see “DatafromServer”. This is a function which will be on Client Side and it will display the result which is received from the Server.
Now I am pasting my HTML file.
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2:
3: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
4:
5: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6:
7: <html xmlns="http://www.w3.org/1999/xhtml">
8: <head runat="server">
9: <title></title>
10: <script language="javascript" type="text/javascript">
1:
2: function InvokeServer() {
3: // In this case we dont need to pass any thing in argument, as we
4: // are getting only the server time without any condition/Crteria..
5: // We can Pass string argument if we want to get some data from DB/anything
6: // based on some criteria entered by user. That crteria can be set in argument and then
7: // on the server side we can change the "RaiseCallbackEvent" to get our desired result
8: arguments = "";
9: // Variable which is holding the CallBackEvent reference (i.e. the method which will reseive
10: // the data from the Server side on Client Side
11: <%=_function %>;
12: }
13: /// This following Function is receiving the data from the Server and
14: /// Displaying it in a span.
15: function DatafromServer(arguments,context)
16: {
17: // arguments contains the data which is sent from the server to the client
18: spresult.innerHTML = arguments;
19: }
20:
</script>
11: </head>
12: <body>
13: <form id="form1" runat="server">
14: <div>
15: <%
1: --Following is a simple HTML button, which will call a JS function to get the data from the server--
%>
16: <input type="button" value="Get Server Time" onclick="javascript:InvokeServer();" />
17: <%
1: --span to hold the result from the Server--
%>
18: <span id="spresult"></span>
19: </div>
20: </form>
21: </body>
22: </html>
You can see that I have placed a simple HTML button and on its Click event I have called a JS function called InvokeServer.
And in the DatafromServer function is showing the result which is received from the Server. You can see that there is no runat=”server” anywhere in the code. Now if you run the application you will see the current time of the server without post back.
No comments:
Post a Comment