This article will show you how you can validate duplicate
email present in database without refreshing the page and by using ajax in
asp.net , c# and jQuery.
Some of my previous articles are as follows: Ajax
Login Form Validation Without Page Refresh Using jQuery In Asp.Net and C#.Net,
Validate
DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net, Single
RadioButton Selection in GridView In Asp.Net Using C#.Net.
So for this article first we will create a new asp.net
application and in this application we will add and ajax folder. This folder
will contain some files which will help us to perform ajax functionality.
Now please check the sql table
After this we will add and asp.net page and ad the below
code into the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="WebApplication1.WebForm5"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Ajax
Duplicate UserId Validation in Asp.Net Without Page Refresh Using C#.Net
</title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript">
function
ValidateUser() {
var
userid = $("#<%=txtuserid.ClientID %>").attr('value');
$("#btnValidate").attr({
'value': 'Please
wait...' });
$.ajax({
url: "AjaxPage/AjaxUserIdValidation.aspx?userid="
+ userid,
type: "POST",
cache: false,
success: function (html) {
if
(html == "1") {
alert("Duplicate user Id found");
} else {
alert("No duplicate id");
}
$("#btnValidate").attr({ 'value':
'Submit' });
return
false;
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="User Id :"></asp:Label>
<asp:TextBox ID="txtuserid" runat="server"></asp:TextBox>
<input id="btnValidate" type="button" value="Validate User Id" onclick="javascript:return
ValidateUser();" />
</div>
</form>
</body>
</html>
|
In above code please check the
jquery code.
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript">
function
ValidateUser() {
var
userid = $("#<%=txtuserid.ClientID %>").attr('value');
$("#btnValidate").attr({
'value': 'Please
wait...' });
$.ajax({
url: "AjaxPage/AjaxUserIdValidation.aspx?userid="
+ userid,
type: "POST",
cache: false,
success: function (html) {
if
(html == "1") {
alert("Duplicate user Id found");
} else {
alert("No duplicate id");
}
$("#btnValidate").attr({ 'value':
'Submit' });
return
false;
}
});
}
</script>
|
In this code I have called an url
with user id as value. The url page is the ajax page. In this if we get 1 so
user id exists otherwise it does not exists.
Now we will check ajax page code. In
ajax page remove all the code html from the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxUserIdValidation.aspx.cs" Inherits="WebApplication1.AjaxPage.AjaxLoginForm"
%>
|
So your page will look as shown
above. Now add the below code into the page load.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
namespace WebApplication1.AjaxPage
{
public partial class AjaxLoginForm : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
SqlConnection
con = new SqlConnection(System.Configuration.ConfigurationManager.
ConnectionStrings["con"].ToString());
try
{
DataTable
objdt = new DataTable();
string
query = "select * from UserLogin where
UserId='" + Request.QueryString["userid"]
+ "';";
SqlDataAdapter
da = new SqlDataAdapter(query,
con);
con.Open();
da.Fill(objdt);
con.Close();
if
(objdt.Rows.Count > 0)
{
Response.Write("1");
}
else
{
Response.Write("0");
}
}
catch
{
con.Close();
}
}
}
}
|
In above code I have get the user
id and validate the user id from db. Here is the connection string.
<connectionStrings>
<add name="con" connectionString="Data Source=DELL-PC;Initial Catalog=Demo;Integrated
Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
|
Now we have done run the
application to check the output.
About the Author
nice its good but ,it has to validated automatically once i enter the text without on click submit button, i think ,i want to use ONTEXTCHANGED tag with this, how can i do this
ReplyDeleteHi you can use onblur event of textbox for validating automatically.
DeleteI will suggest dont use ontextchange event bcz it will hit db every time you type a text.
But in case of onblur event fire ones you movecto next textbox.