Usability, MVC, ASP.NET

20. July 2007 01:13
by Henrik Stenbæk
6 Comments

ASP.NET AJAX username availability with suggestions

20. July 2007 01:13 by Henrik Stenbæk | 6 Comments

Based on my resent post, I have rewritten the code and turned it in to a custom control:

  • It is no longer depending on the Futures CTP.
  • If the username isn’t available it’s possible to get suggestions with available names.
  • The web service UsernameResult is now returning a class which is automatically JSON serialized by ASP.NET AJAX and passed into JavaScript as a parameter.
  • Fully integrated with the asp.net 2.0 membership.

Try out the online demo.

 

How to use the control

Register the control on the page:

<%@ Register TagPrefix="one" Namespace="onesoft.common.controls" %>

Then add the control

Remember to set ControlToTest - just like on a validator control :-). All the other properties has defaults as shown above.

Add a ScriptManager to your page (before the usernameAvailability control) and define a ServiceReferance:

<one:usernameAvailability runat="server" ID="IsAvalible" 
ControlToTest="Username" 
ForeColor="DimGray" 
NotAvailableTextColor="Red" 
AvailableTextColor="CornflowerBlue" 
StartUpTextColor="DimGray" 
AvailableText="{0} is available" 
NotAvailableText="{0} is not available" 
StartUpText="Type a username" 
SuggestionLinkText="Suggest" 
UseSuggestion="true"></one:usernameAvailability> 

The webservice has 2 functions: 

IsAvailable - checking the availability of the current name
suggestAvailable &ndash; returning suggestions for available name.

Remember to include the file UsernameService.asmx to your root and add UsernameService.cs to App_Code.

That's it - now start checking for available usernames.

Try it out with the online demo - type your preferred name, if it's available create the new user and retry with the same name - now try the suggestion link.... ok I know it isn't clever, but it is available usernames ;-)


Download the full sourcecode including the demo.

AJAXUsernameControl.zip (257,01 kb)

I welcome any comments and suggestions.

Enjoy ;-

Henrik

Comments

  1. Jesper

    Hi Henrik

    We are implementing a feature much like this.

    A small suggestion for added functionality, would be the ability to set a request delay. This could on heavy usage websites, ease the pressure on the web service.

    The delay after a key is pressed, could for instance be set to 1 sec, and have this delay reset for each key press.

    I theory; I think this would only hit the web service once, typing “Jesper” instead of six times.

    Anyways, the control still looks fantastic. :o)

    Best regards
    Jesper,

  2. Pranav

    Great work.

    I am facing one problem. I got it working yestrday but now it creates 'Sys' is undefined ERROR only with IE. in FF it works fine. Any idea?

  3. in2minds

    hello,
    I downloaded ur code and used it against my membership table and it worked. Now when i try to implement this in my project which uses master pages i get the following error

    "Microsoft JScript runtime error: 'UsernameService' is undefined"

    The code stops at this point

    "function checkName() {
    UsernameService.IsAvailable($get('ctl00_ctl00_MainContentPlaceHolder_AdminContentPlaceHolder_ctl03_CreateUserForm_CreateUserStepContainer_UserName').value, onCallBackComplete);
    }
    "

  4. in2minds

    it works for me now, my mistake
    i converted your code to vb and forgot to uncomment the line <System.Web.Script.Services.ScriptService()>

    great control....works for me

    thanks

  5. nilesh

    i am not using a Membership provider to retrive the username from the SQL Server 2005 database.
    So, i can not  use your code.
    I have to handle username or name
    through store procedure.
    Plz help me.

  6. Henrik Stenb&#230;k

    Hi nilesh

    Yes you can use the code - but you have to change the function:

    [WebMethod]
    public UsernameResult IsAvailable(string TocheckFor)

    in the file: App_Code\UsernameService.cs.  In line 27 there is a call to (Membership.GetUser(TocheckFor) == null) - thats the line you need to change to something calling your membership DAL or whatever you use to retrieve the members with. It could be like this:

    bool userNameTaken = myMemberDAL.isUsernameTaken(TocheckFor);

    return new UsernameResult (usernameTaken, TocheckFor);

    If you want to use the suggest method you also need to change the function

    [WebMethod]
    public string[] suggestAvailable(string TocheckFor)

    in the same file at line 41: if (Membership.GetUser(tmpName) == null) to something calling your code.

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading