Post
Ask Question

Implement AutoComplete Control Using Kendo UI With Entity Framework And Web-API

Requirements
  1. Visual Studio 2010 and high.
  2. SQL Server 2008 and high. 
Knowledge required
  1. Basic knowledge of jQuery AJAX.
  2. Basic Knowledge of WebAPI.
  3. Basic Knowledge of Kendo UI.
  4. Basic knowledge of Entity Framework. 
Article flows
  1. Create a database and insert values (DB).
  2. Create Web-API project and configure Entity Framework(WEB-API).
  3. Write Services to get the data(WEB-API).
  4. Create MVC Application(ASP.NET MVC).
  5. Create Controller and View(ASP.NET MVC).
  6. Write AJAX to call Web-API and bind the data to Kendo UI autocomplete (jQuery AJAX)
Step 1
 
DB

Create a table. 



Insert the values.

 
Step 2
 
Web-API

Create Web-API project and configure Entity Framework.

Refer to the link given below to configure Entity Framework.

http://www.c-sharpcorner.com/blogs/implement-database-first-approach-with-entity-framework after configuring our Entity Framework with Web-API will be, as shown below.



Now, write the Services to get the data. Here, I have used the repository pattern to get the data to know about repository pattern, refer to the links. 
  1. /// <summary>  
  2. /// Get All Employee Details  
  3. /// </summary>  
  4. /// <remarks>  
  5. /// Get Employees details  
  6. /// </remarks>  
  7. /// <returns></returns>  
  8. [ResponseType(typeof(IEnumerable < Employee > ))]  
  9. [System.Web.Http.Route("api/GetEmployees")]  
  10. [System.Web.Http.HttpGet]  
  11. public HttpResponseMessage GetEmployees()  
  12. {  
  13.     var result = _Employeerepository.GetAll();  
  14.     return GetResultResponse(result);  
  15. }  
Step 3
 
ASP.NET MVC

Create MVC Application after the creation of an Application. Create control in the name of Crud and create actionmethod in the name of AutoComplete.


Action Method
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace TS_VMS.Controllers {  
  7.     public class CrudController: Controller {  
  8.         public ActionResult AutoComplete() {  
  9.             return View();  
  10.         }  
  11.     }  
  12. }   
Addview 

Right click action method and click addview. 

 

Create a view without modal with the name AutoComplete.

 
 
Add CSS and Script 
 
Add CSS given below and the script to access the predefind function from Kendo UI. 
  1. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />  
  2. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />  
  3. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />  
  4. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />  
  5. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  6. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>   
Add Textbox control in view.
  1. @Html.TextBox("Designation", "", new { @id = "Designation", @class = "form-control", @placeholder = "Designation" })})  
Add AJAX call to call Web-API Service and bind the data to the textbox 
  1. <script type="text/javascript">  
  2.     $(document).ready(function() {  
  3.         var ApiUrl = "http://localhost:50537/";  
  4.         $.ajax({  
  5.             url: ApiUrl + "api/GetEmployees",  
  6.             type: "Get",  
  7.             dataType: 'json',  
  8.             contentType: 'application/json; charset=utf-8',  
  9.             success: function(result) {  
  10.                 $("#Designation").kendoAutoComplete({  
  11.                     clearButton: true,  
  12.                     dataSource: result,  
  13.                     filter: "startswith",  
  14.                     dataTextField: "Designation",  
  15.                     minLength: 1,  
  16.                     placeholder: "Enter Designation ...",  
  17.                 });  
  18.             }  
  19.         });  
  20.     });  
  21. </script>  
Description(in above AJAX call)
  1.  URL - It represents Web-API URL with the name of API/GetEmployees, refer Web-API get method.
  2. clearButton - true. It's to clear that the textbox value is not a binded value. 
  3. filter - "startswith".  There are many filter options to filter respective field, which is based on the input like starting value contains an ending number.
  4. dataTextField - "Designation". Mention which field(value) you want to display to the user.
  5. minLength - 1. Tto start searching the string until reaching the minlenth of our input. It's not involved to search from that Data Source.
Finally, the view should be, as shown below. 
  1. <!DOCTYPE html>  
  2. <script type="text/javascript">  
  3.     $(document).ready(function() {  
  4.         var ApiUrl = "http://localhost:50537/";  
  5.         $.ajax({  
  6.             url: ApiUrl + "api/GetEmployees",  
  7.             type: "Get",  
  8.             dataType: 'json',  
  9.             contentType: 'application/json; charset=utf-8',  
  10.             success: function(result) {  
  11.                 $("#Designation").kendoAutoComplete({  
  12.                     clearButton: true,  
  13.                     dataSource: result,  
  14.                     filter: "startswith",  
  15.                     dataTextField: "Designation",  
  16.                     minLength: 1,  
  17.                     placeholder: "Enter Designation ...",  
  18.                 });  
  19.             }  
  20.         });  
  21.     });  
  22. </script>  
  23. <html>  
  24.   
  25. <head>  
  26.     <title>Kendo AutoComplete</title>  
  27.     <meta charset="utf-8" />  
  28.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />  
  29.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />  
  30.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />  
  31.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />  
  32.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  33.     <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>  
  34. </head>  
  35.   
  36. <body> @Html.TextBox("Designation", "", new { @id = "Designation", @class = "form-control", @placeholder = "Designation" }) </body>  
  37.   
  38. </html>  

Now, run our Application (it's searching in minimum length of 1 character itself).


Now, I am changing the minmum length to two. 

minLength: 2,

Now, see the output (it's not populating the related data).


Now, type two characters.


I hope, you enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.


Similar Articles