This example demonstrates how to use the MVC ComboBox extension to implement cascading combo boxes.
Set up the primary CountryPartial.cshtml and the secondary CityPartial.cshtml combo boxes as partial views, specify their CallbackRouteValues properties, and call the BindList method to bind the data obtained from the controller to the combo boxes.
// Index.cshtml
@Html.Partial("CountryPartial", Model)
@Html.Partial("CityPartial", Model)
// CountryPartial.cshtml
@Html.DevExpress().ComboBox(settings => {
...
settings.CallbackRouteValues = new { Controller = "Home", Action = "CountryPartial" };
settings.Properties.ValueType = typeof(int);
settings.Properties.TextField = "Name";
settings.Properties.ValueField = "ID";
...
}).BindList(CS.Models.Country.GetCountries()).Bind(Model.Country).GetHtml()
// CityPartial.cshtml
@Html.DevExpress().ComboBox(settings => {
...
settings.CallbackRouteValues = new { Controller = "Home", Action = "CityPartial" };
settings.Properties.ValueType = typeof(int);
settings.Properties.TextField = "Name";
settings.Properties.ValueField = "ID";
...
}).BindList(CS.Models.City.GetCities(Model.Country)).Bind(Model.City).GetHtml()Handle the primary combo box's client-side SelectedIndexChanged event. In the event handler, call the client-side PerformCallback method of the secondary combo box. Use the ComboBoxProperties.Name property value to access the combo box.
// CountryPartial.cshtml
@Html.DevExpress().ComboBox(settings => {
settings.Name = "Country";
...
settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e) { City.PerformCallback(); }";
...
// CityPartial.cshtml
@Html.DevExpress().ComboBox(settings => {
settings.Name = "City";
...Handle the secondary combo box's client-side BeginCallback event. In the handler, pass the selected value of the primary combo box as a custom callback parameter. Handle the secondary combo box's CallbackRouteValues.Action method to populate the combo box values based on the passed primary combo box's value.
// CityPartial.cshtml
@Html.DevExpress().ComboBox(settings => {
...
settings.Properties.ClientSideEvents.BeginCallback = "function(s, e) { e.customArgs['Country'] = Country.GetValue(); }";
...
// HomeController.cs
public ActionResult CityPartial() {
int country = (Request.Params["Country"] != null) ? int.Parse(Request.Params["Country"]) : -1;
return PartialView(new Customer { Country = country });
}