在MVC中加载2下拉列表的更好方法

Question

在MVC中加载2下拉列表的更好方法以下是我如何加载页面加载状态和城市下拉列表：我的控制器方法:这是加载页面时调用的第一个方法。public ActionResult Index(){     var states = GetStates();     var cities =  Enumerable.Empty<SelectListItem>();     ViewBag.States = states;     ViewBag.Cities = cities;}private IEnumerable<SelectListItem> GetStates(){     using (var db = new DataEntities())     {         return db.States.Select(d => new SelectListItem { Text = d.StateName, Value =d.Id.ToString() });     }}[HttpGet]public ActionResult GetCities(int id){     using (var db = new DataEntities())     {         var data = db.Cities.Where(d=>d.StateId==id).Select(d => new { Text = d.CityName, Value = d.Id }).ToList();         return Json(data, JsonRequestBehavior.AllowGet);     }}我的观点:IEnumerable<SelectListItem> States = ViewBag.States;IEnumerable<SelectListItem> Cities = ViewBag.Cities; @Html.DropDownList("State", States, "Select State", new { onchange="loadCities(this)"})@Html.DropDownListFor(m => m.CityId, Cities,  "Select City", new { id="ddlCity"})function loadCities(obj) {             $.ajax({                 url: "/Home/GetCities",                 data: { id: $(obj).val() },                 contentType:"application/json",                 success:function(responce){                                        var html = '<option value="0">Select City</option>';                     $(responce).each(function () {                         html += '<option value="'+this.Value+'">'+this.Text+'</option>'                     });                     $("#ddlCity").html(html);                 }             });         }

Answer 1

这是一种正确的方法，但您可以简化javascript：

function loadCities(obj) {
    $.getJSON("/Home/GetCities", function (data) {
        var html = '<option value="0">Select City</option>';
        $(data).each(function () {
              html += '<option value="'+this.Value+'">'+this.Text+'</option>'
        });
        $("#ddlCity").html(html);
    });}

进一步简化：添加默认项(SelectCity)服务器端，这样您的javascript就会更小。