Populating Kendo DropDownLists With Multiple JSON Objects Using ASP.NET WEB API

Before going through this article ensure that you have a basic understanding of the MVC Architecture, ASP.NET Web API and jQuery.
 
Let us start with creating an ASP.NET WEB API Application.
 
Creating an Empty ASP.NET WEB API Project

Create a simple empty WEB API project as in the following figure:
 
 
                                                                     Figure 1 
 
 '
                                          Figure 2  

Creating a Model Class

Right click on the model folder and add a new class, in my case I named it CommonList.cs:

Code in CommonList.cs
  1. public class CommonList  
  2. {  
  3.     public  CommonList(int Id, string Text)  
  4.     {  
  5.         this.Id = Id;  
  6.         this.Text = Text;  
  7.     }  
  8.     public int Id { getset; }  
  9.     public string Text { getset; }  
  10. }  

Creating a Controller

Right click on the Controller folder and add a new controller, in my case I named it ListsitemsController.cs:

Code in ListsitemsController.cs
  1. [RoutePrefix("api/list")]  
  2.    public class ListsitemsController : ApiController  
  3.    {  
  4.        [HttpGet]  
  5.        [Route("items")]  
  6.        public HttpResponseMessage ListItems()  
  7.        {  
  8.            List<CommonList> _list = new List<CommonList>();  
  9.            _list.Add(new CommonList(1, "India"));  
  10.            _list.Add(new CommonList(2, "China"));  
  11.            _list.Add(new CommonList(3, "United States"));  
  12.   
  13.   
  14.            List<CommonList> _list1 = new List<CommonList>();  
  15.            _list1.Add(new CommonList(1, "TamilNadu"));  
  16.            _list1.Add(new CommonList(2, "Karnataka"));  
  17.            _list1.Add(new CommonList(3, "NewYork"));  
  18.   
  19.            return this.JsonResponse(  
  20.                new  
  21.                {  
  22.                    CountryList = _list,  
  23.                    StateList = _list1,  
  24.                });  
  25.   
  26.        }  
  27.   
  28.   
  29.        public HttpResponseMessage JsonResponse(object response, HttpStatusCode httpStatusCode = HttpStatusCode.OK)  
  30.        {  
  31.            return Request.CreateResponse(httpStatusCode, response, Configuration.Formatters.JsonFormatter);  
  32.        }  
  33.    }  
The above controller ListItems action  will return a Country list and State list as a response.  
 
Now the API is ready to consume.

Using a Kendo Dropdownlist with MVVM pattern
 
Please read my previous article to get more details about implementing kendo dropdownlist with MVVM Pattern.

Creating a HTML page

Create a new HTML page in the project.

Design: 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Kendo Dropdownlist MVVM</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">  
  10.   
  11.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>  
  15.   
  16.     <script src="scripts/Core.js"></script>  
  17.     <script src="scripts/Data.js"></script>  
  18.     <script src="scripts/ViewModel.js"></script>  
  19. </head>  
  20. <body>  
  21.     <div class="col-lg-12">  
  22.         <div id="Main" class="main"></div>  
  23.     </div>  
  24.   
  25.     <script type="text/x-kendo-template" id="Layout-temp">  
  26.         <div class="col-lg-12">  
  27.             <div id="content"></div>  
  28.         </div>  
  29.     </script>  
  30.     <script type="text/x-kendo-template" id="Dashboard-temp">  
  31.         <div class="row">  
  32.             <h4>Kendo DropDownlist with MVVM Pattern</h4>  
  33.             <input data-role="dropdownlist"  
  34.                    data-bind="source:state,value:State"  
  35.                    data-text-field="Text" data-value-field="Id" data-option-label="--Select State--"  
  36.                    style="width:50%" />  
  37.             <br />  
  38.             <br />  
  39.             <br />  
  40.             <input data-role="dropdownlist"  
  41.                    data-bind="source:country,value:Country"  
  42.                    data-text-field="Text" data-value-field="Id" data-option-label="--Select Country--"  
  43.                    style="width:50%" />  
  44.         </div>  
  45.     </script>  
  46.   
  47. </body>  
  48. </html>  

Creating a JavaScript files

  1. View Model: Create a JavaScript file, in my case I named it ViewModel.Js

    The View-Model is a representation of your data (the Model) which will be displayed in the View.

    ViewModel.Js
    1. (function (G, $, undefined) {    
    2.     
    3.     
    4.     $.extend(true, G, {    
    5.         KendoDropdown: {    
    6.             ViewModel: {    
    7.                 DashboardModel: new kendo.observable({    
    8.                     Country: '',    
    9.                     country: [],    
    10.                     state: [],    
    11.                     State: '',    
    12.     
    13.     
    14.                 }),    
    15.                 UpdateList: function (resp) {    
    16.                     this.DashboardModel.set('country', resp.CountryList);    
    17.                     this.DashboardModel.set('state', resp.StateList)    
    18.                 },    
    19.             }    
    20.         }    
    21.     });    
    22. })(window.Gni = window.Gni || {}, jQuery);   
  2. Data: Create a JavaScript file, in my case I named it Data.Js

    This script is responsible to bound the DataSource by requesting the API.

    Data.js
    1. (function (G, $, K, undefined) {    
    2.     
    3.     $.extend(true, G, {    
    4.         KendoDropdown: {    
    5.             Data: {    
    6.                 List: new K.data.DataSource({    
    7.                     data: {},    
    8.                     transport: {    
    9.                         read: {    
    10.                             url: 'api/list/items',    
    11.                             type: 'get',    
    12.                             dataType: 'json',    
    13.     
    14.                         }    
    15.                     },    
    16.                     schema: {    
    17.                         data: function (response) {    
    18.                             return [response]; // create an array from the response    
    19.                         }    
    20.                     },    
    21.                     error: function (e) {    
    22.     
    23.                         alert(error);    
    24.                     },    
    25.                     requestEnd: function (e) {    
    26.                         G.KendoDropdown.ViewModel.UpdateList(e.response);    
    27.                     }    
    28.                 }),    
    29.                 Load: function () {    
    30.                     this.List.read();    
    31.                         
    32.                 },    
    33.             }    
    34.         }    
    35.     });    
    36. })(window.Gni = window.Gni || {}, jQuery, kendo);   
  3. Core: Create a JavaScript file, in my case I named it Core.Js.

    This core script is used to start the rendering of the templates and calls the view model to bind the data in the UI.
    1. $(function () {    
    2.     var Layout = new kendo.Layout("Layout-temp");    
    3.     var DashboardView = new kendo.View("Dashboard-temp", { model: Gni.KendoDropdown.ViewModel.DashboardModel });    
    4.     var router = new kendo.Router({    
    5.         init: function () {    
    6.             Layout.render("#Main");    
    7.             Layout.showIn("#content", DashboardView);    
    8.     
    9.         }    
    10.     });    
    11.     router.start();    
    12.     Gni.KendoDropdown.Data.Load();    
    13. }); 
The Result in Browser: 
 
API Responce
                                                                          Figure 3
StateList in Dropdown

Select state
                                                                         Figure 4
CountryList in Kendo DropDown 
 
Select country
                                                                        Figure 5

I hope you enjoyed this article. Your valuable feedback, question, or comments about this article are always welcome.
 
Read more articles on ASP.NET: