Creating Autocomplete Using JQuery, Ajax & WCF in MVC

AutoComplete Box using Jquery and WCF

In this article I will explain you how to create Autocomplete Box using Jquery and WCF. I am creating application using VS 2017.

Step-1: Create a MVC Application. We will include the WCF Service on the said project. Save your project with the specified location.

 

Step-2: The MVC application is ready now we create the WCF Service. For creating the Service, Right Click on the "Models" folder and the WCF Service class like below.

Step-3: Add the connection String in the Web.Config File and Create a database with Dummy Data look like below.

USE [Customers]
GO
/****** Object:  Table [dbo].[Customer]    Script Date: 7/1/2019 7:39:02 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Customer](
 [CustId] [int] IDENTITY(1,1) NOT NULL,
 [CustCode] [varchar](10) NULL,
 [CsutName] [varchar](50) NULL,
 CONSTRAINT [PK_Customer] PRIMARY KEY CLUSTERED 
(
 [CustId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO

Step-4: In "Iservice1.cs" Interface method add the Service method and in "OperationContarct" add the below Invoke method as well. "System.ServiceModel.Web" reference must add.

namespace AutoComplete_MVC_WCF.Models
{
    // 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);
    }
}

Step-4: Implement the method in "Service.cs" like below.

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

namespace AutoComplete_MVC_WCF.Models
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
    // NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging.
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1 : IService1
    {
        public string GetCustomers(string Prefix)
        {
            List<object> customers = new List<object>();
            using (SqlConnection conn = new SqlConnection())
            {
                conn.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "SELECT CustCode,CsutName FROM dbo.Customer where " +
                        "CsutName like @prefix + '%'";
                    cmd.Parameters.AddWithValue("@prefix", Prefix);
                    cmd.Connection = conn;
                    conn.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            customers.Add(new
                            {
                                CustCode = sdr["CustCode"],
                                CsutName = sdr["CsutName"]
                            });
                        }
                    }
                    conn.Close();
                }
                return (new JavaScriptSerializer().Serialize(customers));
            }
        }
    }
}

Step-5: Now Configure the Service in "Web.config" File.

<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_MVC_WCF.Models.Service1">    
            <endpoint address="" binding="webHttpBinding" contract="AutoComplete_MVC_WCF.Models.IService1" behaviorConfiguration="ServiceAspNetAjaxBehavior">    
                <identity>    
                    <dns value="localhost"/>    
                </identity>    
            </endpoint>    
            <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>    
        </service>    
    </services>    
</system.serviceModel>

Step-6: The WCF Service is ready now, we need to set ready the Html. Already we have the MVC application project with Default "HomeController" with view "Index" page so we need to add the below html code. We use "CDN".

@{
    ViewBag.Title = "Home Page";
}

<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: "../Models/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.CustCode + '</td><td>' + this.CsutName + '</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">
        <br />
        <input type="text" id="AutoData" />
        <input id="search12" type="button" value="Search" />
        <div id="results"></div>
    </form>
</body>
</html>  

Now run the application and when we put any related keyword and hit enter in Search button the Output look like below.

Summary

In this article we will see how to create Search box using Jquery and WCF. This article also I shared earlier in C-Sharp corner Creating Autocomplete Using JQuery, Ajax & WCF in ASP.Net