Post
Ask Question

Cascading Dropdown List in Kendo UI Using WEB API and Entity Framework

This article explains how to crete a cascading dropdownlist in the Kendo UI using the Web API and Entity Framework with the Database First approach.

  • Open Visual Studio 2012, create a new project.
  • Select File, New and then Project.
  • Select Web in the installed template and select ASP.NET Web Application.
  • Provide the name for the project and click OK, as in the following figures.


My database schema is as in the following figure:



My table structure is as in the following figure:



I am using the Entity Framework with Database First approach, so the Entity Framework builds default model classes and context classes.

Create a data transfer object model class.

Write the following code in the new model class:
  1. public class Country   
  2. {  
  3.     public int CountryId   
  4.     {  
  5.         get;  
  6.         set;  
  7.     }  
  8.     public string CountryName   
  9.     {  
  10.         get;  
  11.         set;  
  12.     }  
  13. }  
  14. public class State   
  15. {  
  16.     public int StateId   
  17.     {  
  18.         get;  
  19.         set;  
  20.     }  
  21.     public int CountryId   
  22.     {  
  23.         get;  
  24.         set;  
  25.     }  
  26.     public string StateName   
  27.     {  
  28.         get;  
  29.         set;  
  30.     }  
  31. }  
  32. public class City   
  33. {  
  34.     public int StateId   
  35.     {  
  36.         get;  
  37.         set;  
  38.     }  
  39.     public int CityId   
  40.     {  
  41.         get;  
  42.         set;  
  43.     }  
  44.     public string CityName   
  45.     {  
  46.         get;  
  47.         set;  
  48.     }  
  49. } 
Now add one more class to do the conversion and write the following code in the class.
  1. public static List < Country > CountriesToCountry(List < tbl_country > e)   
  2. {  
  3.     List < Country > lstCountry = e.Select(country = > new Country()   
  4.     {  
  5.         CountryId = country.Country_ID, CountryName = country.Country_Name  
  6.     }).ToList();  
  7.     return lstCountry;  
  8. }  
  9. public static List < State > FCountrytoState(List < tbl_state > e)   
  10. {  
  11.     List < State > lstState = e.Select(state = > new State()   
  12.     {  
  13.         StateId = state.State_ID, StateName = state.State_Name  
  14.     }).ToList();  
  15.     return lstState;  
  16. }  
  17. public static List < City > FStatetoCity(List < tbl_city > e)   
  18. {  
  19.     List < City > lstCity = e.Select(city = > new City()   
  20.     {  
  21.         CityId = city.City_ID, CityName = city.City_Name  
  22.     }).ToList();  
  23.     return lstCity;  
  24. } 
Now create a Web API controller class as in the following figure:
 

Write the following code in the new controller class.
  1. public class CascadingController: ApiController   
  2. {  
  3.     testEntities dbcontext1 = new testEntities();  
  4.     public IEnumerable < Country > GetCountries()   
  5.     {  
  6.         var lstCountries = from r in dbcontext1.tbl_country select r;  
  7.         List < Country > lst = new List < Country > ();  
  8.         lst = Converter.CountriesToCountry(lstCountries.ToList());  
  9.         return lst;  
  10.     }  
  11.     [ActionName("GetStates")]  
  12.     public IEnumerable < State > GetStates(int id)   
  13.     {  
  14.         var lstStates = dbcontext1.tbl_state.Where(b = > b.Country_ID == id).ToList();  
  15.         List < State > list = new List < State > ();  
  16.         list = Converter.FCountrytoState(lstStates.ToList());  
  17.         return list;  
  18.     }  
  19.     [ActionName("GetCities")]  
  20.     public IEnumerable < City > GetCities(int id)   
  21.     {  
  22.         var lstCities = dbcontext1.tbl_city.Where(b = > b.State_ID == id).ToList();  
  23.         List < City > list = new List < City > ();  
  24.         list = Converter.FStatetoCity(lstCities.ToList());  
  25.         return list;  
  26.     }  
  27. } 
To avoid the conflict between GetStates and GetCities methods add the following routing configuration in the WebApiConfig class:
  1. config.Routes.MapHttpRoute(  
  2.   
  3.    name: "DefaultApiWithAction",  
  4.    routeTemplate: "api/{controller}/{action}/{id}",   
  5.    defaults: new { id = RouteParameter.Optional }  
  6.   
  7. ); 

Check the API services using the POSTMAN/Fiddler as in the following figures.

Case 1: /api/Cascading/



Case 2: /api/Cascading/GetStates/2



Case 3: /api/Cascading/GetCities/2



Now it's time for creating a design to consume the service.

Create an HTML page, here's the design:

  1. <head>  
  2.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  3.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  6.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  7.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  8.     <title></title>  
  9. </head>  
  10. <body>  
  11.     <div id="example">  
  12.         <div class="demo-section k-header">  
  13.             <h4>Products</h4>  
  14.             <input id="products" style="width: 50%" />  
  15.             <br />  
  16.             <br />  
  17.             <input id="State" disabled="disabled" style="width: 50%" />  
  18.             <br />  
  19.             <br />  
  20.             <input id="City" disabled="disabled" style="width: 50%" />  
  21.         </div>  
  22.     </div>  
  23. </body> 
JavaScript

  1. $(document).ready(function() {  
  2.     $("#State").data("kendoDropDownList")  
  3.   
  4.     function onChange(e) {  
  5.         e.preventDefault();  
  6.         $("#State").kendoDropDownList({  
  7.             enable: true,  
  8.             dataTextField: "StateName",  
  9.             dataValueField: "StateId",  
  10.             optionLabel: "Select State",  
  11.             change: onChangeState,  
  12.             dataSource: {  
  13.                 transport: {  
  14.                     read: {  
  15.                         dataType: "json",  
  16.                         url: "/api/Cascading/GetStates/" + $("#products").val(),  
  17.                     }  
  18.                 }  
  19.             }  
  20.         });  
  21.         var dropdownlist = $("#State").data("kendoDropDownList")  
  22.         dropdownlist.enable();  
  23.     };  
  24.   
  25.     function onChangeState(e) {  
  26.         e.preventDefault();  
  27.         $("#City").kendoDropDownList({  
  28.             dataTextField: "CityName",  
  29.             dataValueField: "CityId",  
  30.             optionLabel: "Select City",  
  31.             dataSource: {  
  32.                 transport: {  
  33.                     read: {  
  34.                         dataType: "json",  
  35.                         url: "/api/Cascading/GetCities/" + $("#State").val(),  
  36.                     }  
  37.                 }  
  38.             }  
  39.         });  
  40.         var dropdownlist = $("#City").data("kendoDropDownList")  
  41.         dropdownlist.enable();  
  42.     };  
  43.     $("#products").kendoDropDownList({  
  44.         dataTextField: "CountryName",  
  45.         dataValueField: "CountryId",  
  46.         optionLabel: "Select Country",  
  47.         change: onChange,  
  48.         dataSource: {  
  49.             transport: {  
  50.                 read: {  
  51.                     dataType: "json",  
  52.                     url: "/api/Cascading",  
  53.                 }  
  54.             }  
  55.         }  
  56.     });  
  57. }); 
The result in browser:
 
  
References


Similar Articles