I have improved this code and turned it into a custom control – please se this post

 

Inspired by the RememberTheMilk signup usability I decided to write an ASP.NET AJAX function that works the same way. I also wanted my function to fire on every keystroke so that the user will get an instant response about whether the username is available.

After reading about the overhead that UpdatePanel produce on the server load I decided to try to write the AJAX username availability check without using the UpdatePanel.

For this example, I'm going to use a standard ASP.NET web form along with some of the functionalities from the Microsoft ASP.NET Futures (May 2007) Release.

I create one simple Web Form containing only a text box and a label

Username: 
<asp:TextBox ID="Username" runat="server" Width="93px">
</asp:TextBox> 
<asp:Label ID="lblAvailability" runat="server" Text="Type a username" 
ForeColor="DimGray">
</asp:Label> 

For the username availability check I create a webservice.

[ScriptService] public class UsernameService : System.Web.Services.WebService { .. } 

Remember to prefix the Service with the [ScriptService] attribute otherwise it will not work when called from JavaScript.

I add one function to the WebService called IsAvailable. The purpose for this function is to check for the availability of the current typed username. Inspired by Dave Ward I decided to check availability through a call to Membership.GetUser().

[WebMethod] public string[] IsAvailable(string TocheckFor) 
{ 
string[] myString = new string[2]; 
if (Membership.GetUser(TocheckFor) != null) 
{ 
myString[0] = string.Format("{0} is taken", TocheckFor); 
myString[1] = "false"; 
} 
else 
{ 
myString[0] = string.Format("{0} is available", TocheckFor); 
myString[1] = "true"; 
} 
return myString; 
} 

The IsAvailable function return a string array with the status text and a 'true'/'false' string depending on if the username is available or not.

I add a ScriptManager to the Web Form that will take care of the communication with the WebService.

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
<Services> 
<asp:ServiceReference Path="UsernameService.asmx" /> 
</Services> 
<Scripts> 
<asp:ScriptReference Name="PreviewScript.js" 
Assembly="Microsoft.Web.Preview" /> 
</Scripts> 
</asp:ScriptManager> 

In the script manager I configure the webService to be used with the client side javaScript. So I write a little bid of clientside javaScript

<script type="text/javascript" > 
function checkName() {    var tb = new Sys.Preview.UI.TextBox($get('Username')); 
var name = tb.get_text(); 
if(name.lenght != 0) 
UsernameService.IsAvailable(name, onIsAvailableCompleted) 
} 
function onIsAvailableCompleted(result) 
{ 
if(result != null) 
{ 
var lbl = new Sys.Preview.UI.Label($get('lblAvailability')); 
lbl.set_text(result[0]); 
if(result[1]=='true') 
document.getElementById('lblAvailability').style.color="green"; 
else 
document.getElementById('lblAvailability').style.color="red"; 
} 
} 
</script> 

The first function checkName calls the WebService if there is any text in Username, setting the second function (onIsAvailableCompleted) as the call back function to receive the answer from the webservice.

Finally in code behind I add the clienside function checkName to the Username textbox's onKeyUp

Username.Attributes.Add("onkeyup", "checkName()");

Thats all. Now the username is checked on every keystroke and with a minimum of server traffic.

Download the code: UsernameFutures.zip (708,33 kb)