When Written: Dec 2009
Whilst still on the subject of coding, I was building a create user account page for a web site in ASP .NET using the .NET membership services. These services handle a lot of the boring stuff to do with creating user accounts, password retrieval, logging in of users, their roles, and the areas that they have access to. It really makes all the basic stuff easy and it is very extensible.
There are also controls available that handle the login box or the create user account boxes. It was while programming one of these that I hit a small problem in usability. When the web control asks the user to create an account the user chooses a unique user name followed by a password, their email address and secret question and answer.
This is all fine except when you consider how the user is going to decide on their unique user name. Obviously they could enter all the details hit the submit button and the web page would do a call to the server , check against the database if the name was taken and return a new version of the web page with any necessary messages about duplicate names.
This is all standard stuff, but in this day and age it really is not the sort of user experience that we are beginning to expect from a web site. I thought it would be much better if the web page after the user name was entered , to do an asynchronous postback to the server, do the lookup against the database and then return a message to the page if there was a duplicate user name and to do this in the background whist the user was still entering the other details on the form and without any horrible page redraw. This technique of creating event handlers and calling webmethods via an asynchronous postback is what a lot of AJAX is about so it is worth getting the hang of it. To do this you need a bit of JavaScript and some server side code, the key to making this work is a feature of ASP .NET called ‘WebMethod’ .
The first stage is to write in JavaScript an event handler that fires when the text in a textbox on your create account form changes, that is when the user types a user name and then moves to another text box. This is simply done in JavaScript with:
$addHandler(‘TextUserName’, 'blur', ChkUserExists);
This creates an event that will run the procedure ‘ChkUserExists’ when the ‘blur’ event occurs on the textbox called ‘TextUserName’ i.e. when the control looses focus as the user tabs or clicks to another input box. When this event occurs the handler with run the code in the function:
function ChkUserExists () {
var userName = TextUserName.value;
PageMethods. WMChkUserExists(userName, ChkUserNameExistsCallback);
}
This function takes the value from the textbox which in this case is the user name that we are going to test for duplicates for, and passes it to our ASP .NET webmethod ‘WMChkUserExists’ . The code for this sits on the code behind page of our aspx web page:
public partial class SignUp : System.Web.UI.Page
{
[WebMethod]
public static bool WMChkUserExists (string testuserName)
{
return Membership.GetUser(testuserName) != null;
}
}
This code will then do an asynchronous call back to the web server and then a lookup on the membership object which in this case is a series of tables in a SQL Server database. If the result is not null , in other words there is a user already registered with this name in the database then it calls the JavaScript function back on the web page:
var errorMessage = document.createElement('span');
errorMessage.style.visibility = 'hidden';
errorMessage.style.color = 'red';
errorMessage.innerText = 'This user name is already taken';
function ChkUserNameExistsCallback(result) {
userNameRequiredMessage.insertBefore(errorMessage);
errorMessage.style.visibility = result ? 'visible' : 'hidden';
}
This is fairly obvious what it does, it displays an error message on the web page and so the user will go back and try a different name. Should the user ignore this and fill in the rest of the form and hit the submit button then the page will postback to the server normally and an error message will be shown against which text boxes are incorrectly filled in the normal way without having to write any code, such is the joy of using membership services.
Article by: Mark Newton
Published in: Mark Newton