And now, add a few dummy values to populate in Kendo UI Grid. I have added some rows as shown below.
To add these dummy values, execute the below insert queries.
Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it "Application". Now, click OK.
Step2
Select Empty MVC project and click OK to create the project.
Step 3
Once you click OK, the project will be created with the basic architecture of MVC.
Create ASP.Net WEB-API empty project
To create a new ASP.NET Web API project, follow the below steps one by one.
Step 1
Select New Project -> Web -> ASP.NET Web Application. Name your project (Here, I mentioned it as "API") and click OK. This step is common for MVC, WebAPI, and WebForms.
Step 2
Now, select Empty Web API Project and click OK.
Step 3
In the below image, you can see that both the projects have been created with the basic architecture of WebAPI and MVC.
Configure Entity Framework in ASP.Net Web API
Here, I already discussed how to configure and implement database first approach. In the meantime choose our created table with entity framework, once we did our configuration with SQL table "Employee" from CRUD database and with our application you will get the below screen as succeeding configuration.
Create Controller with data Load Logic using Entity Framework in ASP.Net Web API
Step 1
Add Controller and name it as "CRUD"
Step 2 Write logic to load data from database
To load data from database write the below codes to in CRUD controller under in API project, in below code.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Net;
- using System.Net.Http;
- using System.Web.Http;
- using System.Web.Http.Description;
- using System.Web.Mvc;
- namespace Web_API.Controllers {
-
-
-
- public class CRUDController: ApiController {
- private static CRUDEntities crud = new CRUDEntities();
-
-
-
-
- [ResponseType(typeof(IEnumerable < Employee > ))]
- [System.Web.Http.Route("api/GetEmployees")]
- [System.Web.Http.HttpGet]
- public HttpResponseMessage GetEmployees() {
- var result = crud.Employees.ToList();
- return GetResultResponse(result);
- }
-
-
-
-
-
- public HttpResponseMessage GetResultResponse(object Result) {
- HttpResponseMessage response = null;
- try {
- response = Request.CreateResponse(HttpStatusCode.OK, Result);
- } catch (Exception ex) {
- response = Request.CreateResponse(HttpStatusCode.InternalServerError, Result);
- }
- return response;
- }
- }
- }
Description
- CRUDEntities-> This is our entity name
- GetEmployees -> To load the data from database using entity framework
- HttpResponseMessage-> To return the response to application about service response.
Configure Kendo UI with ASP.Net MVC Application
Here we going to enable the Kendo UI feature with our application. We have two way to enable Kendo UI feature in our application
Way 1
Step 1 - Add Reference
Step 2
Install FortuneLab.Kendo.Mvc from NuGet
Once you installed the Kendo.MVC into your application, you can see the below screen that the kendo.MVC is added to your reference and predefined CSS and script files are added to your project under content and script folder.
(OR) Way 2
Another best way you can enable Kendo UI by adding following script and CSS to a header in view
Call Kendo Scripts and CSS
To access predefined functionality from Kendo UI, we need to call the following scripts and CSS in our application. So, just add the below references in the head tag.
- <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.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>
Create Controller with View
Here, I just created an empty controller and I named it as CRUD
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- namespace CRUD_Application.Controllers {
- public class CrudController: Controller {
-
- public ActionResult Index() {
- return View();
- }
- }
- }
Now add a view for this action method and add the below code to it.
- @using(Html.BeginForm()) { < div id = "EmployeeGrid" > < /div>
- }
Now add the below script to load the database to kendo grid from Web API.
- <script type="text/javascript">
- $(document).ready(function() {
- var ApiUrl = "http://localhost:50537/";
- dataSource = new kendo.data.DataSource({
- transport: {
- read: {
- url: ApiUrl + "api/GetEmployees",
- dataType: "json",
- }
- },
- });
- $("#EmployeeGrid").kendoGrid({
- dataSource: dataSource,
- groupable: true,
- filterable: true,
- sortable: true,
- pageable: {
- refresh: true,
- pageSizes: true,
- buttonCount: 5
- },
- columns: [{
- field: "ID",
- title: "Employee ID",
- width: 100,
- filterable: false,
- }, {
- field: "Name",
- title: "Name",
- }, {
- field: "Designation",
- title: "Designation",
- filterable: {
- multi: true,
- search: true,
- search: true
- }
- }, {
- field: "Department",
- title: "Department",
- filterable: {
- multi: true,
- search: true,
- search: true
- }
- }, {
- field: "YOE",
- title: "YOE",
- width: 80,
- filterable: {
- multi: true
- }
- }, {
- field: "Status",
- title: "Status"
- }, ],
- height: "500px",
- pageable: {
- refresh: true,
- pageSizes: true,
- buttonCount: 5
- },
- }).data("kendoGrid");
- });
- </script>
Detailed Description
- <div id="EmployeeGrid"></div> ->This is will act as kendo grid
- var ApiUrl = "http://localhost:50537/"; -> It's represent API project url(Web API)
- url: ApiUrl + "api/GetEmployees", -> Calling the Web API action method to load employees from database using entityframework
- $("#EmployeeGrid").kendoGrid({ -> It's represent EmployeeGrid will act as kendo grid and all kendo grid functionality will applied to this div
- dataSource: dataSource, -> binding all datas to grid datasource
- transport: { read: -> It's enable us to bind data to kendo grid
- and there has basic feature for groupable,filterable,sortable,
- columns: [-> It's represent which are the fields wants to display in grid
Now refer all kendo related CSS and script to layout page to enable all kendo related functionality and UI to application
- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>CRUD Opeations</title> @Styles.Render("~/Content/css")
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
- <link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
- <link href="~/Content/kendo/Kendo.custom.css" rel="stylesheet" />
- <link href="~/Content/kendo/kendo.dataviz.min.css" rel="stylesheet" />
- <link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
- <link href="~/Content/kendo/kendo.rtl.min.css" rel="stylesheet" />
- <script src="~/Scripts/kendo/kendo.all.min.js"></script>
- <script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
- </head>
-
- <body>
- <div class="navbar navbar-inverse navbar-fixed-top">
- <div class="container">
- <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button> @Html.ActionLink("Home", "Index", "Crud", new { area = "" }, new { @class = "navbar-brand" }) </div>
- <div class="navbar-collapse collapse">
- <ul class="nav navbar-nav"> </ul>
- </div>
- </div>
- </div>
- <div class="container body-content"> @RenderBody()
- <hr /> </div>
- </body>
-
- </html>
Startup Project
In this solution we have two ASP.Net MVC and ASP.NET WEB API projects, so we need to set which project needs to execute first but here we need to execute both applications because then only we will get the data from a database through Web API. Now we will configure both projects as startup project. For that right click on solution and select the project to set.
Select Multiple Startup projects
Now Build and run your application.
WEB-API Result
Application Result
Yeah! the Kendo grid is successfully implemented in our ASP.NET MVC Application with ASP.NET WEB API.
I did attach content and Script folders with Kendo.MVC.dll and Views(which contains layout and index page) for your reference. For more Kendo UI grid configuration see
Here.
Summary
In this article, you learned to bind the data to kendo grid in ASP.NET MVC using WEB API and Entity Framework.
I hope you enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome. In the next article, we will see about CRUD operation using Kendo UI grid in ASP.NET MVC with WEB API and Entity Framework.