獲取下拉列表城市狀態後，顯示選擇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

您需要在變遷使用JQuery行動狀態DropDownList。將值發送到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); 
    } 

你可以打電話給你的動作類內使用JSON發送。

祝你好運。