DropDown List Selected Index Change Event In MVC 3 Razor

Question

How to written MVC 3 Razor web application Selected Index Change Event of Drop Down List

Answer 1

You have to write Javascript with ajax as mentioned in the previous answer. However, it can also be as simple as posting the form back to the same action, and capturing the values to re-display the modified view again.

$('#myDropdown').change(function(){
    $('#myForm').submit();
})

Answer 2

$(document).ready(function () {
$("#country").change(function () {
if ($("#country").val() != "0") {
var options = {};
options.url = "/Common/GetStates";
options.type = "POST";
options.data = JSON.stringify({ country: $("#country").val() });
options.dataType = "json";
options.contentType = "application/json";
options.success = function (states) {
//alert(states[i].State);
$("#state").empty();
for (var i = 0; i < states.length; i++) {
$("#state").append("<option>" + states[i].State1 + "</option>");}}
options.error = function () { alert("Error retrieving states!"); };
$.ajax(options);}
else {$("#state").empty();
}});
});

In view

<select id="state">
<option value="0">select</option>
</select>

In Controlr

public JsonResult GetStates(string country){
int cntry = Convert.ToInt32(country);
List<State> states = db.States.Where(i => i.Countryid == cntry).ToList();
return Json(states);}