How to create Ajax cascading dropdown using Ajax enabled WCF ?


Cascading DDL

Hi

While working on web based project, we will get scenario to create cascading drop-down. But if there are more data and you are binding the drop-down using direct approach then performance will be very slow.

In Ajax toolkit there are Cascading drop-down control, using this control we can create very responsive and interactive cascading drop-down. It will give good performance.

Note: I suppose that you are knowing how to use ajax enable WCF in asp.net.

Here is very simple steps to do this task

Steps 1: Drag the Cascading Ajax Control from ajax toolkit and drop in your designer and configure the control like this


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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <fieldset>
    <legend><b>Ajax Cascading Dropdown Demo</b></legend>
   <br />
    <table>
        <tr>
            <td style="width: 80px">
                Country:
            </td>
            <td>
                <asp:DropDownList ID="ddlCountries" runat="server" Width="150">
                </asp:DropDownList>
                <asp:CascadingDropDown ID="cdlCountries" TargetControlID="ddlCountries" PromptText="Select Country"
                    PromptValue="" ServicePath="Service.svc" ServiceMethod="GetCountries" runat="server"
                    Category="CountryId" LoadingText="Loading..." />
            </td>
        </tr>
        <tr>
            <td>
                State:
            </td>
            <td>
                <asp:DropDownList ID="ddlStates" runat="server" Width="150">
                </asp:DropDownList>
                <asp:CascadingDropDown ID="cdlStates" TargetControlID="ddlStates" PromptText="Select State"
                    PromptValue="" ServicePath="Service.svc" ServiceMethod="GetStates" runat="server"
                    Category="StateId" ParentControlID="ddlCountries" LoadingText="Loading..." />
            </td>
        </tr>
        <tr>
            <td>
                City:
            </td>
            <td>
                <asp:DropDownList ID="ddlCities" runat="server" Width="150">
                </asp:DropDownList>
                <asp:CascadingDropDown ID="cdlCities" TargetControlID="ddlCities" PromptText="Select City"
                    PromptValue="" ServicePath="Service.svc" ServiceMethod="GetCities" runat="server"
                    Category="CityId" ParentControlID="ddlStates" LoadingText="Loading..." />
            </td>
        </tr>
    </table>
     </fieldset>
    </form>
</body>
</html>


Step2 : Write the Ajax Enabled WCF code to fetch data from database on basis of categoryId


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 AjaxControlToolkit;
using System.Configuration;
using System.Data.SqlClient;

[ServiceContract(Namespace = "MyTestService")]
[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 List<CascadingDropDownNameValue> GetCountries(string knownCategoryValues)
    {
        string query = "SELECT CountryName, CountryId FROM Countries";
        List<CascadingDropDownNameValue> countries = GetData(query);
        return countries;
    }

    [OperationContract]
    public List<CascadingDropDownNameValue> GetStates(string knownCategoryValues)
    {
        // this will find the countryId
        string country = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["CountryId"];
        string query = string.Format("SELECT StateName, StateId FROM States WHERE CountryId = {0}", country);
        List<CascadingDropDownNameValue> states = GetData(query);
        return states;
    }

    [OperationContract]
    public List<CascadingDropDownNameValue> GetCities(string knownCategoryValues)
    {
        // this will find the StateId
        string state = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["StateId"];
        string query = string.Format("SELECT CityName, CityId FROM Cities WHERE StateId = {0}", state);
        List<CascadingDropDownNameValue> cities = GetData(query);
        return cities;
    }

    private List<CascadingDropDownNameValue> GetData(string query)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        SqlCommand cmd = new SqlCommand(query);
        List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
        using (SqlConnection con = new SqlConnection(conString))
        {
            con.Open();
            cmd.Connection = con;
            using (SqlDataReader reader = cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    values.Add(new CascadingDropDownNameValue
                    {
                        name = reader[0].ToString(),
                        value = reader[1].ToString()
                    });
                }
                reader.Close();
                con.Close();
                return values;
            }
        }
    }
	
}


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>


.

Posted in Ajax, WCF. 1 Comment »

How to do method overloading in WCF ?



Hi
If you are doing method overloading in WCF then we can not do directly like C#. In WSDL based world,all the operation must have unique name. So we can do this task like this

Step1:Create one WCF application and write the code in “Iservice1” file like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace Overloading_WCF
{

[ServiceContract]
public interface IService1
{
[OperationContract(Name=”AddNo1″)]
int AddNo(int val, int val1);

[OperationContract(Name=”AddNo2″)]
int AddNo(int val, int val1, int val2);
}
}

Step 2: Implement the interface in “Service.svc”like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace Overloading_WCF
{

public class Service1 : IService1
{

public int AddNo(int val, int val1)
{
return (val + val1);
}

public int AddNo(int val, int val1, int val2)
{
return (val + val1 + val2);
}

}
}

Step3: Compile the service and consume in application

Step4: Write the code in codebehind file like this

