While registering a new user on your site, the idea to check the availability of user name is of great use.
It saves the time of registering user and makes a great value for users.
You need to do following things in order to achieve that-
1) Include the below give javascript file in your project
2) Identify the event on which the availability is to be checked (better if you give a seperate button or simply a href for it), in my code i've used a href to check the availability.
3) Areas and messages to be displayed (you can customize the messages to be displayed)
4) On code behind define a [WebMethod] for checking the availability
JScript File
var usernameCheckerTimer;
var isavailable=false;
function usernameChecker(username)
{
clearTimeout(usernameCheckerTimer);
if (username.length == 0){
{
//You can customize the mesage for blank user name
$get("spanAvailability").innerHTML = "<span style='color: Red;'>Can't be blank";
document.forms[0].txtLoginId.focus();
}
else
{
//You can customize the mesage for Checking..
$get("spanAvailability").innerHTML = "<span style='color: #000;'>Checking...";
usernameCheckerTimer = setTimeout("checkUsernameUsage('" + username + "');", 750);
}
}
function checkUsernameUsage(username)
{
// initiate the ajax pagemethod call
// upon completion, the OnSucceded callback will be executed
PageMethods.IsUserAvailable(username, OnSucceeded);
}
// Callback function invoked on successful completion of the page method.
function OnSucceeded(result, userContext, methodName)
{
$get("spanAvailability").innerHTML = "";
if (methodName == "IsUserAvailable")
{
if (result == true)
{
//You can customize the mesage for Available
$get("spanAvailability").innerHTML = "<span style='color: DarkGreen;'>Available";
isavailable=true;
}
else
{
//You can customize the mesage for NotAvailable
$get("spanAvailability").innerHTML = "<span style='color: Red;'>Unavailable";
document.forms[0].txtLoginId.focus();
isavailable=false;
}
}
}
The link for checking the availability
<a href="#" onclick="usernameChecker(document.getElementById('txtLoginId').value);">Check Availability?/a>
The webmethod for your code behind page
[WebMethod]
public static bool IsUserAvailable(string username)
{
MembershipUser usr = Membership.GetUser(username);
return (usr == null);
}
Don't forgrt to include
using System.Web.Services;
Cheers
2 comments:
Good approach, However I prefer not using java script and would rather use a simple database call using Ajax update panel to check and show availability of the username.
Post a Comment