ComboBox for ASP.NET MVC - How to Implement Cascading Combo Boxes

[Run Online]

This example demonstrates how to use the MVC ComboBox extension to implement cascading combo boxes.

Setup Combo Boxes and Their Items

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()

Respond to a Selection Change and Initiate a Callback

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";
    ...

Filter Data Source Items

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 });
}

Documentation

• MVC ComboBox Extension - How to implement cascaded combo boxes
• Passing Values to a Controller Action through Callbacks
• CallbackRouteValues
• BindList
• SelectedIndexChanged
• PerformCallback
• BeginCallback

Files to Look At

• HomeController.cs
• CityPartial.cshtml
• CountryPartial.cshtml
• Index.cshtml

More Examples

• GridView - How to implement cascaded combo boxes in the EditForm