Welcome to EMC Consulting Blogs Sign in | Join | Help

Christian Wade's Blog

Client Callbacks

My colleague Jamie Thomson posted a reference to Tim Sneath’s post on Google Suggest.  This is a pretty smart bit of functionality that can be implemented using client callbacks.

 

Client callbacks are supported by ASP.NET V2 (Whidbey).  They work by submitting an asynchronous XML-HTTP request to the server.  This request is processed by the server, but does not re-render the page.  It is very lightweight because the form itself – consisting of viewstate, values in each field, etc. – is not submitted.  It also does not fire the page's lifecycle events, and does not cause the screen to flicker like a full postback.  Plus I believe it is well supported across browsers.

 

This kind of application responsiveness was traditionally hard to achieve with Javascript.  Web developers often find themselves in a position where they want to populate values on a form according to user input on that same form.

 

Here’s a sample that will run on ASP.NET V2.  It is simply a UI that allows the user to enter the first part of a zip code and automatically fills in the city and state.

 

 

Client Callback sample UI

 

 

The aspx file contains:

 

<%@ Page Language="C#" CompileWith="Callback.aspx.cs" ClassName="Callback_aspx" Title="Client Callback Manager" %>

<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

 

<%@ Page Language="C#" CompileWith="Callback.aspx.cs" ClassName="Callback_aspx" Title="Client Callback Manager" %>

<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

 

<form id="Form1" runat=server>

<table>

    <tr>

        <td style="width: 100px">

            City</td>

        <td style="width: 100px">

            <asp:TextBox ID="City" Runat="server"></asp:TextBox>

        </td>

    </tr>

    <tr>

        <td style="width: 100px">

            State</td>

        <td style="width: 100px">

            <asp:DropDownList ID="State" Runat="server">

                <asp:ListItem Text="AL" />

                <asp:ListItem Text="AK" />

                <asp:ListItem Text="AR" />

                <asp:ListItem Text="AZ" />

                <asp:ListItem Text="CA" />

                <asp:ListItem Text="CO" />

                <asp:ListItem Text="CT" />

                <asp:ListItem Text="DC" />

                <asp:ListItem Text="DE" />

                <asp:ListItem Text="FL" />

                <asp:ListItem Text="GA" />

                <asp:ListItem Text="HI" />

                <asp:ListItem Text="IA" />

                <asp:ListItem Text="ID" />

                <asp:ListItem Text="IL" />

                <asp:ListItem Text="IN" />

                <asp:ListItem Text="KS" />

                <asp:ListItem Text="KY" />

                <asp:ListItem Text="LA" />

                <asp:ListItem Text="MA" />

                <asp:ListItem Text="MD" />

                <asp:ListItem Text="ME" />

                <asp:ListItem Text="MI" />

                <asp:ListItem Text="MN" />

                <asp:ListItem Text="MO" />

                <asp:ListItem Text="MS" />

                <asp:ListItem Text="MT" />

                <asp:ListItem Text="NC" />

                <asp:ListItem Text="ND" />

                <asp:ListItem Text="NE" />

                <asp:ListItem Text="NH" />

                <asp:ListItem Text="NJ" />

                <asp:ListItem Text="NM" />

                <asp:ListItem Text="NV" />

                <asp:ListItem Text="NY" />

                <asp:ListItem Text="OH" />

                <asp:ListItem Text="OK" />

                <asp:ListItem Text="OR" />

                <asp:ListItem Text="PA" />

                <asp:ListItem Text="RI" />

                <asp:ListItem Text="SC" />

                <asp:ListItem Text="SD" />

                <asp:ListItem Text="TN" />

                <asp:ListItem Text="TX" />

                <asp:ListItem Text="UT" />

                <asp:ListItem Text="VA" />

                <asp:ListItem Text="VT" />

                <asp:ListItem Text="WA" />

                <asp:ListItem Text="WI" />

                <asp:ListItem Text="WV" />

                <asp:ListItem Text="WY" />

            </asp:DropDownList>

        </td>

    </tr>

    <tr>

        <td style="width: 100px">

            Zip</td>

        <td style="width: 100px">

            <asp:TextBox ID="Zip" Runat="server"></asp:TextBox>

        </td>

    </tr>

    <tr>

        <td colspan=2>

            <br />

        For zip code, try "378", "379" or "980"

        </td>

    </tr>

</table>

</form>

 

 

 

And the code behind:

 

using System;

using System.Configuration;

using System.Web;

using System.Web.Caching;

using System.Web.SessionState;

using System.Web.Security;

using System.Web.Profile;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

 

public partial class Callback_aspx

{

      static readonly string _script =

            "<script language=\"javascript\">\n"                    +

            "function __onCallbackCompleted (result, context)\n"    +

            "{{\n"                                                  +

            "    var len = result.length;\n"                        +

            "    var city = result.substring (0, len - 3);\n"       +

            "    var state = result.substring (len - 2, len)\n"     +

            "    document.getElementById ('{0}').value = city;\n"   +

            "    var select = document.getElementById ('{1}');\n"   +

            "\n"                                                    +

            "    //loop through states in combo\n"                  +

            "    for (var i=0; i<select.options.length; i++) {{\n"  +

            "        if (select.options[i].text == state) {{\n"     +

            "            select.options[i].selected = true;\n"      +

            "            break;\n"                                  +

            "        }}\n"                                          +

            "    }}\n"                                              +

            "}}\n"                                                  +

            "</script>";

 

    void Page_Load (object sender, EventArgs e)

    {

        // Get a callback event reference

            string cbref = this.GetCallbackEventReference(this,

                  String.Format("document.getElementById ('{0}').value", Zip.ClientID),

                  "__onCallbackCompleted", "null", "null");

 

            // Register a block of client-side script containing __onCallbackCompleted

            this.RegisterClientScriptBlock ("MyScript", String.Format (_script, City.ClientID,

                  State.ClientID));

 

            // Fire the client callback when user has entered 3rd character into the zip text box

            Zip.Attributes.Add("onkeyup",

                  "if (this.value.length==3){" + cbref + "}; return false;");

      }

 

      // Server-side callback event handler

    string ICallbackEventHandler.RaiseCallbackEvent(string arg)

    {

        if (arg.StartsWith ("378"))

            return "Oak Ridge;TN";

        else if (arg.StartsWith ("379"))

            return "Knoxville;TN";

        else if (arg.StartsWith ("980"))

            return "Redmond;WA";

        else

            return "Unknown;TK";

    }

}

 

 

When the user enters 3 characters into the Zip textbox, the onkeyup event fires executing the Javascript returned by GetClientCallback event reference.  This results in RaiseCallbackEvent being executed on the server receiving the contents of the Zip textbox.  Whatever is returned from RaiseCallbackEvent is then available to the _script block, which runs on the client and populates the city and state automatically – saving the user the trouble of typing it in!

 

 

 

Published Tuesday, December 14, 2004 4:03 PM by christian.wade
Filed under:

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

 

TrackBack said:

December 16, 2004 3:27 PM
 

babes sex cams said:

Client Callbacks

August 9, 2007 4:24 PM

Leave a Comment

(required) 
(optional)
(required) 
Submit
Powered by Community Server (Personal Edition), by Telligent Systems