Create an empty Web API and integrate with Entity Framework as I explained in my previous article CRUD Opertaion in Kendo Grid using Web API.

Objective of this article

Insert a record into a SQL Server database table and populate the records in a Kendo Dropdown list dynamically by reading the record from a SQL Server database table using the ASP.NET Web API REST full service.

Create a REST full service to Insert a Record in SQL Table.

Open the existing ASP.NET MVC 4 project that we created earlier (refer to the article CRUD Opertaion in Kendo Grid using Web API).

Right-click on the project root and add a new HTML page. I named it KendoDropDown.html.

Finally the project structure will be as in Figure 1.

Figure 1: Controller

Open the CategoryController class now, for this application we will use the following GET and POST services.

  1. public IEnumerable<Category> GetCategories()
  2. {
  3. return db.Categories.AsEnumerable();
  4. }
  5. public HttpResponseMessage PostCategory(Category category)
  6. {
  7. if (ModelState.IsValid)
  8. {
  9. db.Categories.Add(category);
  10. db.SaveChanges();
  11. HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, category);
  12. response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = category.CategoryID }));
  13. return response;
  14. }
  15. else
  16. {
  17. return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
  18. }
  19. }

Check the response in Postman/Fiddler.

1. The HTTP GET response/request is as in Figure 2.

Figure 2: HTTP GET response/request

2. The HTTP POST response/request is as in Figure 3.

Figure 3: HTTP Post

Consuming the REST full services using Kendo UI.

Write the following design in the new HTML page of the project.

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
  5. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
  6. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
  7. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
  8. <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
  9. <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
  10. <title></title>
  11. </head>
  12. <body>
  13. <div id="example">
  14. <div class="demo-section k-header">
  15. <input id="Category" style="width: 400px;" />
  16. </div>
  17. <br />
  18. <div id="Category-display" class="demo-section k-header"></div>
  19. </div>
  20. <script id="Category_template" type="text/x-kendo-template">
  21. <h4>Category: #: CategoryName #</h4>
  22. <div class="form-group" id="Category">
  23. <div class="col-lg-12 bg">
  24. <div class="col-lg-6">
  25. <div class="form-inline">
  26. <span>Category:</span>
  27. </div>
  28. <div class="form-inline">
  29. <input required validationmessage="Please enter the Category" type="text" id="Category_name" name="Category" data-bind="value:category" class="form-control" placeholder="Category...." />
  30. <span class="k-invalid-msg" data-for="Category"></span>
  31. </div>
  32. <div class="form-inline">
  33. <button id="submit_btn" onclick="InsertCategory()" class="k-button">Submit</button>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </script>
  39. <script>
  40. var template = kendo.template($("#Category_template").html());
  41. function preview() {
  42. var dropdown = $("#Category").data("kendoDropDownList");
  43. var product = dropdown.dataSource.get(dropdown.value());
  44. var productPreviewHtml = template(product);
  45. $("#Category-display").html(productPreviewHtml);
  46. }
  47. $("#Category").kendoDropDownList({
  48. dataTextField: "CategoryName",
  49. dataValueField: "CategoryID",
  50. dataSource: {
  51. transport: {
  52. read: {
  53. url: "http://localhost:54129/api/Category",
  54. dataType: "json"
  55. }
  56. },
  57. schema: {
  58. model: {
  59. id: "CategoryID"
  60. }
  61. }
  62. },
  63. dataBound: preview,
  64. change: preview
  65. });
  66. </script>
  67. <script>
  68. function InsertCategory() {
  69. alert("hai");
  70. $.ajax(
  71. {
  72. cache: false,
  73. async: false,
  74. type: "POST",
  75. url: "http://localhost:54129/api/Category",
  76. data:
  77. {
  78. CategoryName: $("#Category_name").val(),
  79. },
  80. success: function (data) {
  81. alert(data);
  82. },
  83. });
  84. };
  85. </script>
  86. </body>
  87. </html>

Run the page and you can see the UI is as in Figures 4 and 5.


Figure 4: Category
Figure 5: Select category

Insert a new record as shown in Figures 6 and 7.

Figure 6: Submit
Figure 7: Furniture
That's it, Enjoy Coding.