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>
JavaScript
- $(document).ready(function () {
- $("#grid").kendoGrid({
- dataSource: {
- type: "odata",
- transport: {
- read: {
- url: "odata/Products",
- dataType: "json"
- },
- },
-
- schema: {
- data: function (data) {
- return data["value"];
- },
- total: function (data) {
- return data["odata.count"];
- },
- model: {
- fields: {
- ProductName: { type: "string" },
- UnitPrice: { type: "string" },
-
- }
- }
- },
- pageSize: 20
- },
- height: 200,
- width: 100,
- sortable: true,
- pageable: {
- refresh: true,
- pageSizes: true,
- buttonCount: 5
- },
- columns: [
- { field: 'ProductName', title: 'Product Name',width:200 },
- { field: 'UnitPrice', title: 'Unit Price', width: 100 }]
- });
- });
Result in Browser
Figure 7
Conclusion
From this article we learned about OData and how to remote bind the Kendo grid using WEB API 2 ODATA v3 and Entity Framework
Hope you have enjoyed this article.
Thank you! Happy Coding!