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

From this article you will learn how to populate Kendo dropdownlist with multiple JSON objects using ASP.NET

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: