Fill drop down list on selection of another drop down list [closed]

Question

I am using MVC and I am still new with MVC. Can anyone tell me if you can fill a drop down list with data on selection of another drop down list.

I want to use Jquery to avoid postbacks and therefore making the page smoother.

Answer 1

Model:

namespace MvcApplicationrazor.Models {     public class CountryModel     {         public List<State> StateModel { get; set; }         public SelectList FilteredCity { get; set; }     }     public class State     {         public int Id { get; set; }         public string StateName { get; set; }     }     public class City     {         public int Id { get; set; }         public int StateId { get; set; }         public string CityName { get; set; }     } }    

Controller:

public ActionResult Index()         {             CountryModel objcountrymodel = new CountryModel();             objcountrymodel.StateModel = new List<State>();             objcountrymodel.StateModel = GetAllState();             return View(objcountrymodel);         }           //Action result for ajax call         [HttpPost]         public ActionResult GetCityByStateId(int stateid)         {             List<City> objcity = new List<City>();             objcity = GetAllCity().Where(m => m.StateId == stateid).ToList();             SelectList obgcity = new SelectList(objcity, "Id", "CityName", 0);             return Json(obgcity);         }         // Collection for state         public List<State> GetAllState()         {             List<State> objstate = new List<State>();             objstate.Add(new State { Id = 0, StateName = "Select State" });             objstate.Add(new State { Id = 1, StateName = "State 1" });             objstate.Add(new State { Id = 2, StateName = "State 2" });             objstate.Add(new State { Id = 3, StateName = "State 3" });             objstate.Add(new State { Id = 4, StateName = "State 4" });             return objstate;         }         //collection for city         public List<City> GetAllCity()         {             List<City> objcity = new List<City>();             objcity.Add(new City { Id = 1, StateId = 1, CityName = "City1-1" });             objcity.Add(new City { Id = 2, StateId = 2, CityName = "City2-1" });             objcity.Add(new City { Id = 3, StateId = 4, CityName = "City4-1" });             objcity.Add(new City { Id = 4, StateId = 1, CityName = "City1-2" });             objcity.Add(new City { Id = 5, StateId = 1, CityName = "City1-3" });             objcity.Add(new City { Id = 6, StateId = 4, CityName = "City4-2" });             return objcity;         } 

View:

@model MvcApplicationrazor.Models.CountryModel @{     ViewBag.Title = "Index";     Layout = "~/Views/Shared/_Layout.cshtml"; }  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script language="javascript" type="text/javascript">     function GetCity(_stateId) {         var procemessage = "<option value='0'> Please wait...</option>";         $("#ddlcity").html(procemessage).show();         var url = "/Test/GetCityByStateId/";          $.ajax({             url: url,             data: { stateid: _stateId },             cache: false,             type: "POST",             success: function (data) {                 var markup = "<option value='0'>Select City</option>";                 for (var x = 0; x < data.length; x++) {                     markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";                 }                 $("#ddlcity").html(markup).show();             },             error: function (reponse) {                 alert("error : " + reponse);             }         });      } </script> <h4>  MVC Cascading Dropdown List Using Jquery</h4> @using (Html.BeginForm()) {     @Html.DropDownListFor(m => m.StateModel, new SelectList(Model.StateModel, "Id", "StateName"), new { @id = "ddlstate", @style = "width:200px;", @onchange = "javascript:GetCity(this.value);" })     <br />     <br />     <select id="ddlcity" name="ddlcity" style="width: 200px">      </select>      <br /><br />   }