Remote Binding of Kendo DropDownlist with MVVM Pattern Using WEB API

From this article you will learn how to populate the Kendo dropdownlist with MVVM Pattern using WEB API.

MVVM

MVVM stands for Model< ->View <-> View Model which supports two-way binding between view and view model, where View-Model is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View.  

  • Model: The Model represents a set of classes that describes the business logic and data.

  • View: The View represents the presentation or the user interface layer.

  • View Model: The View-Model part of the MVVM is responsible for exposing the data objects from the Model in such a way that those objects are easily consumed in the View. 

Let us start with creating an ASP.NET WEB API

Creating an Empty ASP.NET WEB API Project:

Create a simple empty WEB API project as in the following figures:

 
                                                              Figure 1

 
                                        Figure 2  

Creating a Model Class:

Right click on the model folder 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. public class ListsitemsController : ApiController  
  2. {  
  3.     [HttpGet]  
  4.     [Route("items")]  
  5.     public HttpResponseMessage ListItems()  
  6.     {  
  7.         List<CommonList> _list = new List<CommonList>();  
  8.         _list.Add(new CommonList(1, "India"));  
  9.         _list.Add(new CommonList(2, "China"));  
  10.         _list.Add(new CommonList(3, "United States"));  

  11.          return Request.CreateResponse(HttpStatusCode.OK, _list, Configuration.Formatters.JsonFormatter);  
  12.      }
  13. }  

The above controller will return a Country list as a response. 

Now the API is ready to consume.

Using a Kendo Dropdownlist with MVVM pattern 

Creating a HTML page

Create a new HTML page in the project, in my case I named it kendoDropdownlist.html.

Design:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Kendo Dropdownlist MVVM</title>  
  6.     <meta charset="utf-8" />  
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/styles/kendo.mobile.all.min.css">  
  11.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  12.     <script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/angular.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/jszip.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/kendo.all.min.js"></script>  
  15.     <script src="scripts/Core.js"></script>  
  16.     <script src="scripts/Data.js"></script>  
  17.     <script src="scripts/ViewModel.js"></script>  
  18. </head>  
  19.   
  20. <body>  
  21.     <div class="col-lg-12">  
  22.         <div id="Main" class="main"></div>  
  23.     </div>  
  24.     <script type="text/x-kendo-template" id="Layout-temp">  
  25.         <div class="col-lg-12">  
  26.             <div id="content"></div>  
  27.         </div>  
  28.     </script>  
  29.     <script type="text/x-kendo-template" id="Dashboard-temp">  
  30.         <div class="row">  
  31.             <h4>Kendo DropDownlist with MVVM Pattern</h4> <input data-role="dropdownlist" data-bind="source:country,value:Country" data-text-field="Text" data-value-field="Id" data-option-label="--Select Country--" style="width:5remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using%" /> </div>  
  32.     </script>  
  33. </body>  
  34.   
  35. </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. To declare your View-Model use the kendo.observable function and pass it as a JavaScript object.

ViewModel.Js
 

  1. (function (G, $, undefined) {  
  2.     $.extend(true, G, {  
  3.         KendoDropdown: {  
  4.             ViewModel: {  
  5.                 DashboardModel: new kendo.observable({  
  6.                     Country: '',  
  7.                     country: G.KendoDropdown.Data.CountryList,  
  8.                     
  9.   
  10.                 }),  
  11.             }  
  12.         }  
  13.     });  
  14. })(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.                 CountryList: new kendo.data.DataSource({  
  7.                     transport: {  
  8.                         read: {  
  9.                             type: "GET",  
  10.                             url: "api/list/items",  
  11.                             datatype: "json",  
  12.                         },  
  13.                     },  
  14.                     schema: {  
  15.                         model: {  
  16.                             id: "Id",  
  17.                             fields: {  
  18.                                 "Text""Text",  
  19.                                  
  20.                                   
  21.                             }  
  22.                               
  23.                         }  
  24.                     }  
  25.                 }),  
  26.   
  27.             }  
  28.         }  
  29.     });  
  30. })(window.Gni = window.Gni || {}, jQuery, kendo);  

1.   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.     });  
  12.     router.start();  
  13. });  
The Result in Browser:
 
 

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