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.

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>
  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>
  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>
  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,
  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) {
  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",
  21. }
  23. }
  24. }
  25. }),
  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);
  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: