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">
</td>
<td class="style3">
Email Id: </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">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td class="style5">
</td>
<td>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
EmpName:</td>
<td class="style4">
<asp:TextBox ID="txtName" runat="server" />
</td>
<td class="style5">
</td>
<td>
</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">
</td>
<td class="style4">
</td>
<td class="style5">
</td>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
.
Chandradev's Blog 
Reblogged this on Sutoprise Avenue, A SutoCom Source.