在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&nbsp;loadCities(obj)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$.getJSON("/Home/GetCities",&nbsp;function&nbsp;(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp;'<option&nbsp;value="0">Select&nbsp;City</option>'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(data).each(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html&nbsp;+=&nbsp;'<option&nbsp;value="'+this.Value+'">'+this.Text+'</option>' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#ddlCity").html(html); &nbsp;&nbsp;&nbsp;&nbsp;});}进一步简化：添加默认项(SelectCity)服务器端，这样您的javascript就会更小。