Creating a "Word Wheel" with AJAX

One of the most-requested features in ASP.NET applications is a "word wheel" in which the user begins to type in a name (or other string) and the control shows all the names from our data source that begin with the letters entered; as the user types more, the provided list is narrowed.

This is painful to do with traditional ASP.NET, as you must make a round trip for each letter that's entered. Clearly, this is a place where AJAX can make all the difference. To provide some data to illustrate how blazingly fast this is, you'll borrow the first 65,535 names from the publicly available U.S. census list and put them in a SQL database table.

To begin, create a new Web Site called LastNameLookup.

Tip

For now, you are not creating AJAX-enabled Web Sites, nor are you using ScriptManagers. You will do both shortly.

This Web Site uses two forms: Default.aspx and an AJAX Web Form that you will create called LastNameLookup.aspx. Default.aspx is presented in Example 5-1.

Example 5-1. Default.aspx

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

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

<head id="Head1" runat="server">
   <title>Word Wheel</title> <script language="javascript" type="text/javascript"> var xmlHttp function showHint(str) { if (str.length==0) { document.getElementById("TextBoxHint").innerHTML="" return } xmlHttp=GetXmlHttpObject() ...

Get Programming .NET 3.5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.