asp.net-mvc – 填写下拉列表中选择另一个下拉列表

我正在使用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 GetCityByStaeId(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,CityName = "City1-2" });
            objcity.Add(new City { Id = 5,CityName = "City1-3" });
            objcity.Add(new City { Id = 6,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/GetCityByStaeId/";

        $.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,"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 />
  }