How to check EmailId availability on clientside using WCF and Ajax ?


EmailAvailability

Hi
So many time while creating registration page we will get scenario to check EmailId availability in database. We can do this using so many ways. But if we will do using direct c# code behind approach then full post-back will happen. So it will make so slow.

We can do this task using WCF and Ajax scriptmanager control on client side without any postback.

Step1: Create Ajax Enable WCF service like this. I hope your are knowing all the basis stuff to do this task.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Data;
using System.Data.SqlClient;

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
	// To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json)
	// To create an operation that returns XML,
	//     add [WebGet(ResponseFormat=WebMessageFormat.Xml)],
	//     and include the following line in the operation body:
	//         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
    [OperationContract]
    public string CheckEmailId(string emailID)
    {
        string status = string.Empty;
        // Add your operation implementation here
        using (SqlConnection con = new SqlConnection("Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\Database.mdf;Integrated Security=True;User Instance=True"))
        {
            using (SqlCommand cmd = new SqlCommand("Select EmailId from tblEmail where EmailId=@EmailId", con))
            {
                cmd.Parameters.AddWithValue("@EmailId", emailID);
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                if (dt.Rows.Count > 0)
                {
                    status = "Available";
                }
                else
                {
                    status = "Not Available";
                }
                return status;

            }
        }
    }

	
}


Step 2: Consume the Service using ScriptManager in aspx page like this

Step 3: Call the WCF method using Javascript like this

function EmailIdCheck() {
Service.CheckEmailId(document.getElementById(‘txtEmailId’).value, onSuccess, null, null);

}

function onSuccess(result) {

// $get(“lblmsg”).innerHTML = result;
if(result == ‘Available’)
{
// Img1.src = tick.png;
var imgDisplay = $get(“imgDisplay”);
imgDisplay.src = “tick.png”;
imgDisplay.style.display = “block”;
$get(“lblmsg”).innerHTML = “Sorry this EmailId has been taken.”;
$get(“lblmsg”).style.color = “green”;
}
else {
// Img1.src = unavailable.png;
var imgDisplay = $get(“imgDisplay”);
imgDisplay.src = “unavailable.png”;
imgDisplay.style.display = “block”;
$get(“lblmsg”).innerHTML = “Not Available”;
$get(“lblmsg”).style.color = “red”;
}

}

Step 4: On aspx Textbox onblur event call the javascript method like this

Now you can validate the EmailId on client side using this few steps

Here is the complete .aspx code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckEmailId.aspx.cs" Inherits="CheckEmailId" %>

<!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></title>

    <script language="javascript" type="text/javascript">
        function EmailIdCheck() {
            Service.CheckEmailId(document.getElementById('txtEmailId').value, onSuccess, null, null);
           
        }

        function onSuccess(result) {

            // $get("lblmsg").innerHTML = result;
            if(result == 'Available')
            {
                // Img1.src = tick.png; 
                var imgDisplay = $get("imgDisplay");
                imgDisplay.src = "tick.png";
                imgDisplay.style.display = "block";
                $get("lblmsg").innerHTML = "Sorry this EmailId has been taken.";
                $get("lblmsg").style.color = "green";
            }
            else {
                //  Img1.src = unavailable.png;
                var imgDisplay = $get("imgDisplay");
                imgDisplay.src = "unavailable.png";
                imgDisplay.style.display = "block";
                $get("lblmsg").innerHTML = "Not Available";
                $get("lblmsg").style.color = "red";
            }

        }

</script>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            width: 276px;
        }
        .style3
        {
            width: 102px;
        }
        .style4
        {
            width: 144px;
        }
        .style5
        {
            width: 19px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <br />
        <table class="style1">
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    Email Id:&nbsp;&nbsp;</td>
                <td class="style4">
                    <asp:TextBox ID="txtEmailId" onblur="EmailIdCheck();"  runat="server" />
                </td>
                <td class="style5">
                     <img id = "imgDisplay" alt="" src="" style = "display:none"/></td>
                <td>
                     <asp:Label ID="lblmsg" runat="server"/> </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    &nbsp;</td>
                <td class="style4">
                    &nbsp;</td>
                <td class="style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style3">
                    EmpName:</td>
                <td class="style4">
                    <asp:TextBox ID="txtName" runat="server" />


     
       

                </td>
                <td class="style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
        <asp:ServiceReference Path="~/Service.svc" />
        </Services>
        </asp:ScriptManager>


                </td>
                <td class="style3">
                    &nbsp;</td>
                <td class="style4">
                    &nbsp;</td>
                <td class="style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>


.

Advertisements
Posted in Ajax, WCF. 1 Comment »

One Response to “How to check EmailId availability on clientside using WCF and Ajax ?”

  1. SutoCom Says:

    Reblogged this on Sutoprise Avenue, A SutoCom Source.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: