C# 在mvc中加载2个下拉列表的更好方法

这是我在页面加载状态和城市下拉列表中加载的方式：

我的控制器方法：

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

这是加载页面时调用的第一个方法

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

public ActionResult Index（）
{
var states=GetStates（）；
var cities=Enumerable.Empty（）；
ViewBag.States=状态；
城市=城市；
}
私有IEnumerable getState（）
{
使用（var db=new DataEntities（））
{
返回db.States.Select（d=>newselectListItem{Text=d.StateName，Value=d.Id.ToString（）}）；
}
}
[HttpGet]
公共行动结果GetCities（int id）
{
使用（var db=new DataEntities（））
{
var data=db.Cities.Where（d=>d.StateId==id）.Select（d=>new{Text=d.CityName，Value=d.id}）.ToList（）；
返回Json（数据，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);
                }
            });
        }

IEnumerable States=ViewBag.States；
IEnumerable Cities=ViewBag.Cities；
@DropDownList（“State”，States，“Select State”，new{onchange=“loadCities（this）”}）
@DropDownListFor（m=>m.CityId，城市，“选择城市”，新建{id=“ddlCity”}）
功能加载城市（obj）{
$.ajax({
url:“/Home/GetCities”，
数据：{id:$（obj.val（）}，
contentType:“应用程序/json”，
成功：函数（响应）{
var html='选择城市'；
$（响应）。每个（函数（）{
html+=''+此.Text+''
});
$（“#ddlCity”）.html（html）；
}
});
}

有没有更好的方法来加载州和城市下拉列表

public class HomeController : Controller
    {
        public ActionResult Index(int id=0)
        {
            Person model = null;
            var states = GetStates().ToList();
            var cities =  Enumerable.Empty<SelectListItem>();
            if (id > 0)
            {
                using (var db = new  DataEntities())
                {
                    model = db.People.Include("City").FirstOrDefault(d => d.Id == id);
                    if (model == null)
                        model = new Person();
                    else
                    {
                       states.First(d => d.Value == model.City.StateId.ToString()).Selected = true;
                       cities = db.Cities.Where(d => d.StateId == model.City.StateId).ToList().Select(d => new SelectListItem { Text = d.CityName,Value=d.Id.ToString(),Selected=d.Id==model.CityId });
                    }

                }
            }
            else
            {
                model = new Person();
            }
            ViewBag.States = states;
            ViewBag.Cities = cities;
            ViewBag.Persons = GetPersons();
            return View(model);
        }

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

        public ActionResult SavePersonDetail([Bind(Exclude = "Id")] Person model)
        {

            // var employeeDal= new Emploee();
            //employee.firstname=model.

            if (ModelState.IsValid)
            {
                var Id = model.Id;
                int.TryParse(Request["Id"], out Id);
            using (var db = new DataEntities())
            {
                if (Id > 0)
                {
                    var person = db.People.FirstOrDefault(d => d.Id == Id);
                    if (person != null)
                    {
                        model.Id = Id;
                        db.People.ApplyCurrentValues(model);
                    }
                }
                else
                {
                    db.People.AddObject(model);                    
                }
                db.SaveChanges();
                }               
            }
            if (!Request.IsAjaxRequest())
            {
                ViewBag.States = GetStates();
                ViewBag.Persons = GetPersons();
                ViewBag.Cities = Enumerable.Empty<SelectListItem>();
                return View("Index");
            }
            else
            {
                return PartialView("_personDetail",GetPersons());
            }
        }

        public ActionResult Delete(int id)
        {
            using (var db = new DataEntities())
            {
                var model = db.People.FirstOrDefault(d => d.Id == id);
                if (model != null)
                {
                    db.People.DeleteObject(model);
                    db.SaveChanges();
                }                
            }
            if (Request.IsAjaxRequest())
            {
                return Content(id.ToString());
            }
            else
            {
                ViewBag.States = GetStates();
                ViewBag.Persons = GetPersons();
                ViewBag.Cities = Enumerable.Empty<SelectListItem>();
                return View("Index");
            }
        }

        private IEnumerable<SelectListItem> GetStates()
        {
            using (var db = new DataEntities())
            {
               return db.States.ToList().Select(d => new SelectListItem { Text = d.StateName, Value =d.Id.ToString() });
            }
        }

        private IEnumerable<Person> GetPersons()
        {
            using (var db = new DataEntities())
            {
                return db.People.Include("City").Include("City.State").ToList();
            }
        }

        public ActionResult HomeAjax()
        {
            ViewBag.States = GetStates();
            ViewBag.Cities = Enumerable.Empty<SelectListItem>();
            using (var db = new DataEntities())
            {
                var data = db.States.Include("Cities").Select(d => new { Id = d.Id, Name = d.StateName, Cities = d.Cities.Select(x => new { Id=x.Id,Name=x.CityName}) }).ToList();
                ViewBag.CityStateJson = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(data);
            }
            ViewBag.Persons = GetPersons();
            return View();
        }
    }


