Remote Binding KendoGrid Using WEB API 2 ODATA v3 And Entity Framework

Gowtham K
9y
6.6k
0
1

100

Article

Introduction

What is OData

It is an open data protocol to exchange the data between client and server.
The odata uses a REST architecture to send particular types of message over HTTP.
OData standardizes the request/response formats in JSON and AtomXml on how the data and its metadata is structured.
OData also specifies a very rich query language to enable consumers query your services for precise information they are looking for with the help of $filter, $orderby, $skip, $top, $expand.

Description

Now let us start with creating the OData End point with WEB API.

Just create a WEB API project in Visual Studio as in the following figures 1 and 2:

Figure 1

Figure 2

Creating a Model Classes

Right-click on the model folder and create a class. In my case I named it Product.

Write the following code in the Product.cs model class.

public class Product
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int ProductID { get; set; }
[Required]
public string ProductName { get; set; }
[Required]
public string UnitPrice { get; set; }
}

Here I am using Entity Framework Code first technique so we need to create the context class.

Right-click on the model folder and create one more class. In my case I named it ProductContext.

Write the following code in ProductContext class.

public class ProductContext : DbContext
{
public ProductContext() : base("name=TestConnection") { }
public DbSet<Product> Products { get; set; }
}

Scaffolding the WEB API Controller Class

Note: Before doing Scaffolding build your application once.

Right-click on Controller folder, then select Add--> Controller and create a WEB API class as in the following figure 3 and 4.

Figure 3

Figure 4

The preceding procedure will scaffold the RESTfull service in the ProductsController.cs.

You will get some pre-defined HTTP GET, POST, PUT,PATCH and DELETE requests/responses in the products Controller. Modify the code based on your application requirements. For this example I didn't modified the code.

Now the REST services are created, it's time to create a Kendo UI Grid to consume the services.

Before implementing the service in the Kendo UI once check the service request/response in Postman / Fiddler.

HTTP GET: odata/Products (odata Endpoint)

Figure 5

From the above figure 5 you can observe the service response from server where it consist of metadata and no objects are listed because it is a new database which is created from Entity framework code first technique.

Let us insert some values in table using HTTP POST request as in the following figure 6:

Figure 6

Create an HTML page in your project. In my case I named it KendoGrid.html.

Design in KendoGrid.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
</head>
<body>
<div id="example" class="container">
<div class="row">
<div class="col-sm-6">
<div id="grid"></div>
</div>
</div>
</div>
</body>
</html>