Post
Ask Question

Populate Kendo DropDownList Dynamically Using ASP.Net Web API

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.


Similar Articles