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>

Advertisements

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: