C＃カスケードDropDownList取得不定

Question

第1ドロップダウンリストで選択されているものにカスケードドロップダウンリストを作成しようとしていますが、2番目のリストは未定義のままです。ここで

は私のビューからのドロップダウンである：ここでは

 <td align="left"> 
      @Html.DropDownList("goals", ViewData["goals"] as SelectList, new { @class = "dropdownSource" }) 
      @Html.HiddenFor(model => model.budgetList[i].align_to_district_goal) 
     <td align="left"> 
      @Html.DropDownList("priorities", new SelectList(string.Empty,"Value", "Text") , new { @class = "clsColumnNames" }) 
      @Html.HiddenFor(model => model.budgetList[i].align_to_district_priority) 
     </td> 

は私のスクリプトです：

<script> 
    $("select.dropdownSource").live("change", (function() { 
     $("#priorities").empty(); 

     var columnSelectBox = $(this).parent("td").next("td").find("select.clsColumnNames"); 

     $.ajax({ 
      type: 'POST', 
      url: '/PrepareBudget/GetPriorities', 
      dataType: 'json', 
      data: { goals: $(this).find("option:selected").text() }, 
      success: function (str) { 

       $.each(str, function (Value, Text) { 
        $("#priorities").append('<option value ="' + Text.Value + '">' + Text.Text + '</option>'); 
        debugger; 
       }); 
      }, 
      error: function (ex) { 
       alert('Failed to retrieve columns.' + ex); 
      } 
     }); 
     return false; 
    })); 
</script> 

そして、ここでは私のコントローラです：

public JsonResult GetPriorities(string goals) 
{ 
    List<string> priorities = new List<string>(); 

    switch (goals) 
    { 
     case "Goal 1: Strengthen Early Literacy": 
      priorities.Add("Priority 1: Increase access to high-quality PreK classrooms and monitor quality"); 
      priorities.Add("Priority 2: Attract and retain strong teachers in early grades"); 
      priorities.Add("Priority 3: Execute a comprehensive District-wide literacy plan"); 
      priorities.Add("Priority 4: Leverage family and community partners to increase early literacy efforts"); 
      break; 
     case "Goal 2: Improve Post-Secondary Readiness": 
      priorities.Add("Priority 1: Improve student engagement through access to rigorous prep courses and personalized learning opportunities"); 
      break; 
     case "Goal 3: Develop Teachers, Leaders, and Central Office to Drive Student Success": 
      priorities.Add("Priority 1: Develop leadership pathways for teachers, coaches and school administrators"); 
      priorities.Add("Priority 2: Create competitive compensation systems to attract and retain classroom and school leaders"); 
      priorities.Add("Priority 3: Ensure high-quality feedback and evaluation of all staff connected to career development opportunities"); 
      priorities.Add("Priority 4: Use data deep dives in schools and District offices to drive continuous improvement"); 
      break; 
     case "Goal 4: Expand High-Quality School Options": 
      priorities.Add("Priority 1: Implement a common School Performance Framework to communicate school quality"); 
      priorities.Add("Priority 2: Transition to a student-based funding model"); 
      priorities.Add("Priority 3: Establish new school models that focus on different career training and specialized learning"); 
      priorities.Add("Priority 4: Commit to a compact with our charter schools"); 
      break; 
     case "Goal 5: Mobilize Family and Community Partners": 
      priorities.Add("Priority 1: Improve how we deliver information to parents through multiple communication avenues"); 
      priorities.Add("Priority 2: Provide ongoing diversity and customer service training to all staff and hold them accountable for service quality"); 
      priorities.Add("Priority 3: Establish a volunteer hub to connect partners to the District's student mission"); 
      break; 
    } 
    return Json(priorities); 
} 

なぜ私がのために未定義取得しています優先度ドロップダウンの各優先度？

Answer 1

//... 
success: function (str) { 
       $.each(str, function (index, text) { 
        $("#priorities").append('<option value ="' + index + '">' + text + '</option>'); 
       }); 
      }, 
///... 

Answer 2

あなたのアクションメソッドは、文字列のリストを返しています。リスト内の各項目（単一文字列オブジェクト）には、TextまたはValueプロパティはありません。しかし、あなたのクライアント側のコードはそれらにアクセスしようとしています。

TextメソッドとValueプロパティを持つSelectListItemのリストを返すようにサーバーメソッドを変更することができます。

public JsonResult GetPriorities(string goals) 
{ 
    List<SelectListItem> priorities = new List<SelectListItem>(); 
    // to do : Replace the below hard coded items with the real items you want 
    priorities.Add(new SelectListItem { Value="Priority 1", 
    Text="Priority1: Increase access to high-quality PreK classrooms and monitor quality"}); 

    return Json(priorities); 
} 

あなたがdbテーブルから優先順位を読んでいるなら、上記のサーバコードの変更によりValueプロパティ

にレコードのIDの文字列化バージョンを維持するために、良いアイデアです、あなたの現在のクライアント側のコードが動作します。

別のオプションがそのまま配列内のアイテム（単一の文字列）を使用するようにクライアント側のコードを更新することです。

これは動作するはずです。

success: function (itemsArray) { 
$.each(itemsArray, function (index, p) { 

    $("#priorities").append('<option value ="' + p+ '">' + p+ '</option>'); 

}); 

あなたのコードで別の問題が発生しました。 jQuery 1.7以降、jQuery liveメソッドはdeprecatedです。ライブの代わりにonを使用することを検討する必要があります。

$(function(){ 

    $("select.dropdownSource").on("change", (function() { 

    }); 

});