ajax経由でビューからコントローラへのフォームフィールドの値を渡し、状態の選択に基づいてドロップダウンの都市リストを設定します

Question

州と都市のドロップダウンリストを作成しようとしています。州が選択されると、都市は移住します。私はこれをajaxを使ってやっています。私は書かれたすべてを持っている、私はそれが動作するように感じ、それはもちろんありません。状態のドロップダウンリストは、50のすべての州の列挙可能なリストを含む別のクラスから引き出されます。 2番目のドロップダウンリストとして、コントローラにJsonのデータを返して都市のドロップダウンに移すことを期待して書きました。ここ は私のjQueryとAJAXと一緒にdropdownlistforさんのための私のかみそりである：ここでは

<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 { id = "State", @class = "form-control", @onchange = "FillCity2()" }) 
       @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" }) 
      </div> 
     </div> 


     <script> 
      function FillCity2() { 
       var stateId = $('#State').val(); 
       console.log(stateId); 
       $.ajax({ 
        url: '/Home/FillCity2', 
        type: "GET", 
        dataType: "JSON", 
        data: { State: stateId }, 
        success: function (city) { // cities is the variable in the controller made to fetch the city list 
         $("#City").html(""); 
         $.each(city, function (i , cityNames) { 
          $("#City").append(
           $('<option></option>').val(cityNames.cities)); 
         }); 
        } 
       }); 
      } 
     </script> 


     <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, new SelectList(Enumerable.Empty<SelectListItem>()), "Select City", new { id = "City", @class = "form-control"}) 
       @Html.ValidationMessageFor(model => model.City, "", new {@class = "text-danger"}) 
      </div> 
     </div> 

は、私は、要求を処理するために使用していますコントローラのアクションです：

public JsonResult FillCity2(string stateName) 
     { 
      List<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 Json(cities, JsonRequestBehavior.AllowGet); 
     } 

私はデバッガでの値を実行すると、 #Stateはnullとして表示されますが、コンソールのクロムには実際の値が表示されます（例：アラバマの場合は「AL」、アラスカの場合は「AK」など）。

値を渡すことで私の問題がどこにあるのかよく分かりません。そして、デバッガの都市リストは、デフォルトのスイッチの場合にとどまります。

アイデア？

Answer 1

アクションメソッドのパラメータ名とajax呼び出しデータのパラメータ名が一致する必要があります。あなたのAJAX呼び出しがStateと呼ばれるパラメータで選択された状態値を送信しているので、あなたは同じ（あるいは他の方法を）持っているあなたのアクションメソッドを更新する必要があり

public JsonResult FillCity2(string state) 
{ 
    //use the state variable in your method now for switch statement 
} 

また、あなたのアクションメソッドは、SelectListItemのリストを返します。 TextおよびValueの特性を有する。したがって、都市のドロップダウンを作成するときは、これらのプロパティのいずれかを使用する必要があります。しかし、存在しないリストの各項目のcitiesプロパティにアクセスしようとしています。

最後に、オプションのtextも値とともに設定する必要があります。テキストはユーザーが見るものなので。

success: function (cityArray) { 
    $("#City").html(""); 
    $.each(cityArray, function (i, city) { 
     $("#City").append(
      $('<option></option>').val(city.Value).text(city.Text)); 
    }); 
} 

Answer 2

私はあなたのAJAX呼び出しがコントローラでパラメータ名を一致させるために

data: { stateName: stateId }, 

代わりの

data: { State: stateId }, 

を使用しなければならないと考えています。

Answer 3

Do console.log(city)とそのフォーマットを見てください。私はあなたが間違ってプロパティにアクセスしていると思われます。私はそれが将来の読者に役立ちますように、あなたは（実際の問​​題に関連）意味のある者への質問のタイトルを更新示唆

success: function (stateCities) { 
    var cities = document.getElementById('City'); 
    while (cities.options.length) { 
     cities.remove(0); 
    } 
    $.each(stateCities, function(i, city) { 
     cities.add(new Option(city.Value, city.Text));// or whatever the correct properties are 
    }); 
}