Remote Binding Of Kendo DropDownlist With MVVM Pattern Using WEB API

Datetime:2016-08-23 01:25:30          Topic: MVVM Model           Share

MVVM

MVVM stands for Model< ->View <-> View Model which supports the 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

public class CommonList  
{  
    public  CommonList(int Id, string Text)  
    {  
        this.Id = Id;  
        this.Text = Text;  
    }  
    public int Id { get; set; }  
    public string Text { get; set; }  
}   

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

public class ListsitemsController : ApiController  
{  
    [HttpGet]  
    [Route("items")]  
    public HttpResponseMessage ListItems()  
    {  
        List<CommonList> _list = new List<CommonList>();  
        _list.Add(new CommonList(1, "India"));  
        _list.Add(new CommonList(2, "China"));  
        _list.Add(new CommonList(3, "United States"));  

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

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:

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>Kendo Dropdownlist MVVM</title>  
    <meta charset="utf-8" />  
    <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">  
    <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">  
    <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">  
    <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">  
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
    <script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/angular.min.js"></script>  
    <script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/jszip.min.js"></script>  
    <script src="http://kendo.cdn.telerik.com/2remote-binding-of-kendo-dropdownlist-with-mvvm-pattern-using16.1.112/js/kendo.all.min.js"></script>  
    <script src="scripts/Core.js"></script>  
    <script src="scripts/Data.js"></script>  
    <script src="scripts/ViewModel.js"></script>  
</head>  
  
<body>  
    <div class="col-lg-12">  
        <div id="Main" class="main"></div>  
    </div>  
    <script type="text/x-kendo-template" id="Layout-temp">  
        <div class="col-lg-12">  
            <div id="content"></div>  
        </div>  
    </script>  
    <script type="text/x-kendo-template" id="Dashboard-temp">  
        <div class="row">  
            <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>  
    </script>  
</body>  
  
</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

(function (G, $, undefined) {  
    $.extend(true, G, {  
        KendoDropdown: {  
            ViewModel: {  
                DashboardModel: new kendo.observable({  
                    Country: '',  
                    country: G.KendoDropdown.Data.CountryList,  
                    
  
                }),  
            }  
        }  
    });  
})(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

(function (G, $, K, undefined) {  
      
    $.extend(true, G, {  
        KendoDropdown: {  
            Data: {  
                CountryList: new kendo.data.DataSource({  
                    transport: {  
                        read: {  
                            type: "GET",  
                            url: "api/list/items",  
                            datatype: "json",  
                        },  
                    },  
                    schema: {  
                        model: {  
                            id: "Id",  
                            fields: {  
                                "Text": "Text",  
                                 
                                  
                            }  
                              
                        }  
                    }  
                }),  
  
            }  
        }  
    });  
})(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.

$(function () {  
    var Layout = new kendo.Layout("Layout-temp");  
    var DashboardView = new kendo.View("Dashboard-temp", { model: Gni.KendoDropdown.ViewModel.DashboardModel });  
    var router = new kendo.Router({  
        init: function () {  
            Layout.render("#Main");  
            Layout.showIn("#content", DashboardView);  
            
             
        }  
    });  
    router.start();  
});  

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 :





About List