Yash Saraiya Yash Saraiya - 1 year ago 190
Ajax Question

Null value multiselect cascading dropdown in MVC

In MVC I have a multiselect dropdown list. On change event i am populating another dropdown, but not able to get multiselect values on the controller below is my code.


@Html.DropDownList("Country", ViewData["country"] as List<SelectListItem>, new {@multiple="multiple", style = "width:250px", @class = "dropdown1" })

Ajax call

<script type="text/javascript">
$(document).ready(function () {

$("#Country").change(function () {

var abc = $("#Country").val();

type: 'POST',
url: '@Url.Action("GetStates")', // we are calling json method
dataType: 'json',
//data: { id: $("#Country").val() },
data: { "CountryId": abc },
cache: false,
success: function (states) {
// states contains the JSON formatted list
// of states passed from the controller
$.each(states, function (i, state) {

$("#State").append('<option value="' + state.Value + '">' + state.Text + '</option>');
}); // here we are adding option for States
error: function (ex) {
alert('Failed to retrieve states.' + ex);
return false;


public JsonResult GetStates(string CountryId)
return null;

But i am getting CountryId as NULL for multi select dropdown case only for normal dropdown i am getting the value.

Is there a work-around for this?

Answer Source

Your generating a <select multiple="multiple"> which posts back an array of values, not a single value.

Because you sending an array in the request, you need to add the traditional: true ajax option

    type: 'POST',
    url: '@Url.Action("GetStates")',
    dataType: 'json',
    data: { countryId: $("#Country").val() },
    traditional: true,

and then change the controller method to accept the array

public JsonResult GetStates(string[] CountryId) // or IEnumerable<string> CountryId

Note this works because if a simple array, but in cases where you might be posting back an array of complex objects, then you would need to use the contentType: 'application/json; charset=utf-8' option and also stringify your data using JSON.stringify({ someProperty: yourComplexArray });

Side note; The correct method for creating a <select multiple> is to use the @Html.ListBoxFor() method, which adds the multiple="multiple" attribute. In this case, it will work, but in other cases, for example, usingDropDownListFor()in a loop to create a`, it will fail to bind correctly, so I recommend you use the correct method.