Post
Ask Question

Remote Binding of 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 { get; set; }  
  9.     public string Text { get; set; }  
  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"));  

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

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:


Similar Articles