Kendo UI Grid With ASP.NET MVC 5, Entity Framework, And Web API - Part One

Introduction

This article will demonstrate how to work on Kendo UI Grid with ASP.Net MVC5, Entity Framework, and Web-API. First, we will see how to load the data from the database using Entity framework and ASP.Net MVC to Kendo grid. Nowadays no one is ready to sit and write the code for a long time. For that we find many predefined features and third-party tools; in the same way here we are going to use the Kendo UI features to reduce our coding time and also to bring the rich look for our UI with less customization. Okay, we will see these all in this article and more in upcoming articles. Let's move forward. 

Article Flow 

• Create a table with dummy values in Sqlserver
• Create ASP.Net MVC 5 empty project
• Create ASP.Net WEB-API empty project
• Configure Entity Framework in ASP.Net Web API
• Create Controller with data Load Logic using Entity Framework in ASP.Net Web API
• Configure Kendo UI with ASP.Net MVC Application
• Create View with Kendo UI Grid
• Startup Project

Create a table with dummy values in Sqlserver

I have created a table "Employee" with the following design.

To create this employee table, execute the below query.

CREATE TABLE [dbo].[Employee](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](200) NOT NULL,
[Designation] [nvarchar](200) NOT NULL,
[Department] [nvarchar](200) NOT NULL,
[YOE] [int] NOT NULL,
[Status] [bit] NOT NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
   [ID] ASC
))

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.

GO
SET IDENTITY_INSERT [dbo].[Employee] ON
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Department], [YOE], [Status]) VALUES (1, N'Gnanavel Sekar', N'Software Engineer', N'IT', 3, 1)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Department], [YOE], [Status]) VALUES (2, N'Ramar Ammavasi', N'Tech Lead', N'IT', 7, 1)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Department], [YOE], [Status]) VALUES (3, N'Robert B', N'Application Developer', N'IT', 2, 1)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Department], [YOE], [Status]) VALUES (4, N'Ammaiyappan I', N'Software Engineer', N'IT', 3, 1)
GO
INSERT [dbo].[Employee] ([ID], [Name], [Designation], [Department], [YOE], [Status]) VALUES (5, N'Subash S', N'Team Lead', N'BPO', 5, 1)
GO
SET IDENTITY_INSERT [dbo].[Employee] OFF
GO

Create ASP.Net MVC 5 empty project

To create ASP.NET MVC empty project, follow the below steps one by one. Here, I have used Visual Studio 2013.

Step 1 Select Language and Name Your Project

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 {
    /// <summary>
    /// Crud Operation Controller
    /// </summary>
    public class CRUDController: ApiController {
        private static CRUDEntities crud = new CRUDEntities();
        /// <summary>
        /// Get All Employee Details
        /// </summary>
        /// <returns></returns>
        [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);
        }
        /// <summary>
        /// Get Response for Each result
        /// </summary>
        /// <param name="Result"></param>
        /// <returns></returns>
        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 {
        // GET: Crud
        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.