@model IEnumerable<Person>
<div>
    <table>
        <tr>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Email
            </th>
            <th>
                City
            </th>
            <th>
                State
            </th>
            <th>
                Edit
            </th>
        </tr>
    @if (Model.Count() == 0)
    {
        <tr>
            <td colspan="6">
                <h3>No data available</h3>
            </td>
        </tr>
    }
    else { 
    foreach (var item in Model) { 
        <tr data-id="@item.Id">
            <td data-id="fn">@item.FirstName</td>
            <td data-id="ln">@item.LastName</td>
            <td data-id="email">@item.Email</td>
            <td data-id="cn">@item.CityName<input type="hidden" value="@item.CityId" /></td>
            <td>@item.StateName</td>
            <td>
                @if (ViewBag.Title == "Home Ajax" || Request.IsAjaxRequest())
                {
                    <a href="javascript:void(0);" onclick="Edit(this,@item.Id);">Update</a>
                    <span>@Ajax.ActionLink("Delete", "Delete", new { id = item.Id }, new AjaxOptions {OnSuccess="deleteSuccess",OnBegin="showLoader",OnComplete="hideLoader" })</span>

                }
                else { 
                    <span>@Html.ActionLink("Update", "Index", new { id = item.Id })</span>
                    <span>@Html.ActionLink("Delete", "Delete", new { id = item.Id })</span>
                }

            </td>
        </tr>
    }

    }
        </table>
</div>

@model Person

@{
    ViewBag.Title = "Home Ajax";
    IEnumerable<Person> persons = ViewBag.Persons;
    IEnumerable<SelectListItem> States = ViewBag.States;
    IEnumerable<SelectListItem> Cities = ViewBag.Cities;
    IEnumerable<State> fullStates=ViewBag.CityStates;

}

@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>                
            </hgroup>            
        </div>
    </section>
}

@section styles{
    <style type="text/css">
       td,th {
            border:1px solid;
            padding:5px 10px;
        }

        select {
           padding:5px 2px;
           width:310px;
           font-size:16px;
        }
    </style>
}

@section scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">

        var jsonArray = @Html.Raw(ViewBag.CityStateJson)

        function clearValues() {
            $("input[type='text'],select").val('');
            $("input[type='hidden'][name='Id']").val(0);
        }

        function loadCities(obj) {

            for (var i = 0; i < jsonArray.length; i++) {
                if (jsonArray[i].Id == parseInt($(obj).val())) {
                    fillCity(jsonArray[i].Cities);
                    break;
                }
            }
        }

        function Edit(obj, Id) {
            //  alert("hi")
            $("input[type='hidden'][name='Id']").val(Id);
            var tr = $(obj).closest("tr");
            $("#txtfirstName").val($("td[data-id='fn']", tr).text().trim());
            $("#txtlastName").val($("td[data-id='ln']", tr).text().trim());
            $("#txtemail").val($("td[data-id='email']", tr).text().trim());
            var city = $("td[data-id='cn'] input[type='hidden']", tr).val();
            var state;
            for (var i = 0; i < jsonArray.length; i++) {
                for (var j = 0; j < jsonArray[i].Cities.length; j++) {
                    if (jsonArray[i].Cities[j].Id == parseInt(city)) {
                        state = jsonArray[i].Id;
                        break;
                    }
                }
                if (state) {
                    fillCity(jsonArray[i].Cities);
                    break;
                }
            }
            $("#ddlState").val(state);
            $("#ddlCity").val(city);
        }

        function fillCity(obj) {
            var html = '<option value="0">Select City</option>';
            $(obj).each(function () {
                html += '<option value="' + this.Id + '">' + this.Name + '</option>'
            });
            $("#ddlCity").html(html);
        }

        function deleteSuccess(responce) {
            alert("record deleted successfully");
            $("tr[data-id='" + responce + "']").remove();
        }

        function insertSuccess() {
            alert("Record saved successfully");
            clearValues();
        }

        function showLoader() {
            $("#overlay").show();
        }
        function hideLoader() {
            $("#overlay").hide();
        }
    </script>
}

