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:

wcf service

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:

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

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:

  1. namespace TestAppwith_Jquery.Services {
  2. // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service" in code, svc and config file together.
  4. [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  5. public class Service: IService {
  6. public string GetCustomers(string prefix) {
  7. List < object > customers = new List < object > ();
  8. using(SqlConnection conn = new SqlConnection()) {
  9. conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
  10. using(SqlCommand cmd = new SqlCommand()) {
  11. cmd.CommandText = "SELECT * FROM dbo.studentmaster where " +
  12. "StdName like @prefix + '%'";
  13. cmd.Parameters.AddWithValue("@prefix", prefix);
  14. cmd.Connection = conn;
  15. conn.Open();
  16. using(SqlDataReader sdr = cmd.ExecuteReader()) {
  17. while (sdr.Read()) {
  18. customers.Add(new {
  19. Id = sdr["AdmNo"],
  20. Name = sdr["StdName"]
  21. });
  22. }
  23. }
  24. conn.Close();
  25. }
  26. return (new JavaScriptSerializer().Serialize(customers));
  27. }
  28. }
  29. }
  30. }

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

  1. <html
  2. xmlns="http://www.w3.org/1999/xhtml">
  3. <head id="Head1" runat="server">
  4. <title></title>
  5. <style>
  6. table, th , td {
  7. border: 1px solid grey;
  8. border-collapse: collapse;
  9. padding: 5px;
  10. }
  11. table tr:nth-child(odd) {
  12. background-color: #f1f1f1;
  13. }
  14. table tr:nth-child(even) {
  15. background-color: #ffffff;
  16. }
  17. </style>
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  19. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  20. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  21. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
  22. <script type = "text/javascript">
  23. $(document).ready(function () {
  24. $("#search12").click(function () {
  25. $.ajax({
  27. type: "POST",
  28. contentType: "application/json; charset=utf-8",
  29. url: "../Service/Service1.svc/GetCustomers",
  30. data: '{"AutoData": "' + $("#AutoData").val() + '"}',
  31. processData: false,
  32. dataType: "json",
  33. success: function (response) {
  34. var customers = eval(response.d);
  35. var html = "";
  36. html += "
  37. <table >
  38. <tr>
  39. <td>ID</td>
  40. <td>Name</td>
  41. </tr>";
  42. $.each(customers, function () {
  43. html += "
  44. <tr>
  45. <td>" + this.Id + "</td>
  46. <td>" + this.Name + "</td>
  47. </tr>";
  48. });
  49. html += "
  50. </table>";
  51. $("#results").html(html == "" ? "No results" : html);
  52. },
  53. error: function (a, b, c) {
  54. alert(a.responseText);
  55. }
  56. });
  57. });
  58. });
  60. </script>
  61. </head>
  62. <body>
  63. <form id="form1" runat="server">
  64. <input type = "text" id = "AutoData" />
  65. <input id = "search12" type = "button" value = "Search" />
  66. <div id = "results"></div>
  67. </form>
  68. </body>
  69. </html>

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

  1. <system.serviceModel>
  2. <behaviors>
  3. <serviceBehaviors>
  4. <behavior name="ServiceBehavior">
  5. <serviceMetadata httpGetEnabled="true"/>
  6. <serviceDebug includeExceptionDetailInFaults="true"/>
  7. </behavior>
  8. </serviceBehaviors>
  9. <endpointBehaviors>
  10. <behavior name="ServiceAspNetAjaxBehavior">
  11. <enableWebScript/>
  12. </behavior>
  13. </endpointBehaviors>
  14. </behaviors>
  15. <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
  16. <services>
  17. <service behaviorConfiguration="ServiceBehavior" name="AutoComplete_WCF_Jquery_AJAX_Call.Service.Service1">
  18. <endpoint address="" binding="webHttpBinding" contract="AutoComplete_WCF_Jquery_AJAX_Call.Service.IService1" behaviorConfiguration="ServiceAspNetAjaxBehavior">
  19. <identity>
  20. <dns value="localhost"/>
  21. </identity>
  22. </endpoint>
  23. <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
  24. </service>
  25. </services>
  26. </system.serviceModel>

The output will be like the following:

list