Asynchronous communication between the client and server using ICallbackEventHandler

Implementing client callbacks without postbacks in ASP.NET can be done in several ways:

  • Using UpdatePanel control
  • Exposing Web Services to client-side script
  • Calling a Web service from client-side using jQuery or Microsoft Ajax functions
  • Implementing ICallbackEventHandler
  • many others…

But this post doesn’t intend to discuss the differences between them, but to show the last option presented: an implementation of ICallbackEventHandler. It allows asynchronous communication between the client and server.

<%@ Page Language="C#" AutoEventWireup="true"
  CodeFile="ClientCallback.aspx.cs" Inherits="ClientCallback" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
  1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head id="Head1" runat="server">
  <title>Client Callback Example</title>
  <script type="text/ecmascript">
      function LookUpStock() {
          var lb = document.getElementById("ListBox1");
          try {
              var product = lb.options[lb.selectedIndex].text;
              CallServer(product, "");
          }
          catch (err) {
              alert("Please select a product.");
          }
      }

      function ReceiveServerData(rValue) {
          document.getElementById("ResultsSpan").innerHTML = rValue;

      }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:ListBox ID="ListBox1" Runat="server"></asp:ListBox>
      <br />
      <br />
      <input type="button" value="Look Up Stock" onclick="LookUpStock()" />
      <br />
      <br />
      Items in stock: <span id="ResultsSpan" runat="server"></span>
      <br />
    </div>
  </form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ClientCallback : System.Web.UI.Page,
     System.Web.UI.ICallbackEventHandler
{
    protected System.Collections.Specialized.ListDictionary catalog;
    protected String returnValue;
    protected void Page_Load(object sender, EventArgs e)
    {
        String cbReference =
            Page.ClientScript.GetCallbackEventReference(this,
            "arg", "ReceiveServerData", "context");
        String callbackScript;
        callbackScript = "function CallServer(arg, context)" +
            "{ " + cbReference + ";}";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
            "CallServer", callbackScript, true);

        catalog = new System.Collections.Specialized.ListDictionary();
        catalog.Add("monitor", 12);
        catalog.Add("laptop", 10);
        catalog.Add("keyboard", 23);
        catalog.Add("mouse", 17);

        ListBox1.DataSource = catalog;
        ListBox1.DataTextField = "key";
        ListBox1.DataBind();

    }

    public void RaiseCallbackEvent(String eventArgument)
    {
        if (catalog[eventArgument] == null)
        {
            returnValue = "-1";
        }
        else
        {
            returnValue = catalog[eventArgument].ToString();
        }
    }
    public String GetCallbackResult()
    {
        return returnValue;
    }
}

 

Advertisements

One thought on “Asynchronous communication between the client and server using ICallbackEventHandler

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s