Requirements
- Visual Studio 2010 and high.
- SQL Server 2008 and high.
Knowledge required
- Basic knowledge of jQuery AJAX.
- Basic Knowledge of WebAPI.
- Basic Knowledge of Kendo UI.
- Basic knowledge of Entity Framework.
Article flows
- Create a database and insert values (DB).
- Create Web-API project and configure Entity Framework(WEB-API).
- Write Services to get the data(WEB-API).
- Create MVC Application(ASP.NET MVC).
- Create Controller and View(ASP.NET MVC).
- 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.
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.
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.
- /// <summary>
- /// Get All Employee Details
- /// </summary>
- /// <remarks>
- /// Get Employees details
- /// </remarks>
- /// <returns></returns>
- [ResponseType(typeof(IEnumerable < Employee > ))]
- [System.Web.Http.Route("api/GetEmployees")]
- [System.Web.Http.HttpGet]
- public HttpResponseMessage GetEmployees()
- {
- var result = _Employeerepository.GetAll();
- return GetResultResponse(result);
- }
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
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
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- namespace TS_VMS.Controllers {
- public class CrudController: Controller {
- public ActionResult AutoComplete() {
- return View();
- }
- }
- }
Addview
Right click action method and click addview.
Create a view without modal with the name AutoComplete.
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.
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />
- <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
Add Textbox control in view.
Join the conversation! Your thoughts help the community grow.