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 (6) -

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,

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?

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);
}
"

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

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.

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