How to fill second drop down on the click of first drop down in mvc 3

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) {
            // fill your select box here with returned data...see 'fillSelect' method below
            $("#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)
{
    // Some data access method, gets a generic List<state> ??
    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

// Jquery extensions
$.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);
                }
            });
        }
    });
}
// End Jquery extensions