Populate Kendo DropDownList Dynamically Using ASP.Net Web API

This article explains how to populate the Kendo dropdown using the ASP.NET Web API REST full service.

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.     }  

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.