在選擇另一個下拉列表時填寫下拉列表[關閉]

我正在使用 MVC，但我仍然是 MVC 的新手。誰能告訴我您是否可以在下拉列表中填寫有關選擇另一個下拉列表的數據。

我想使用 Jquery 來避免回發，從而使頁面更流暢。

模型：

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; }
   }
}   

控制器：

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;
       }

看法：

@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 />
 }

引用自：https://stackoverflow.com/questions/17013644