Description:
Username Availability Indication becomes
really useful part of registration form.
We have to write a code to check whether a username is
already been taken or not yet.
When the user starts typing username, keyup() method will be fired and it
will call Ajax method for each keystroke.
In the following example, I have created
a procedure to find whether the entered username is exists or not.
If the entered data not matches with the
database values, it will return indication as “Available”.
If the data exists in database values,
it will return indication as “Username already Taken”.
Steps:
1. Create a table
'register'
create table register(UName varchar(30), Pwd varchar(30))
insert into register values('john','jquery');
2. Create a strored
procedure to find the existence of user
Create procedure SP_CheckUser
(@Input_Name varchar(30))
as
begin
if exists(select 1 from register where uname =@Input_Name )
select 1
else
select 0
end
3. Call the Ajax
function for keyup event.
Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function () {
$('#txtUsrName').keyup(function () {
Var username = $('#txtUsrName').val();
$.ajax({
type: "POST",
url: "AjaxCheckUser.aspx/FindExistence",
data: "{'args':
'" +
username + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
if (response.d == 'Taken')
{
$('#lblUsrNameStatus')[0].innerHTML = "User Name Already Taken";
}
else {
$('#lblUsrNameStatus')[0].innerHTML = "User Name Available";
}
}
});
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:Label ID="lblUsrName" runat="server" Text="Select User Name:"></asp:Label>
<asp:TextBox ID="txtUsrName" runat="server"></asp:TextBox>
<asp:Label ID="lbltext" runat="server" Text="(Existing User
Name:john)"></asp:Label>
<br />
<asp:Label ID="lblUsrNameStatus" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
Code Behind:
Two things are very important while we
creating ajax call
1. Method should be declared as WebMethod
2. Method should
be static
[System.Web.Services.WebMethod]
public static string FindExistence(string args)
{
String UserStatus = string.Empty;
SqlConnection con = new SqlConnection("Data Source=----;Initial Catalog=TestDatabase;User ID=userid;Password=pwd;");
SqlCommandcmd = new SqlCommand("SP_CheckUser", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Input_Name", args);
DataSetds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
string spvalue =
(ds.Tables[0].Rows[0][0]).ToString();
if(spvalue == "0")
{
UserStatus = "Available";
}
elseif (spvalue == "1")
{
UserStatus = "Taken";
}
Return UserStatus;
}
Checking
username availability with ajax using jQuery,Ajax Username Check - Using
jQuery,jQuery Username Availability check, Check if username exists in database
with AJAX, Check Email Already Exists with Jquery Ajax, Making AJAX Calls using
jQuery
0 comments:
Post a Comment