Main Objective of this Article

This article shows how to do create, read, update and delete operations in Kendo Grid using the ASP.NET WEB API.

Requirements
  • VS2010 and above
  • Fiddler/Postman for testing
  • SQL Server 2008 and above
Before going through this article ensure that you have a basic understanding of the MVC Architecture, ASP.NET Web API and jQuery.

Open the ASP.NET MVC project as shown in Figure 1.


Figure 1

Create one empty application as shown in Figure 2.
Figure 2
Your project structure will be like this figure (Figure 3).

Figure 3

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


Fill in the property in the Category model class.

In my case it is:

  1. public class Category
  2. {
  3. [Key]
  4. public int CategoryID {
  5. get;
  6. set;
  7. }
  8. [Required]
  9. public string CategoryName {
  10. get;
  11. set;
  12. }
  13. }
To connect with the database I have used the code first technique in Entity Framework.

Create one more model class called CategoryContext.cs.

Write the following code in that class.
  1. public class CategoryContext: DbContext
  2. {
  3. public CategoryContext(): base("name=TestConnection") {}
  4. public DbSet < Category > Categories {
  5. get;
  6. set;
  7. }
  8. }
Establish the connection string in the web config before building. In my case my code is:
  1. <connectionStrings>
  2. <add name="TestConnection" connectionString="Data Source=your SQL servername ;Initial Catalog=Test;Integrated Security=True" providerName="System.Data.SqlClient" />
  3. </connectionStrings>
It's time to create a Controller named CategoryController.cs as shown in Figure 3.



Figure 3
Note: Before scaffolding, build your application once to get a Model classes.

Make sure that if your using MVC 4 that the Entity Framework is version 5 or later.

Open the Category controller class. You will see some predefined code with GET, PUT, POST and DELETE HttpResponses.

I have modified the predefined code based on my application needs, you can refer to it by downloading the source code.

Now you can check these HTTP response/request using the Postman/Fiddler.

First insert some records using HTTP POST request/response as shown in Figure 4.



Figure 4
HTTP GET:

As shown in Figure 5.



Figure 5

HTTP PUT:

As shown in Figure 6.


Figure 6

HTTP DELETE:

As shown in Figure 7.


Figure 7

Now to consume the Web API using Kendo UI.

Create one HTML page in the project.

Here is my deign:

  1. <head>
  2. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
  3. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
  4. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
  5. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
  6. <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
  7. <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
  8. <title></title>
  9. </head>
  10. <body>
  11. <script>
  12. $(document).ready(function () {
  13. dataSource = new kendo.data.DataSource({
  14. transport: {
  15. read:
  16. {
  17. url: "http://localhost:54129/api/Category",
  18. dataType: "json",
  19. },
  20. destroy:
  21. {
  22. url: "http://localhost:54129/api/Category",
  23. type: "DELETE"
  24. },
  25. create:
  26. {
  27. url: "http://localhost:54129/api/Category",
  28. type:"POST"
  29. },
  30. update:
  31. {
  32. url: "http://localhost:54129/api/Category",
  33. type: "PUT",
  34. parameterMap: function (options, operation) {
  35. if (operation !== "read" && options.models) {
  36. return {
  37. models: kendo.stringify(options.models)
  38. };
  39. }
  40. }
  41. },
  42. },
  43. schema:
  44. {
  45. model:
  46. {
  47. id: "CategoryID",
  48. fields: {
  49. CategoryID: { editable: false, nullable: true, type: "number" },
  50. CategoryName: { editable: true, nullable: true, type: "string" },
  51. }
  52. }
  53. }
  54. });
  55. $("#grid1").kendoGrid({
  56. dataSource:dataSource,
  57. editable: "inline",
  58. toolbar: ["create"],
  59. columns: [
  60. {
  61. field: "CategoryID",
  62. title: "number",
  63. },
  64. {
  65. field: "CategoryName",
  66. title: "Name"
  67. },
  68. {
  69. command: ["edit",
  70. {
  71. name: "destroy",
  72. text: "remove",
  73. }
  74. ],
  75. }
  76. ],
  77. height: "500px",
  78. pageable: {
  79. refresh: true,
  80. pageSizes: true,
  81. buttonCount: 5
  82. },
  83. }).data("kendoGrid");
  84. });
  86. </script>
  87. <div class="main-content">
  88. <div id="grid1"></div>
  89. </div>
  90. </body>undefined</html>
In the browser, the design will be as shown in Figure 8.


Figure 8

Add a new record as shown in Figures 9 and 10.


Figure 9


Figure 10

EDIT record as shown in figure 11 and 12.

Figure 11



Figure 12

Delete a record as shown in Figures 13 and 14.



Figure 13


Figure 14
The reflection in the SQL table.

That's it. Enjoy coding.