You have an error on the following line
items += "<option value='" + child.value + "'>" + child.Name + "</option>";
Which should be:
items += "<option value='" + child.Value + "'>" + child.Text + "</option>";
Since your controller action is returning a SelectList
, this class is an IEnumerable<SelectListItem>
where SelectListItem
has 2 properties called Value
and Text
.
There's also another issue with your code. You have used the folllowing to construct the url to your controller action:
URL + '/' + $('#ParentsID').val()
which will result in an url of the form:
/SomeController/Children/123
But the action argument of your Children
action is called parentId
. If you are using the default route setup, only an {id}
parameter will be sent as part og of the uri path (that's the default route pattern: {controller}/{action}/{id}
and not {controller}/{action}/{parentid}
). So you should either change your route setup or pass the parentId parameter like this:
$.getJSON(URL, { parentId: $('#ParentsID').val() }, function (data) {
...
});
Yet another issue with your code is that your Children conrtoller action is decorated with the [HttpPost]
attribute but the $.getJSON
method sends a GET request. So it won't work. You could use the $.post
method instead:
$.post(URL, { parentId: $('#ParentsID').val() }, function (data) {
...
});
Another issue is that you are showing the StatesDivID
but your actual div that was hidden is ChildrenDivId
. Make sure you are showing the proper element:
$('#ChildrenDivId').show();
Also make sure you have the jQuery script referenced before your parentChildren.js
script. Right now you have included your script inside the view but cannot see jQuery being included. Maybe you have it in your _Layout.
I would recommend you using a javascript debugging tool such as FireBug or Chrome developer toolbar to analyze your javascript code.