<h3>Add Personal Detail</h3>
@using (Ajax.BeginForm("SavePersonDetail", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "personList" ,OnSuccess="insertSuccess",OnBegin="showLoader",OnComplete="hideLoader"}))
{
    @Html.HiddenFor(m => m.Id);
<ol class="round">
    <li>       
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName, new { id = "txtfirstName" })
        @Html.ValidationMessageFor(m => m.FirstName)
    </li>
    <li>
    @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName, new { id = "txtlastName" })
        @Html.ValidationMessageFor(m => m.LastName)
        </li>
    <li>
       @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email, new { id = "txtemail" })
        @Html.ValidationMessageFor(m => m.Email)
    </li>

    <li>
        @Html.Label("State")
       @Html.DropDownList("State", States, "Select State", new { onchange = "loadCities(this)", id = "ddlState" })       
    </li>
    <li>
         @Html.LabelFor(m => m.CityId)
        @Html.DropDownListFor(m => m.CityId, Cities, "Select City", new { id = "ddlCity" })
        @Html.ValidationMessageFor(m => m.CityId)
    </li>
</ol>
    <input type="submit" value="Save" />
    <input type="button" value="Cancel" onclick="clearValues();"/>
}

   <h2>
        Person List
    </h2>
<div style="position:fixed;text-align:center;top:0;bottom:0;left:0;right:0;z-index:10;background-color:black;opacity:0.6;display:none;" id="overlay">
    <img style="position:relative;top:370px" src="~/Images/ajax-loader.gif" />
</div>
<div id="personList">
    @Html.Partial("_personDetail", persons)
    </div>

