Drop-Down-Stadt Liste zu zeigen, nachdem Staat ausgewählt ist ASP MVC5

Question

Ich fühle mich wie ich eine funktionierende Idee, aber ich bekomme eine "Objektreferenz nicht auf eine Instanz eines Objekts festgelegt" Fehler beim Erstellen der Anwendung. Ich versuche einfach, eine Dropdown-Liste für Städte anzuzeigen, nachdem die Auswahl für den Bundesstaat getroffen wurde. Ich habe eine Liste von Zuständen in einer separaten Klasse, die ich für eine Dropdown-Liste in einem Formular verwende. Was ich versuche, ist, den ausgewählten Zustand zu nehmen und ihn als Parameter in eine andere Klasse zu übergeben, um die richtige Liste von Städten auszuwählen, die als ein anderes Dropdown angezeigt werden sollen. Wenn also jemand den Bundesstaat Washington auswählt, dann tauchen Städte wie Seattle und Tacoma auf und nicht Städte aus einem anderen Staat. Hier ist der Rasierer für das Dropdown-Menü (der Staat funktioniert gut):

<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> 

Und hier ist die Klasse für die Städte:

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

ich der Fehler schien zu zeigen kein wobei Standard Wert und ein Problem mit dem Laden eines Nullwerts. Aber ich habe einen Standardfall in der switch-Anweisung, um dieses Problem zu behandeln. Ich bin ziemlich neu bei MVC und werde weiter daran arbeiten. Aber wenn jemand irgendwelche Ideen hat, bin ich ganz Ohr, weil ich darum kämpfe, das herauszufinden. Nur zur Information, die states-Klasse ist auch eine IList <>, die die Liste der Zustandsnamen zurückgibt.

Handlungsaufforderung gebucht werden:

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

Aktion tut wirklich alles, ohne die Methode ich meine für die Verwaltung der Form geschrieben:

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

Sie müssen JQuery Aktionen auf Änderungen des verwenden Zeigt DropDownList an. Senden Sie den Wert an eine bestimmte Aktion in Ihrem Controller und rufen Sie dabei Ihren States.GetStatesName ('Value') auf. Überprüfen Sie den Code unten. Ich denke, es würde helfen.

$("#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); 
     }); 
    }); 
}); 

Ich habe ActionResult "CityJson" in meinem HomeController verwendet. Wählen Sie Ihre Aktion in getJSON. Hier

ist der Controller:

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

Sie Ihre Aktionen innerhalb der Klasse aufrufen können und schicken sie Json verwenden.

Viel Glück.