Before going through this article ensure that you have a basic Knowledge of MVC Architecture and ASP.NET Web API.

Let we start with creating a REST service using WEB API.

Just create a WEB API project in Visual Studio as shown in 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.
  1. public class Product {
  2. [Key]
  3. [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  4. public int ProductID {
  5. get;
  6. set;
  7. }
  8. [Required]
  9. public string ProductName {
  10. get;
  11. set;
  12. }
  13. [Required]
  14. public string UnitPrice {
  15. get;
  16. set;
  17. }
  18. }

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.

  1. public class ProductContext: DbContext {
  2. public ProductContext(): base("name=TestConnection") {}
  3. public DbSet < Product > Products {
  4. get;
  5. set;
  6. }
  7. }
Scaffolding the WEB API Controller Class

Note: Before doing Scaffolding build your application once.

Right-click on Controller folder then selelct Add--> Controller and create a WEB API class as shown in 3 and 4.

Figure 3

Figure 4

The preceding procedure will scaffold the REST full service in the ProductsController.cs.

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

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

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

Creating a Kendo List View with Remote Binding

Create a HMTL page in your project, in my case I named it KendoList.html.

Desgin in KendoList.html

  1. <html
  2. 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. <style>
  15. .product-view {
  17. float: left;
  19. width: 50%;
  21. height: 300px;
  23. box-sizing: border-box;
  25. border-top: 0;
  27. position: relative;
  29. }
  31. .product-view:nth-child(even) {
  33. border-left-width: 0;
  35. }
  37. .product-view dl {
  39. margin: 10px 10px 0;
  41. padding: 0;
  43. overflow: hidden;
  45. }
  47. .product-view dt, dd {
  49. margin: 0;
  51. padding: 0;
  53. width: 100%;
  55. line-height: 24px;
  57. font-size: 18px;
  59. }
  61. .product-view dt {
  63. font-size: 11px;
  65. height: 16px;
  67. line-height: 16px;
  69. text-transform: uppercase;
  71. opacity: 0.5;
  73. }
  75. .product-view dd {
  77. height: 46px;
  79. overflow: hidden;
  81. white-space: nowrap;
  83. text-overflow: ellipsis;
  85. }
  87. .product-view dd .k-widget,
  89. .product-view dd .k-textbox {
  91. font-size: 14px;
  93. }
  95. .k-listview {
  97. border-width: 1px 1px 1px 0;
  99. padding: 0;
  101. overflow: hidden;
  103. min-height: 298px;
  105. }
  107. .edit-buttons {
  109. position: absolute;
  111. bottom: 0;
  113. left: 0;
  115. right: 0;
  117. text-align: right;
  119. padding: 5px;
  121. background-color: rgba(0,0,0,0.1);
  123. }
  125. span.k-invalid-msg {
  127. position: absolute;
  129. margin-left: 6px;
  131. }
  133. .k-add-button {
  135. margin-bottom: 2em;
  137. }
  139. @media only screen and (max-width : 620px) {
  141. .product-view {
  143. width: 100%;
  145. }
  147. .product-view:nth-child(even) {
  149. border-left-width: 1px;
  151. }
  153. }
  155. </style>
  156. <div id="example">
  157. <div class="demo-section k-header wide">
  158. <div class="container">
  159. <div class="row">
  160. <div class="col-md-3">
  161. <label>Product Name</label>
  162. </div>
  163. <div class="col-md-3">
  164. <input type="text" id="ProductName" data-bind="value:ProductName" class="k-textbox" />
  165. </div>
  166. </div>
  167. <div class="row">
  168. <div class="col-md-3">
  169. <label>Unit Cost</label>
  170. </div>
  171. <div class="col-md-3">
  172. <input type="text" id="UnitPrice" class="k-textbox" data-bind="value:UnitPrice" />
  173. </div>
  174. </div>
  175. <br/>
  176. <br/>
  177. <div class="row">
  178. <button data-role="button"
  180. data-sprite-css-class="k-icon k-edit"
  182. data-bind="events: { click: InsertProduct }"
  184. style="width: 180px">
  186. Submit
  188. </button>
  189. </div>
  190. </div>
  191. <div>
  192. <h4>Kendo List</h4>
  193. <div data-role="listview"
  195. data-template="template"
  197. data-bind="source: products,
  199. visible: isVisible"
  201. style="height: 300px; overflow: auto"></div>
  202. </div>
  203. </div>
  204. <script type="text/x-kendo-tmpl" id="template">
  205. <div class="product-view k-widget">
  206. <dl>
  207. <dt>Product Name</dt>
  208. <dd>#:ProductName#</dd>
  209. <dt>Unit Price</dt>
  210. <dd>#:kendo.toString(UnitPrice, "c")#</dd>
  211. </dl>
  212. </div>
  213. </script>
  214. </div>
JavaScipt with MVVM Model

  1. $(document).ready(function() {
  2. var viewModel = kendo.observable({
  3. isVisible: true,
  4. ProductName: '',
  5. UnitPrice: '',
  6. products: new kendo.data.DataSource({
  7. batch: true,
  8. transport: {
  9. read: {
  10. url: "api/Products",
  11. dataType: "json"
  12. },
  13. parameterMap: function(options, operation) {
  14. if (operation !== "read" && options.models) {
  15. return {
  16. models: kendo.stringify(options.models)
  17. };
  18. }
  19. }
  20. },
  21. schema: {
  22. model: {
  23. id: "ProductID",
  24. }
  25. },
  26. }),
  27. InsertProduct: function(e) {
  28. e.preventDefault()
  29. $.ajax({
  30. type: "POST",
  31. url: 'api/Products',
  32. data: {
  33. ProductName: $("#ProductName").val(),
  34. UnitPrice: $("#UnitPrice").val()
  35. },
  36. })
  37. }
  38. });
  39. kendo.bind($("#example"), viewModel);
  40. })
Result in a browser


Figure 5

To show the structure of the Kendo list I already inserted one product into it.

We will start to add one more new product as shown in 6 and 7.


Figure 6

Figure 7

Check the table in your SQL database:


Yes, the records are inserted into the table.

That's it, I hope you have enjoyed this article, thank you.

Happy Coding.