选择状态后显示下拉城市列表 ASP MVC5

Question

我觉得我有一个可行的想法，但是在构建应用程序时出现“对象引用未设置为对象的实例”错误。我只是想在选择州后显示城市的下拉列表。我有一个单独的类中的状态列表，我将其用于表单中的下拉列表。我正在尝试做的是获取所选状态并将其作为参数传递给不同的类，以便选择正确的城市列表以显示为另一个下拉列表。因此，如果有人选择华盛顿州，那么西雅图和塔科马等城市就会出现，而不是来自不同州的城市。这是下拉菜单的剃须刀（状态正常）：

<div class="form-group">
            @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.State, WebGridProject.Models.StateCodes.GetStatesList(), new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.City, WebGridProject.Models.CityNames.GetStateCities(Model.State), new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
            </div>
        </div>

这里是城市类：

   public class CityNames
    {
        public static IEnumerable<SelectListItem> GetStateCities(string stateName)
        {

            IList<SelectListItem> cities = new List<SelectListItem>();

            switch (stateName)
            {
                case "AK":
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Anchorage", Value = "Anchorage"},
                        new SelectListItem() {Text = "Fairbanks", Value = "Fairbanks"},
                    };
                    break;
                case "AL":
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Auburn", Value = "Auburn"},
                        new SelectListItem() {Text = "Birmingham", Value = "Birmingham"},
                        new SelectListItem() {Text = "Dothan", Value = "Dothan"},
                        new SelectListItem() {Text = "Mobile", Value = "Mobile"},
                    };
                    break;
                case "AZ":
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Pheonix", Value = "Pheonix"},
                        new SelectListItem() {Text = "Flagstaff", Value = "Flagstaff"},
                        new SelectListItem() {Text = "Prescott", Value = "Prescott"},
                        new SelectListItem() {Text = "Tucson", Value = "Tucson"},
                    };
                    break;
                case "AR":
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Fayetteville", Value = "Fayetteville"},
                        new SelectListItem() {Text = "Fort smith", Value = "Fort smith"},
                        new SelectListItem() {Text = "Jonesboro", Value = "Jonesboro"},
                        new SelectListItem() {Text = "Texarkana", Value = "Texarkana"},
                    };
                    break;
                default:
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Please Select State", Value = "Please Select State"},
                    };
                    break;
            }
            return cities;
        }
    }

对我来说，错误似乎指向没有默认值并且加载空值时出现问题。但是我在 switch 语句中有一个默认情况来解决这个问题。我对 MVC 很陌生，我将继续自己做这件事。但是，如果有人有任何想法，我会全神贯注，因为我正在努力解决这个问题。仅供参考，状态类也是返回状态名称列表的 IList。

要求发布行动：

public ActionResult MyHomePage()
        {
            return View();
        }
        //Post method
        [HttpPost]
        public ActionResult MyHomePage(WebGridTable TWG)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    UserManager UM = new UserManager();
                    UM.addNewUser(TWG);
                    ModelState.Clear();
                    return View();
                }
                return View();
            }
            catch (Exception e)
            {
                return View("Error");
            }
        }

如果没有我为管理表单而编写的方法，操作实际上并没有任何意义：

public void addNewUser(WebGridTable AddNew)
        {
            using (WebGridDBEntities4 db = new WebGridDBEntities4())
            {
                WebGridTable TWG = new WebGridTable();
                TWG.Name = AddNew.Name;
                TWG.DOB = AddNew.DOB;
                TWG.AddressLine1 = AddNew.AddressLine1;

                // TO DO: Figure out issue with accepting null value into database.
                if (AddNew.AddressLine2 != null)
                {
                    TWG.AddressLine2 = AddNew.AddressLine2;
                }
                else if (AddNew.AddressLine2 == null)
                {
                    TWG.AddressLine2 = 0;
                }

                TWG.State = AddNew.State;
                TWG.City = TWG.City;
                TWG.Zip = AddNew.Zip;
                TWG.Gender = AddNew.Gender;

                db.WebGridTables.Add(TWG);
                db.SaveChanges();
            }
        }

Answer 1

您需要对 Changes of the States DropDownList 使用 JQuery 操作。将值发送到 Controller 中的特定 Action 并在其中调用 States.GetStatesName('Value') 。检查下面的代码。我认为这会有所帮助。

$("#State").on('change',function () {
    var loadingoption = $('<option></option>').text("Pleas Wait");
    $('#city').attr("disabled","disabled").empty().append(loadingoption);

    jQuery.getJSON("/Home/CityJson/" + $("#State > option:selected").attr("value"), function (data) {
        var defaultoption = $('<option value="">Please choose a City</option>');
        $('#city').removeAttr("disabled").empty().append(defaultoption);
        jQuery.each(data, function (i) {
            var option2 = $('<option></option>').attr("value", data[i].Name).text(data[i].Name);
            $("#city").append(option2);
        });
    });
});

我在 HomeController 中使用了 ActionResult "CityJson"。所以在 getJSON 中选择你的 Action。

这里是控制器：

public ActionResult CityJson(string id)
    {
        var state = db.States.FirstOrDefault(x => x.Name == id);
        var model = db.Cities.Where(x => x.StateId == state.Id).Select(x => new { x.Name }).ToList();
        return Json(model, JsonRequestBehavior.AllowGet);
    }

您可以在 Class 中调用您的操作并使用 Json 发送它们。

祝你好运。