選択した値をカスケードドロップダウンリストに表示するにはどうすればよいですか？

Question

編集ビューで選択した値の次のコードを拡張します。 国→州→都市の場合をとります。

私は、スクリプトCascadingDropDownList.jsあります

function bindDropDownList(e, targetDropDownList) 
{ 
    var key = this.value; 
    var allOptions = targetDropDownList.allOptions; 
    var option; 
    var newOption; 
    targetDropDownList.options.length = 0; 

    for (var i=0; i < allOptions.length; i++) 
    { 
     option = allOptions[i]; 
     if (option.key == key) 
     { 
      newOption = new Option(option.text, option.value); 
      targetDropDownList.options.add(newOption); 
     } 
    } 
} 

を、私はヘルパークラスを持っている：

public static class JavaScriptExtensions 
{ 
    public static string CascadingDropDownList(this HtmlHelper helper, string name, string associatedDropDownList) 
    { 
     var sb = new StringBuilder(); 

     // render select tag 
     sb.AppendFormat("<select name='{0}' id='{0}'></select>", name); 
     sb.AppendLine(); 

     // render data array 
     sb.AppendLine("<script type='text/javascript'>"); 
     var data = (CascadingSelectList)helper.ViewDataContainer.ViewData[name]; 
     var listItems = data.GetListItems(); 
     var colArray = new List<string>(); 
     foreach (var item in listItems) 
      colArray.Add(String.Format("{{key:'{0}',value:'{1}',text:'{2}'}}", item.Key, item.Value, item.Text)); 
     var jsArray = String.Join(",", colArray.ToArray()); 
     sb.AppendFormat("$get('{0}').allOptions=[{1}];", name, jsArray); 
     sb.AppendLine(); 
     sb.AppendFormat("$addHandler($get('{0}'), 'change', Function.createCallback(bindDropDownList, $get('{1}')));", associatedDropDownList, name); 
     sb.AppendLine(); 
     sb.AppendLine("</script>"); 

     return sb.ToString(); 

    } 
} 

public class CascadingSelectList 
{ 
    private IEnumerable _items; 
    private string _dataKeyField; 
    private string _dataValueField; 
    private string _dataTextField; 

    public CascadingSelectList(IEnumerable items, string dataKeyField, string dataValueField, string dataTextField) 
    { 
     _items = items; 
     _dataKeyField = dataKeyField; 
     _dataValueField = dataValueField; 
     _dataTextField = dataTextField; 
    } 

    public List<CascadingListItem> GetListItems() 
    { 
     var listItems = new List<CascadingListItem>(); 
     foreach (var item in _items) 
     { 
      var key = DataBinder.GetPropertyValue(item, _dataKeyField).ToString(); 
      var value = DataBinder.GetPropertyValue(item, _dataValueField).ToString(); 
      var text = DataBinder.GetPropertyValue(item, _dataTextField).ToString(); 
      listItems.Add(new CascadingListItem(key, value, text)); 
     } 
     return listItems; 
    } 
} 
public class CascadingListItem 
{ 
    public CascadingListItem(string key, string value, string text) 
    { 
     this.Key = key; 
     this.Value = value; 
     this.Text = text; 
    } 

    public string Key { get; set; } 
    public string Value { get; set; } 
    public string Text { get; set; } 
} 

Answer 1

私はそれを達成しています。選択された値が隠しファイルです。

コントローラメソッドが2つのフィールドを持つjsonオブジェクトを返すことを確認します。

<script type="text/javascript"> 

var ddlCountry; 
var ddlStateID; 

function pageLoad() { 
    ddlStateID = $get("StateID"); 
    ddlCountry = $get("CountryID"); 
    $addHandler(ddlCountry, "change", bindOptions); 
    bindOptions(); 
} 
function bindOptions() { 
    ddlStateID.options.length = 0; 
    var CountryID = ddlCountry.value; 
    var stateSelected = document.getElementById('StateSelected').value; 
    if (CountryID) { 
     var url = "/Student/States/" + CountryID; 
     $.getJSON(url, null, function(data) { 
      $("#StateID").empty(); 
      $.each(data, function(index, optionData) { 
       if (stateSelected == optionData.ID) { 
        $("#StateID").append("<option value='" 
        + optionData.ID 
        + "' selected>" + optionData.Name 
        + "</option>"); 
       } 
       else { 
        $("#StateID").append("<option value='" 
        + optionData.ID 
        + "'>" + optionData.Name 
        + "</option>"); 
       }; 
      }); 
     }); 
    }; 
} 

ADDED コントローラ（私のURLは、私は次のコード入れた学生のコントローラ、すなわち学生/状態です）

public ActionResult States(int id) 
    { 
     var states = db.states.Select(s => new { ID = s.ID, Name = s.Name }).OrderBy(s=>s.Name).ToList(); 
     return Json(states); 
    } 

あなたはフィールドの任意の数を返すことができますが、任意の場合それらはnull値を持ち、jsonオブジェクトでは変換されません。私はこれについてはわかりませんが、状態オブジェクト全体を返すときには機能しませんでした。その時、状態テーブルにはdeletedbyというフィールドがあり、ヌル値を含んでいました！しかし、私は2つの '必要な'フィールドだけを返すと、それは正常に動作しています！