In this article I will explain with an example, how to check Email address availability i.e. check whether Email address exists in database or not using jQuery AJAX in ASP.Net with C# and VB.Net.
This article will illustrate how to check Email address availability in database on Registration Form by making AJAX call to database using jQuery AJAX in ASP.Net with C# and VB.Net.
Database
I have made use of the following table Users with the schema as follows.
I have already inserted few records in the table.
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The following HTML Markup consists of an HTML TextBox, an HTML Button and an HTML SPAN element.
The HTML TextBox has been assigned an onkeyup event handler which triggers the ClearMessage JavaScript function.
The HTML Button has been assigned an onclick event handler which triggers the CheckAvailability JavaScript function.
Email:
<input id="txtEmail" type="text" onkeyup="ClearMessage()" />
<input id="btnCheck" type="button" value="Show Availability" onclick="CheckAvailability()" />
<br />
<span id="message"></span>
Stored Procedure
The following Stored Procedure will be used to check whether the supplied Email address exists in the database or not.
It will return TRUE if the Email address does not exists in database i.e. it is available and it will return FALSE if the Email address exists in the database i.e. it is already in use.
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[CheckEmailAvailability]
@Email NVARCHAR(50)
AS
BEGIN
SET NOCOUNT ON;
IF NOT EXISTS(SELECT UserName FROM Users
WHERE Email = @Email)
BEGIN
SELECT 'TRUE'
END
ELSE
BEGIN
SELECT 'FALSE'
END
END
GO
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
The Web Method
The following Web Method will be called from the Client side using jQuery AJAX function.
The Web Method calls the CheckEmailAvailability Stored Procedure and returns the value returned from the Stored Procedure back to the Client.
C#
[System.Web.Services.WebMethod]
public static bool CheckEmail(string email)
{
bool status = false;
string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection conn = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("CheckEmailAvailability", conn))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Email", email.Trim());
conn.Open();
status = Convert.ToBoolean(cmd.ExecuteScalar());
conn.Close();
}
}
return status;
}
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function CheckEmail(ByVal email As String) As Boolean
Dim status As Boolean = False
Dim constr As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
Using conn As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("CheckEmailAvailability", conn)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@Email", email.Trim())
conn.Open()
status = Convert.ToBoolean(cmd.ExecuteScalar())
conn.Close()
End Using
End Using
Return status
End Function
The Client Side PageMethod implementation
The CheckAvailability JavaScript function gets called when the Button is clicked, it first fetches the Email address to be checked for availability from the TextBox and then calls the WebMethod using the jQuery AJAX function.
When the response is received, based on whether the Email address is available or in use, appropriate message is displayed in the HTML SPAN element.
The ClearMessage JavaScript function gets called when user types in the TextBox, it simply clears the message displayed in the HTML SPAN element.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function CheckAvailability() {
var email = $("#txtEmail").val();
$.ajax({
type: "POST",
url: "Default.aspx/CheckEmail",
data: '{email: "' + email + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var message = $("#message");
if (response.d) {
//Email available.
message.css("color", "green");
message.html("Email is available");
}
else {
//Email not available.
message.css("color", "red");
message.html("Email is NOT available");
}
}
});
};
function ClearMessage() {
$("#message").html("");
};
</script>
Screenshot
Demo
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Downloads