c# - How to populate a drop down list based on another drop down list selected value in MVC 4? -

i have referred this ans of stackoverflow working fine since have taken drop down list in forms when second dropdown list gets populate selected value in first dropdown list getting effected. how maintain value??

here code.

view

@{ html.beginform("create", "user", formmethod.post, new { enctype = "multipart/form-data" }); } @html.dropdownlist("country", viewdata["id"] list<selectlistitem>, new { onchange = "this.form.submit();" }) @{ html.endform(); }   @{ html.beginform("create", "user", formmethod.post, new { enctype = "multipart/form-data" }); } @html.dropdownlist("state", viewdata["id1"] list<selectlistitem>, new { onchange = "this.form.submit();" }) @{ html.endform(); }   @{ html.beginform("create", "user", formmethod.post, new { enctype = "multipart/form-data" }); } @html.dropdownlist("city", viewdata["id2"] list<selectlistitem>, new { onchange = "this.form.submit();" }) @{ html.endform(); } 

controller

 public actionresult create()     {         fillcountry();         fillstate();         fillcity();         return view();     }     [httppost]     public actionresult create(user ur)     {         string str = @"data source=dev_3\sqlexpress;initial catalog=db_naved_test;integrated security=true";         sqlconnection con = new sqlconnection(str);         string query = "insert tbltest (name,email,mobileno) values('" + ur.name + "','" + ur.email + "','" + ur.mobileno + "')";         con.open();         sqlcommand cmd = new sqlcommand(query, con);         cmd.executenonquery();         con.close();         tempdata["msg"] = "<script>alert('inserted successfully');</script>";         modelstate.clear();         fillcountry();         fillstate();         fillcity();         return view();       }     public void fillcountry()     {         string str = @"data source=dev_3\sqlexpress;initial catalog=db_naved_test;integrated security=true";         sqlconnection con = new sqlconnection(str);         string query = "select * tblcountry ";         sqlcommand cmd = new sqlcommand(query, con);         con.open();         sqldatareader rdr = cmd.executereader();         list<selectlistitem> li = new list<selectlistitem>();         li.add(new selectlistitem { text = "select", value = "0" });         while (rdr.read())         {             li.add(new selectlistitem { text = rdr[1].tostring(), value = rdr[0].tostring() });         }          viewdata["id"] = li;      }     public void fillstate()     {         int id = convert.toint16(request["country"]);         string str = @"data source=dev_3\sqlexpress;initial catalog=db_naved_test;integrated security=true";         sqlconnection con = new sqlconnection(str);         string query = "select * tblstate cid='" + id + "'";         sqlcommand cmd = new sqlcommand(query, con);         con.open();         sqldatareader rdr = cmd.executereader();         list<selectlistitem> li = new list<selectlistitem>();         li.add(new selectlistitem { text = "select", value = "0" });         while (rdr.read())         {             li.add(new selectlistitem { text = rdr[1].tostring(), value = rdr[0].tostring() });         }         viewdata["id1"] = li;     }     public void fillcity()     {         int id = convert.toint16(request["state"]);         string str = @"data source=dev_3\sqlexpress;initial catalog=db_naved_test;integrated security=true";         sqlconnection con = new sqlconnection(str);         string query = "select * tbl_cities stateid='" + id + "'";         sqlcommand cmd = new sqlcommand(query, con);         con.open();         sqldatareader rdr = cmd.executereader();         list<selectlistitem> li = new list<selectlistitem>();         li.add(new selectlistitem { text = "select", value = "0" });         while (rdr.read())         {             li.add(new selectlistitem { text = rdr[1].tostring(), value = rdr[0].tostring() });         }         viewdata["id2"] = li;     } 

and when using 2 dropdownlist i.e ddlcountry , ddlstate , select country ddlcountry ddlsates geting populated selected country ddlcountry getting changed

did , working perfect

controller

public actionresult index()     {         string str = @"data source=dev_3\sqlexpress;initial catalog=db_naved_test;integrated security=true";         sqlconnection con = new sqlconnection(str);         string query = "select * tbl_country ";         sqlcommand cmd = new sqlcommand(query, con);         con.open();         sqldatareader rdr = cmd.executereader();         list<selectlistitem> li = new list<selectlistitem>();         while (rdr.read())         {             li.add(new selectlistitem { text = rdr[1].tostring(), value = rdr[0].tostring() });         }         viewdata["country"] = li;         return view();     }     public jsonresult statelist(int id)     {         string str = @"data source=dev_3\sqlexpress;initial catalog=db_naved_test;integrated security=true";         sqlconnection con = new sqlconnection(str);         string query = "select * tbl_states cid='" + id + "'";         sqlcommand cmd = new sqlcommand(query, con);         con.open();         sqldatareader rdr = cmd.executereader();         list<selectlistitem> li = new list<selectlistitem>();         while (rdr.read())         {             li.add(new selectlistitem { text = rdr[1].tostring(), value = rdr[0].tostring() });         }         return json(li, jsonrequestbehavior.allowget);     }     public jsonresult citylist(int id)     {         string str = @"data source=dev_3\sqlexpress;initial catalog=db_naved_test;integrated security=true";         sqlconnection con = new sqlconnection(str);         string query = "select * tbl_cities stateid='" + id + "'";         sqlcommand cmd = new sqlcommand(query, con);         con.open();         sqldatareader rdr = cmd.executereader();         list<selectlistitem> li = new list<selectlistitem>();         while (rdr.read())         {             li.add(new selectlistitem { text = rdr[1].tostring(), value = rdr[0].tostring() });         }         return json(li, jsonrequestbehavior.allowget);     } 

view

@using (html.beginform()) { @html.dropdownlist("country", viewdata["country"] selectlist, "select country", new { id = "country", style = "width: 150px;" })<br /> <select id="state" name="state" , style="width: 150px;"></select><br /> <select id="city" name="city" , style="width: 150px;"></select><br /> } @scripts.render("~/bundles/jquery") <script type="text/jscript"> $(function () {     $('#country').change(function ()     {                 $.getjson('/cascading/statelist/' + $('#country').val(), function (data)         {             var items = '<option>select state</option>';             $.each(data, function (i, state)             {                 items += "<option value='" + state.value + "'>" + state.text + "</option>";             });             $('#state').html(items);         });     });      $('#state').change(function ()     {         $.getjson('/cascading/citylist/' + $('#state').val(), function (data)         {             var items = '<option>select city</option>';             $.each(data, function (i, city)             {                 items += "<option value='" + city.value + "'>" + city.text + "</option>";             });             $('#city').html(items);         });     }); });