September 15, 2019
Hot Topics:

ASP.NET 2.0 Client-Side Features: Bring Server-Side Power to the Client

  • May 23, 2005
  • By Thiru Thangarathinam
  • Send Email »
  • More Articles »

Let's walk through the preceding lines of code. At the top of page, you import the required namespaces by using the Import directive. After that, you use the implements directive to implement the ICallbackEventHandler interface:

<%@ implements interface="System.Web.UI.ICallbackEventHandler" %>

The ICallbackEventHandler interface has a method named RaiseCallbackEvent that must be implemented to make the callback work. The signature of the RaiseCallbackEvent method is as follows:

public string RaiseCallbackEvent(string eventArgs)

It takes an argument of type string. If you need to pass values to the server-side method, you should use this string argument. Inside the RaiseCallbackEvent method, you first convert the supplied product ID into an integer type and then invoke a function named GetProductDetails passing in the product ID as an argument:

int value = Int32.Parse(eventArgs);
return GetProductDetails(value);

As the name suggests, the GetProductDetails method simply retrieves the details of the product and returns that information in the form of an XML string. This method starts by retrieving the connection string from the web.config file by using the following line:

string connString = WebConfigurationManager.ConnectionStrings

The above line of code retrieves the connection string from the ConnectionStrings section of the web.config file. The connection string is stored in the web.config as follows:

   <add name="Northwind"
      connectionString="server=localhost;integrated security=true;

Once the connection string is retrieved, you then create an instance of the SqlConnection object passing in the connection string as an argument. Then, it creates instances of DataSet, SqlDataAdapter, and SqlCommand objects passing in the appropriate parameters to their constructors. Next, it executes the SQL query by invoking the fill method of the SqlDataAdapter object. Once the query is executed and the results are available in the DataSet object, you then invoke the GetXml method of the DataSet object to return the XML representation of the DataSet to the caller. The RaiseCallbackEvent method receives the returned XML string and simply returns it back to the caller.

Now, switch your focus to the Page_Load event of the page. In the beginning of the Page_Load event, you check to see whether the browser supports callback by examining the SupportsCallback property of the HttpBrowserCapabilities object:

if (!Request.Browser.SupportsCallback)
   throw new ApplicationException
   ("This browser doesn't support " +
    "Client callbacks.");

Then, you invoke the Page.ClientScript.GetCallbackEventReference method to implement the callback on the client side. You use this method to generate client-side code, which is required to instantiate the asynchronous call to the server:

string src = Page.ClientScript.GetCallbackEventReference(this, "arg",
   "DisplayResultsCallback", "ctx", "DisplayErrorCallback", false);

The GetCallbackEventReference method accepts the following arguments:

  • this—A control that implements ICallbackEventHandler(Current Page)
  • arg—A string you pass to the server side as an argument
  • DisplayResultsCallback—The client-side function that will receive the result from a server-side event
  • ctx—A string you pass from one client-side function to another through a context parameter
  • DisplayErrorCallback—The client-side function that will be called if an error occurs during this process
  • false—A Boolean to indicate if an asynchronous approach should be used to invoke the function

When you execute this page from the browser and view the HTML source code, you will see that it generates the following callback code due to the above GetCallbackEventReference method call:

DisplayErrorCallback, false)

WebForm_DoCallback is a JavaScript function that in turn invokes the XmlHttp class methods to actually perform the callback.

Then, you embed the callback code inside a function by concatenating the callback-generated code with a JavaScript function named GetProductDetailsUsingPostback using the following line of code:

string mainSrc = @"function " +
"GetProductDetailsUsingPostback(arg, ctx)" +
"{ " + src + "; }";

Finally, you register the client script block through the Page.ClientScript.RegisterClientScriptBlock method call. Note that the Page.ClientScript property returns an object of type ClientScriptManager, which is used for managing client scripts. On the client side, you have a method named GetProductDetails, which is invoked when the "Get Product Details" command button is clicked:

       function GetProductDetails()
          var n = document.forms[0].txtProductID.value;
          GetProductDetailsUsingPostback(n, "txtNumber");

From within the GetProductDetails method, you invoke a method named GetProductDetailsUsingPostback and pass in the required parameters. Note that the definition of the GetProductDetailsUsingPostback method is added in the Page_Load event on the server side (through the RegisterClientScriptBlock method call).

Once the server-side function is executed, the callback manager automatically calls the DisplayResultsCallback method. Inside the DisplayResultsCallback method, you load the returned XML into an XMLDOM parser and then display its contents.

When you browse to the ScriptCallback.aspx file and search for a product with product ID of 1, the output should be somewhat similar to Figure 2.

Click here for a larger image.

Figure 2. Search Result for Product with ID of 1

When you click on the "Get Product Details" button in Figure 2, the product information is retrieved from the server and displayed in the browser—all without refreshing the page.

As you can see, the callback capability in ASP.NET 2.0 is an extremely useful feature that can go a long way toward increasing the usability of a Web application by obviating the need to perform post backs. You can implement callbacks to retrieve lookup data, perform validation, execute backend code, and so on. Callbacks also can play an important role in increasing the performance of a Web application by asynchronously fetching only relevant data.

Page 2 of 3

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date