Cascading dropdown lists in ASP.NET MVC 5

Question

I am wondering if there's some new helper or method introduced in ASP.NET MVC 5 to implement cascading dropdown lists. I know a way to implement cascading dropdownlist behavior in MVC 3 and MVC 4 that is by using a JSON call

http://www.dotnet-tricks.com/Tutorial/mvc/HL53191212-Custom-Validation-for-Cascading-Dropdownlist-in-MVC-Razor.html

So anyone knows a better way to implement cascading dropdownlists in MVC 5?

Solution 1

I know that this is an old question but somebody still may find it useful

I was searching for the same thing but din't find anything stable and useful so I ended up implementing it by myself:

Please take a look at Mvc.CascadeDropDown helper that I created. It works with all MVC versions starting from MVC3 and doesn't require any client side libraries(It uses plain vanilla JavaScript).

The usage is very simple:

@using Mvc.CascadeDropDown

//First simple dropdown 
@Html.DropDownListFor(m=>m.SelectedCountry, Model.Countries,
      "Please select a Country", new {@class="form-control"})

//Dropdown list for SelectedCity property that depends on selection of SelectedCountry property
@Html.CascadingDropDownListFor( 
  expression: m => m.SelectedCity, 
  triggeredByProperty: m => m.SelectedCountry,  //Parent property that trigers dropdown data loading
  url: Url.Action("GetCities", "Home"),  //Url of action that returns dropdown data
  actionParam: "country",   //Parameter name for the selected parent value that url action receives
  optionLabel: "Please select a City", // Option label
  disabledWhenParrentNotSelected: true, //If true, disables dropdown until parrent dropdown selected
  htmlAttributes: new { @class = "form-control" }) //Html attributes

Hopefully it will be helpful for some of you

Solution 2

No, there are no new helpers or methods in MVC 5 to help.

The Ajax HTML helpers have been largely ignored in the update. There are some things that may help with stuff related to this:

1. There is a new @Html.EnumDropDownListFor() HTML helper to populate a dropdown from an Enum.
2. The Attribute routing functionality of the has been improved and now works with the Web API so it is much easier to map URLs to API calls.
3. You can now pass in html attibutes in the EditorFor Html helper @Html.EditorFor(m => m.FieldName, new { htmlAttributes = new { @class = "form-control" } })

I implemented cascading dropdowns last week and used the tried and true JSON call you mentioned. I like to use this jQuery plugin in conjunction with the Web API v2 with the new attribute routing.

Comments

[Diin]

I tried this nugget and getting errors using the default ViewBag,propertyIds. How is this used - say in a create form all values for cascadiing dropdowns ( just 2 levels) are from database?

[Alex Art.]

@Diin, Please open an issue in github.com/alexanderar/Mvc.CascadeDropDown/issues that includes some details about your use-case and about the errors that you having. I'll try to resolve it. I used this helper in production for multiple projects, and so fad didn't experience any issues with it. By the way you can see the usage in github.com/alexanderar/Mvc.CascadeDropDown/tree/master/… project

[Diin]

It is a beautiful thing you have done the sample works very well but I think my problem is how to make it pull data from database which has nothing to do with the functionality. Is there a way I could show you my code - Your code works very well but I am looking at making it work from the default mvc scafolding

[Rajan Mishra]

Hey @AlexArt. what to do if i want to pass more than one ajax paramaetr i have both country id and city id in my parameter list.

[Alex Art.]

Currently library supports only one trigger. One possible solution could be changing value of city dropdown to be combination of countryID_cityID. Then on server simply split the value by _.