Как отобразить выбранное значение в раскрывающемся списке каскадирования?

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

Я достиг этого. Где выбранное значение находится в скрытом файле.

И убедитесь, что ваш метод контроллера возвращает объект 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>");
                };
            });
        });
    };
}

ДОБАВЛЕНО контроллер (мой 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);
    }

Вы можете вернуть любое количество полей, но если какое-либо из них будет иметь нулевое значение, оно не будет преобразовано в объект json. Я не уверен в этом, но это не работало, когда я возвращал весь объект состояния. В то время в таблице состояний было поле с именем deleteby, и оно содержало нулевые значения !. Но когда я возвращаю только два «необходимых» поля, оно работает правильно!