Posted by ahsan in Few days ago I had a task that on user registration I had to check the email address of the user. When the user enters the email address the application should check the database that if the email exists in the database user will not be able to add it again and the whole task should be done in a way that user enters the email in a textbox and then starts filling the other form and system in the meanwhile automatically checks the existence of email in the database. I used Jquery for this task, the selection of jquery can be debatable but its not the issue at hand. I made a web service which communicates with my database. In the web service I have a method named CheckEmail which checks the existence of email in the particular table. The web service looks like this:
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Imports System.Data.OleDb
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Service
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function CheckEmail(ByVal email As String) As String
Dim connectionString As String = ConfigurationManager.ConnectionStrings("ConnectionStringManual").ToString()
Dim connection As OleDbConnection = New OleDbConnection(connectionString)
connection.Open()
Dim sqlString As String = "Select count(*) from Customers where CustomerEmail =?"
Dim command As OleDbCommand = New OleDbCommand(sqlString, connection)
command.Parameters.AddWithValue("CustomerEmail", email)
Return command.ExecuteScalar()
End Function
End Class
This web service returns an integer based on the count of rows after running the query.
I have an aspx page which looks like the code below:
<body> <form id="form1" runat="server"> <div> <table> <tr> <td> Email: </td> <td> <asp:TextBox ID="txtEmail" runat="server" ></asp:TextBox><span id="spErrorMessage"></span><br /> </td> </tr> <tr> <td> Password: </td> <td> <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox><br /> </td> </tr> </table> </div> </form> </body>
And finally the last but the most important section of Jquery in the head section of the page.
<head runat="server">
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$("#<%= txtEmail.ClientID %>").change(DuplicateEmailCheck);
}
);
function DuplicateEmailCheck()
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{email: '" + $('#<%= txtEmail.ClientID %>').val() + "'}",
dataType: "json",
url: "http://localhost:1561/TestWebService/Service.asmx/CheckEmail",
success: function(response)
{
$("#spErrorMessage").empty();
if (response.d != "0")
{
$("#spErrorMessage").html('Email address already exists.');
}
}
});
}
</script>
The first script section contains the reference to the latest jquery library till date. You can download it from internet very easily. The second script section does the real magic but its very easy. The first function just hooks the txtEmail textbox with the DuplicateEmailCheck function. The DuplicateEmailCheck function makes an ajax call to the web service which we created above. Now based on the result the span belonging to the textbox will be populated if email already exists.
Thats all folks, don’t forget to leave feedback/suggestions.
Cheers.
Nice!
But use of
$("#< %= txtEmail.ClientID %>")can cause problems when using MasterPages. Try getting object on bases of class or some other attribute. Secondly, you can eliminate its usage inDuplicateEmailCheckby using EventObject of jquery.Thanks irfan for your suggestions, they are definitely good points to note down.