protected void btnSum_Click(object sender, EventArgs e)
{
ServiceReference1.Service1Client objProxy=new ServiceReference1.Service1Client();
if (txtNo1.Text != string.Empty && txtNo2.Text != string.Empty)
{
lblSum.Text = objProxy.AddNo1(int.Parse(txtNo1.Text), int.Parse(txtNo2.Text)).ToString();
}
if (txtNo1.Text != string.Empty && txtNo2.Text != string.Empty && txtNo3.Text != string.Empty)
{
lblSum.Text = objProxy.AddNo2(int.Parse(txtNo1.Text), int.Parse(txtNo2.Text),int.Parse(txtNo3.Text)).ToString();
}

}

Some important question on WCF


What is the service?
Services are a group of methods that share a common set of requirements and functional goals. They are called by other parts that need to execute its logic, depending on the outcome (such as data, results of calculations, and so on).

Service is the combination of Channel, Protocol, Message, Policy, Schema and Contract

What is SOA ?
SOA is service oriented architecture. It is style of programming, an architectural approach in software development, where the application is organized in functional units of code with a given behavior called services.

SOA is a way to build distributed systems where autonomous logic is called using loosely coupled messages via a well defined interface.

Four Tenets of SOA
1. Boundaries are explicit

Boundaries are explicit means client only needs to be aware of the existence of function in the service that can only be executed via the contract.

2. Services are autonomous

Services are autonomous means
• Services should not dependent on the behavior of the other service.
• Services should be deployed and versioning independently.
• Service shouldn’t be coupled to each other as classes are coupled.

3.Services share schema and contract, not class

Schema is the definition of service operation and describes the signature of function. I.e. the name of function, type of parameters, and the type of return values. Service should not share the code of class to other parties.

4.Service compatibility is based on policy

A policy is used to negotiate elements in communication, such as message format and security requirement

Message Exchange pattern in WCF ?

These are the message pattern in WCF
1. Request-Response
The most commonly used pattern. The client request message from service by sending a request message and expect the response message from service. This means the service has to be reachable and
the client waits for the answer for a defined time.

2. One way

Messages are sent from client to server in one direction. The client sends a message but doesn’t expect an answer back.

3. Duplex Messaging

In the duplex pattern, client and server exchange messages without a predefined pattern. The client sends an initial request to the service waiting for a response but allows the service that sends the response to call back to the client to ask for more information. The service can call back to the client dynamically and possibly multiple times before sending the response to the initial request.

4. Streaming
In the streaming pattern the client initiates a request to get a very large set of data. The service chunks up the data in smaller pieces and sends them to the client one by one. The data is so big that the service has to read this data from a file system or database in chunks. The data chunks are sent to the client in an ordered way as the receiver wants to consume them in that same ordered way. This would be the case in streaming video.

5. Pub-Sub

In the pub – sub pattern the publisher is typically unaware who the subscribers are and what they are doing with the received data. The publisher doesn’t even care whether there are subscribers.
The publisher just cares about sending data out of its system.

Posted in WCF. 5 Comments »

How to display data on textbox on basis of dropdown selection using Ajax and WCF?



Hi
Recently in one of my project, there was requirement to populate the dropdown from database and on basis of dropdown selection we have to display data on textbox without post back.
There are so many methods to do this task, but one of the easiest methods to solve using
“Ajax enabled WCF”, JavaScript and Ajax ScriptManger Control.
Step1: Create one “Ajax Enable WCF” and write the method like this

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

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// Add [WebGet] attribute to use HTTP GET

[OperationContract]
public string GetEmpSal(string Name)
{
string a;
using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Test;Integrated Security=True"))
{
//for more simplicity, i have written in general sql statement
using (SqlCommand cmd = new SqlCommand("Select EmpSal from tblEmp where EmpName=@EmpName", con))
{
cmd.Parameters.AddWithValue("@EmpName", Name);
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
if (dt.Rows.Count > 0)
{
a = dt.Rows[0]["EmpSal"].ToString();
}
else
{
a = string.Empty;
}

}
}
return a;
}

[OperationContract]

public List<Emp> FetchEmpName()
{
List<Emp> EmpNames = new List<Emp>();
using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Test;Integrated Security=True"))
{
//for more simplicity, i have written in general sql statement
using (SqlCommand cmd = new SqlCommand("Select EmpName from tblEmp", con))
{
con.Open();
using (SqlDataReader dr = cmd.ExecuteReader())
{

if (dr != null)
{

while (dr.Read())
{
Emp emp1 = new Emp();
emp1.EmpName = dr["EmpName"].ToString();
EmpNames.Add(emp1);
}

}

}
}
}
return EmpNames;
}

}

Step 2: In default page, keep one asp.net dropdown, Textbox, Ajax Script Manager Control and write the code like this

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>

<script language="javascript" type="text/javascript">

function ShowEmpSal()
{

//Here we are passing the dropdown selected value to WCF
Service.GetEmpSal(document.getElementById(‘DropDownList1’).value, onSuccess, null, null);

}

function onSuccess(result)
{
//Here we are displaying the result on basis of selection
$get("TextBox1").innerText = result;
}

</script>

</head>
<body>

<form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>

<asp:ServiceReference Path="~/Service.svc" />
</Services>
</asp:ScriptManager>

