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 {
-
- [ServiceContract]
- public interface IService1 {
- [OperationContract]
- [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json)]
- string GetCustomers(string AutoData);
- }
- }
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 {
-
-
- [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: