Comment afficher la valeur sélectionnée dans une liste déroulante en cascade?

Question

Je souhaite l'extension du code suivant pour la valeur sélectionnée dans la vue d'édition. prendre un cas de pays -> état -> ville.

j'ai CascadingDropDownList.js script:

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

et j'ai une classe d'aide:

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

je l'ai atteint. Où la valeur sélectionnée est dans Hidden Filed.

Et assurez-vous que votre méthode de contrôleur renvoie l'objet json avec deux champs.

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

AJOUTÉE contrôleur (Mon URL est étudiant/état-à-dire dans le contrôleur étudiant, je mets le code suivant)

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

Vous pouvez retourner un certain nombre de domaines, mais si l'un des ils auront une valeur nulle alors il ne sera pas converti en objet json. Je ne suis pas sûr à ce sujet mais cela ne fonctionnait pas quand je retourne l'objet d'état entier. À ce moment-là, la table des états avait un champ appelé deletedby et il contenait des valeurs nulles! Mais quand je retourne seulement deux champs 'nécessaires' alors ça fonctionne correctement!