Creating Autocomplete Using JQuery, Ajax & WCF in ASP.Net

jayant Tripathy
9y
10.8k
0
0

Article

Create an ASP.NET application.

Add a folder named Service to the project.

Add a WCF Service in the Service folder as in the following:

You will see that two files are create, one has a .svc extension and the other is the interface class.

Open Iservice1.cs interface.

Add a method to get the Customer Name as in the following.

If Webinvoke is not found then add the reference from .Net as in the following:

namespace AutoComplete_WCF_Jquery_AJAX_Call.Service {
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IService1 {
[OperationContract]
[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)]
string GetCustomers(string AutoData);
}
}

Add Method

Add a method under the .Svc class like below. We must define a connection string in webconfig or you can define one in this class also:

namespace TestAppwith_Jquery.Services {
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service" in code, svc and config file together.
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service: IService {
public string GetCustomers(string prefix) {
List < object > customers = new List < object > ();
using(SqlConnection conn = new SqlConnection()) {
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using(SqlCommand cmd = new SqlCommand()) {
cmd.CommandText = "SELECT * FROM dbo.studentmaster where " +
"StdName like @prefix + '%'";
cmd.Parameters.AddWithValue("@prefix", prefix);
cmd.Connection = conn;
conn.Open();
using(SqlDataReader sdr = cmd.ExecuteReader()) {
while (sdr.Read()) {
customers.Add(new {
Id = sdr["AdmNo"],
Name = sdr["StdName"]
});
}
}
conn.Close();
}
return (new JavaScriptSerializer().Serialize(customers));
}
}
}
}

To call WCF Service in aspx page add the following code:

<html
xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type = "text/javascript">
$(document).ready(function () {
$("#search12").click(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../Service/Service1.svc/GetCustomers",
data: '{"AutoData": "' + $("#AutoData").val() + '"}',
processData: false,
dataType: "json",
success: function (response) {
var customers = eval(response.d);
var html = "";
html += "
<table >
<tr>
<td>ID</td>
<td>Name</td>
</tr>";
$.each(customers, function () {
html += "
<tr>
<td>" + this.Id + "</td>
<td>" + this.Name + "</td>
</tr>";
});
html += "
</table>";
$("#results").html(html == "" ? "No results" : html);
},
error: function (a, b, c) {
alert(a.responseText);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type = "text" id = "AutoData" />
<input id = "search12" type = "button" value = "Search" />
<div id = "results"></div>
</form>
</body>
</html>

Change in the web config as in the following code to add your Service Name and contract Name:

<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="ServiceBehavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="true"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="ServiceAspNetAjaxBehavior">
<enableWebScript/>
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
<services>
<service behaviorConfiguration="ServiceBehavior" name="AutoComplete_WCF_Jquery_AJAX_Call.Service.Service1">
<endpoint address="" binding="webHttpBinding" contract="AutoComplete_WCF_Jquery_AJAX_Call.Service.IService1" behaviorConfiguration="ServiceAspNetAjaxBehavior">
<identity>
<dns value="localhost"/>
</identity>
</endpoint>
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
</service>
</services>
</system.serviceModel>

The output will be like the following:

list

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all