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

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

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

[RoutePrefix("api/list")]
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"));
List<CommonList> _list1 = new List<CommonList>();
_list1.Add(new CommonList(1, "TamilNadu"));
_list1.Add(new CommonList(2, "Karnataka"));
_list1.Add(new CommonList(3, "NewYork"));
return this.JsonResponse(
new
{
CountryList = _list,
StateList = _list1,
});
}
public HttpResponseMessage JsonResponse(object response, HttpStatusCode httpStatusCode = HttpStatusCode.OK)
{
return Request.CreateResponse(httpStatusCode, response, Configuration.Formatters.JsonFormatter);
}
}

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:

<!DOCTYPE html>
<html>
<head>
<title>Kendo Dropdownlist MVVM</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.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/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.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:state,value:State"
data-text-field="Text" data-value-field="Id" data-option-label="--Select State--"
style="width:50%" />
<br />
<br />
<br />
<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:50%" />
</div>
</script>
</body>
</html>

Creating a JavaScript files

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) {
4. $.extend(true, G, {
5. KendoDropdown: {
6. ViewModel: {
7. DashboardModel: new kendo.observable({
8. Country: '',
9. country: [],
10. state: [],
11. State: '',
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);
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. List: new K.data.DataSource({
7. data: {},
8. transport: {
9. read: {
10. url: 'api/list/items',
11. type: 'get',
12. dataType: 'json',
14. }
15. },
16. schema: {
17. data: function (response) {
18. return [response]; // create an array from the response
19. }
20. },
21. error: function (e) {
23. alert(error);
24. },
25. requestEnd: function (e) {
26. G.KendoDropdown.ViewModel.UpdateList(e.response);
27. }
28. }),
29. Load: function () {
30. this.List.read();
32. },
33. }
34. }
35. });
36. })(window.Gni = window.Gni || {}, jQuery, kendo);
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);
9. }
10. });
11. router.start();
12. Gni.KendoDropdown.Data.Load();
13. });