EmpName: <asp:DropDownList ID="DropDownList1" onchange="return ShowEmpSal()" Width="150Px" runat="server">

</asp:DropDownList>

<br />
<br />
<br />
&nbsp;&nbsp;&nbsp;
EmpSal: <asp:TextBox ID="TextBox1" runat="server" Width="149px"></asp:TextBox>
<br />
<br />
<br />
<br />

<%– This javascript is used to populate the dropdown on pageload only–%>

<script type="text/javascript">
Sys.Application.add_load(function() {
Service.FetchEmpName(function(result) {
var ddl = document.getElementById(‘<%=DropDownList1.ClientID %>’);

for (var i = 0; i < result.length; i++) {
ddl.options[i] = new Option(result[i].EmpName, result[i].EmpName);

}
ddl.options[0] = new Option("Select", "");

ddl.options[0].selected = true;

});
});
</script>

</div>

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

How to implement caching in WCF?



Hi
Here we can’t implement the caching like Web service. We can implement caching with help of HttpContext.

I hope that you are knowing basic concept of WCF. so i m skipping that steps.

Step1:Declare 2 methods in Interface like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

[ServiceContract]
public interface IService
{
[OperationContract]

string DisplayDate();

[OperationContract]

string DisplayDate_WithOutCache();

}

step2:Write WCF 2 methods like this

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

public class Service : IService
{

public string DisplayDate()
{

HttpContext context = HttpContext.Current;

if (context.Cache[“str”] != null)
{
return (string)context.Cache[“str”];
}
else
{
string str = System.DateTime.Now.ToString();
context.Cache.Insert(“str”, str, null, DateTime.Now.AddMinutes(1), TimeSpan.Zero);
return str;
}

}

public string DisplayDate_WithOutCache()
{
string str1 = System.DateTime.Now.ToString();
return str1;
}
}

Step3: Compile the service and consume in application

Step4: Write this code in Button Click event to test the concept

protected void Button1_Click(object sender, EventArgs e)
{
Service client = new Service();
LblMsg.Text = client.DisplayDate();
lblmsg1.Text = client.DisplayDate_WithOutCache();
}

Step5: Now compile the application.

Posted in WCF. 2 Comments »

How to create auto complete textbox extender using “Ajax Enabled WCF”?



We can do this task using so many methods. But here I m going to show you using  “Ajax Enabled WCF”.

It is very easy and flexible to use. WCF also give good performance as compare to web service.

Note: If you are new to “Ajax enable Wcf” please see my this post

Here are some few steps to do this task

Step1: Create the “Ajax enable Wcf” and write method  like this

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;

[ServiceContract(Namespace = “”)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string[] GetEmpInfoWith_WCF(string prefixText)
{
SqlConnection con = new SqlConnection(“Data Source=.;Initial Catalog=Test;Integrated Security=True”);

string sql = “Select EmpName from tblEmp Where EmpName like @EmpName”;
SqlDataAdapter da = new SqlDataAdapter(sql, con);
da.SelectCommand.Parameters.Add(“@EmpName”, SqlDbType.VarChar, 50).Value = prefixText + “%”;
DataTable dt = new DataTable();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
string[] items = new string[dt.Rows.Count];
int i = 0;
foreach (DataRow dr in dt.Rows)
{
items.SetValue(dr[“EmpName”].ToString(), i);
i++;
}
return items;
}
else
{

string[] items = new string[1];

items.SetValue(“No EmpName Found”, 0);

return items;

}

}

}

Step2: Compile the Service
Step3: Take  Textbox, AutoCompleteExtender and Scriptmanager control in default.aspx
Step4:Configure the AutoCompleteExtender like this

<cc1:AutoCompleteExtender runat="server"
ID="AutoComplete1"
BehaviorID="autoComplete"
TargetControlID="TextBox1"
ServicePath="Service.svc"
ServiceMethod="GetEmpInfoWith_WCF"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="true"
CompletionSetCount="12"
CompletionListCssClass="AutoExtender"
CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass
="AutoExtenderHighlight"
CompletionListElementID="divwidth"/>

Complete Aspx page is like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete_WCF.aspx.cs" Inherits="AutoComplete_WCF" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head id="Head1" runat="server">
<title></title>

<style type="text/css">

.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
border: solid 1px #006699;
line-height: 20px;
padding: 10px;
background-color: White;
margin-left:10px;
}
.AutoExtenderList
{
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
#divwidth
{
width: 150px !important;
}
#divwidth div
{
width: 150px !important;
}

</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<cc1:AutoCompleteExtender runat="server"
ID="AutoComplete1"
BehaviorID="autoComplete"
TargetControlID="TextBox1"
ServicePath="Service.svc"
ServiceMethod="GetEmpInfoWith_WCF"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="true"
CompletionSetCount="12"
CompletionListCssClass="AutoExtender"
CompletionListItemCssClass="AutoExtenderList"
CompletionListHighlightedItemCssClass
="AutoExtenderHighlight"
CompletionListElementID="divwidth"/>

<div ID="divwidth"></div>

<center>
EmpName <asp:TextBox ID="TextBox1" Width="150px" runat="server"/>
</center>

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