You could achieve this using jquery and a call from your view to a JSON action on your controller...
Some jquery in your View..
var url = '@Url.Action("ActionName", "ControllerName")';
$("#Country").change(function () {
$.post(url, { countryId: $(this).val() }, function (data) {
if (data.length > 0) {
$("#States").fillSelect(data, "Name", "Id", "[None]");
}
});
});
Your controller action...get some data from your table into a List (however you've wired data access) and use Select() to return just the Id and Description. I don't know what your state table fields are, I've guessed...!
public JsonResult GetStates(int countryId)
{
var list = SomeDataObject.GetStates(countryId);
var states = list.Select(s => new {Id = s.StateId, Name = s.StateName});
return Json(states);
}</state>
Now, when your #Country drop down list changes index, it will call GetStates and return some JSON to your 'Success' jquery handler. Here are a couple of helpers for clearing \ populating select lists. Just add them into a .js file and include them in your project
$.fn.clearSelect = function () {
return this.each(function () {
if (this.tagName == 'SELECT')
this.options.length = 0;
});
}
$.fn.fillSelect = function (data, text, value, defaultOptionText) {
return this.clearSelect().each(function () {
if (this.tagName == 'SELECT') {
var dropdownList = this;
if (defaultOptionText != null && defaultOptionText.length > 0) {
var option = new Option(defaultOptionText, "");
if ($.browser.msie) {
dropdownList.add(option);
}
else {
dropdownList.add(option, null);
}
}
$.each(data, function (index, optionData) {
var option = new Option(optionData[text], optionData[value]);
if ($.browser.msie) {
dropdownList.add(option);
}
else {
dropdownList.add(option, null);
}
});
}
});
}