It’s a common problem: you have a registration form, but you want to prevent user names or other values from being used more than once. You need a user-friendly way to prevent duplicate values being submitted. This is where the simplicity of jQuery excels.
User names and passwords are normally stored within a database. Commonly, developers wait until the form has been submitted before they perform any duplicate checking. This means that the user has to wait for a postback to complete before being informed that the user name they chose is already in use, and that they need to choose another one. Ajax tidies this up by allowing asynchronous querying of databases, so that the checking can be done behind the scenes while the user is still completing the registration form. I choose jQuery for my AJAX instead of ASP.NET AJAX because it is so much simpler to use in my opinion.
This example shows a very simple registration form:
A web service will be used to house the method that checks the database for possible duplicates:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data.SqlClient;
///
/// Summary description for UserService
///
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[ScriptService]
public class UserService : WebService {
public UserService () {
}
[WebMethod]
public int CheckUser(string username)
{
string connect = @”Server=SERVER;Database=Database;Trusted_Connection=True;”;
string query = “SELECT COUNT(*) FROM Users WHERE UserName = @UserName”;
using(SqlConnection conn = new SqlConnection(connect))
{
using(SqlCommand cmd = new SqlCommand(query, conn))
{
cmd.Parameters.AddWithValue(“UserName”, username);
conn.Open();
return (int)cmd.ExecuteScalar();
}
}
}
}
There’s nothing clever about this code. It is trimmed down to just show the working parts, and ignores error checking, for example – although it makes use of parameters to prevent SQL Injection. IF you are wondering why I don’t close the connection after I’m done, that’s what the using statement does for me behind the scenes. Any disposable object (one that implements IDisposable) can be instantiated within a using block which then takes care of Close() and Dispose() at the end of the block. One (Web) method – CheckUser() – accepts a string as an argument and then returns the number of rows in the database where that name is found. The [ScriptService] attribute is uncommented, so that the service is available to AJAX calls (not just ASP.NET AJAX, incidentally).
Now we’ll look at the Javascript that uses jQuery to effect the call:
$(function() {
$(“#UserName”).change(checkUser);
});
function checkUser() {
$.ajax({
type: “POST”,
url: “UserService.asmx/CheckUser”,
data: “{username: ‘” + $(‘#UserName’).val() + “‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function(response) {
$(“#duplicate”).empty();
if (response.d != “0”) {
$(“#duplicate”).html(‘ That user name has already been taken’);
}
}
});
}
The first tag brings in the jQuery library from Google’s public code repository. Then an event handler is added to the element with the ID of UserName, which is the TextBox waiting for the user to put their chosen User Name in. The handler is wired up to the TextBox’s onchange event, and calls the checkUser() function. Then the checkUser() function is defined in code.
When the user has added some text to the TextBox and then moves their cursor away, the “change” event is fired, and an AJAX call is made to the web service. If the response is not 0, then the web method has found at least one row that matches the user name that the user is attempting to submit. The with the ID of “duplicate” is emptied of any messages resulting from previous attempts, and the message displayed to the user.
I’ve used ASP.NET controls for the inputs in the registration form, but jQuery is not an ASP.NET component (although it has been embraced by the ASP.NET team). So this approach will work with any server-side technology. One thing to note, though – if you place the registration form within a container, such as a ContentPlaceHolder in a Master Page, you will need to change the jQuery code that references its controls to counter the effects of INamingContainer (which is the bit that adds stuff to the ID of the control, such as ctl00_ContentPlaceHolder1_ControlID). The change needed is to use the control’s ClientID property, so the first 3 lines of jQuery code will look like this:
$(function() {
$(“#”).change(checkUser);
});
And of course, the ClientID will need to be used where controls are referenced in the the checkUser() function too.
—————————————————————————————————————-
— Second Method —
1-Create a new project , if you are using VS 2005 you have to create ASP.NET Ajax Enabled Web site.
2-Create your own Database which contain user table that have User_Name field. for Testing I’ve added SQL Server Database that come with Dot Net 2008:
SqlServerDataBase
Then I’ve created tblUsers:
definition
This table and this structure just for our example, you can use your own table to implement this approach.
3-Add new Item to your project or website, Choose Web Service file, lets say WebService.cs .In this Web Service file import System.Data.SqlClient Namespace, Then Add your web method that contain string parameter which received the Username parameter from the Script , Finally don’t forget to qualified the Web Service Class with the ScriptServiceAttribute attribute ([System.Web.Script.Services.ScriptService])
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
[WebMethod]
public int CheckDuplicate(string User_Name)
{
string strConn = @”Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\TestDB.mdf;Integrated Security=True;User Instance=True”;
string strQuery = “SELECT COUNT(*) FROM tblUsers WHERE User_Name = @User_Name”;
SqlConnection con = new SqlConnection(strConn);
SqlCommand cmd = new SqlCommand(strQuery, con);
cmd.Parameters.Add(“User_Name”, User_Name);
con.Open();
int RetVal= (int)cmd.ExecuteScalar();
con.Close();
return RetVal;
}
}
Our Web Method here is CheckDuplicate Which accept User_Name String as a parameter and return number of the rows , if the name will found in the database this method will return 1 else it will return 0. I’ve applied [WebMethod] Attribute to our method CheckDuplicate, And applied the ScriptService attribute to a Web Service class named WebService.
4-Add this simple Registration form :
onblur event is added to the Textbox txtUserName, This event Fires when the Textbox loses the input focus, That mean after the user get focus out from the Textbox CallWebMethod function will be fired. CallWebMethod will be implemented in step 6.
5-Add ScriptManager Control to your aspx file then reference the Web service by adding an asp:ServiceReference child element to the ScriptManager control and setting its path attribute to point to the Web service, That generate a JavaScript proxy class for calling the specified Web service from client script.
6-Define the JavaScript code to call the Web Service :
// This function calls the Web service method
// passing simple type parameters and the
// callback function
function CallWebMethod() {
var User_Name = document.getElementById(”).value;
WebService.CheckDuplicate(User_Name, OnSucceeded, OnError);
}
// This is the callback function invoked if the Web service
// succeeded
function OnSucceeded(result) {
var rsltElement = document.getElementById(“lblDuplicate”);
if (result == 1)
rsltElement.innerHTML = “This User Name is exist”;
else
rsltElement.innerHTML = “”;
}
function OnError(error) {
// Display the error.
alert(“Service Error: ” + error.get_message());
}
This call references the WebService Class and CheckDuplicate Web Method defined in the service. It passes a User_Name value obtained from a textbox as well as a callback function named OnSucceeded that should be invoked when the asynchronous Web Service call returns.
If the Web Service in different Namespace you can refer it before the class name this Main formula may help you :
NameSpaceName.ClassName.WebMethdName(Parameters , Success callback function, Error callback function);
Parameters: you can pass one or many parameters.
Success callback function :handles returned data from the service .