公共类HomeController:控制器
{
公共操作结果索引（int id=0）
{
人员模型=空；
var states=GetStates（）.ToList（）；
var cities=Enumerable.Empty（）；
如果（id>0）
{
使用（var db=new DataEntities（））
{
model=db.People.Include（“城市”）.FirstOrDefault（d=>d.Id==Id）；
if（model==null）
模特=新人（）；
其他的
{
states.First（d=>d.Value==model.City.StateId.ToString（））.Selected=true；
cities=db.cities.Where（d=>d.StateId==model.City.StateId）.ToList（）.Select（d=>newselectListItem{Text=d.CityName，Value=d.Id.ToString（），Selected=d.Id==model.CityId}）；
}
}
}
其他的
{
模特=新人（）；
}
ViewBag.States=状态；
城市=城市；
ViewBag.Persons=GetPersons（）；
返回视图（模型）；
}
[HttpGet]
公共行动结果GetCities（int id）
{
使用（var db=new DataEntities（））
{
var data=db.Cities.Where（d=>d.StateId==id）.Select（d=>new{Text=d.CityName，Value=d.id}）.ToList（）；
返回Json（数据，JsonRequestBehavior.AllowGet）；
}
}
public ActionResult SavePersonDetail（[Bind（Exclude=“Id”）]个人模型）
{
//var employeeDal=新员工（）；
//employee.firstname=model。
if（ModelState.IsValid）
{
var Id=model.Id；
int.TryParse（请求[“Id”]，输出Id）；
使用（var db=new DataEntities（））
{
如果（Id>0）
{
var person=db.People.FirstOrDefault（d=>d.Id==Id）；
if（person！=null）
{
model.Id=Id；
db.People.ApplyCurrentValues（模型）；
}
}
其他的
{
db.People.AddObject（模型）；
}
db.SaveChanges（）；
}               
}
如果（！Request.IsAjaxRequest（））
{
ViewBag.States=GetStates（）；
ViewBag.Persons=GetPersons（）；
ViewBag.Cities=Enumerable.Empty（）；
返回视图（“索引”）；
}
其他的
{
返回PartialView（“_personDetail”，GetPersons（））；
}
}
公共操作结果删除（int id）
{
使用（var db=new DataEntities（））
{
var model=db.People.FirstOrDefault（d=>d.Id==Id）；
如果（型号！=null）
{
db.People.DeleteObject（模型）；
db.SaveChanges（）；
}                
}
if（Request.IsAjaxRequest（））
{
返回内容（id.ToString（））；
}
其他的
{
ViewBag.States=GetStates（）；
ViewBag.Persons=GetPersons（）；
ViewBag.Cities=Enumerable.Empty（）；
返回视图（“索引”）；
}
}
私有IEnumerable getState（）
{
使用（var db=new DataEntities（））
{
返回db.States.ToList（）.Select（d=>newselectListItem{Text=d.StateName，Value=d.Id.ToString（）}）；
}
}
私人IEnumerable GetPersons（）
{
使用（var db=new DataEntities（））
{
return db.People.Include（“City”）.Include（“City.State”）.ToList（）；
}
}
公共行动结果HomeAjax（）
{
ViewBag.States=GetStates（）；
ViewBag.Cities=Enumerable.Empty（）；
使用（var db=new DataEntities（））
{
var data=db.States.Include（“Cities”）.Select（d=>new{Id=
    <select data-bind="options:cities,optionsValue:"Id",optionsText:"CityName",optionsCaption:"Select City""></select>

@Html.DropDownListFor(m => m.CityId, Cities, "Select City", new { id="ddlCity",data_bind:"options:cities,optionsValue:\"Id\",optionsText:\"CityName\""})

@Html.DropDownList("State", States, "Select State", new {data_bind:"event:\"change\":\"$root.GetCities\""})

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

public ActionResult Index()
{
  Dictionary<string, List<String>> statesAndCities = GetStatesAndCities();
  ViewBag.StatesAndCities = Json(statesAndCities);
}

var states = JSON.parse(@ViewBag.StatesAndCities);

function loadCities(obj) {
    var cities = states[$(obj).val()];
    var html = '<option value="0">Select City</option>';
    $(cities).each(function () {
        html += '<option value="'+this.Value+'">'+this.Text+'</option>'
    });
    $("#ddlCity").html(html);
}

@Html.DropDownList(m => m.StateID, States, "Select State") // remove the onchange
@Html.DropDownListFor(m => m.CityID, Cities, "Select City") // why change the default ID?

var url = '@Url.Action("GetCities", "Home")'; // use the helper (dont hard code)
var cities = $('#CityID'); // cache the element
$('#StateID').change(function() {
  $.getJSON(url, { id: $(this).val() }, function(response) {
    // clear and add default (null) option
    cities.empty().append($('<option></option>').val('').text('Please select'));
    $.each(response, function(index, item) {
      cities.append($('<option></option>').val(item.Value).text(item.Text));
    });
  });
});

var cache = {};
$('#StateID').change(function() {
  var selectedState = $(this).val();
  if (cache[selectedState]) {
    // render the options from the cache
  } else {
    $.getJSON(url, { id: selectedState }, function(response) {
      // add to cache
      cache[selectedState] = response;
      .....
    });
  }
});

model.CityList = db.Cities.Select(d => new { City = d.CountryID, Text = d.CityName, Value = d.Id }).ToList();

// assign all cities to javascript array
var allCities= JSON.parse('@Html.Raw(Json.Encode(Model.CityList))');
$('#StateID').change(function() {
  var selectedState = $(this).val();
  var cities = $.grep(allCities, function(item, index) {
    return item.CountryID == selectedState;
  });
  // build options based on value of cities
});