Как обновить строго типизированный Html.DropDownList с помощью Jquery

Question

У меня есть веб-страница с двумя радиокнопками и раскрывающимся списком:

<div class="sectionheader">Course
    <div class="dropdown"><%=Html.DropDownList("CourseSelection", Model.CourseList, new { @class = "dropdown" })%> </div>         
    <div class="radiobuttons"><label><%=Html.RadioButton("CourseType", "Advanced", false )%> Advanced </label></div>
    <div class="radiobuttons"><label><%=Html.RadioButton("CourseType", "Beginner", true )%> Beginner </label></div>
</div>

Раскрывающийся список строго набирается и заполняется Model.CourseList (NB - при загрузке первой страницы по умолчанию выбирается «Beginner», а в раскрывающемся списке отображаются параметры курса для начинающих соответственно)

То, что я хочу сделать, - это обновить DropDownList, основываясь на том, какая радиокнопка выбрана, т. Е. Если выбрано «Дополнительно», показать один список параметров курса в раскрывающемся списке, а если выбран «Начинающий», показать другой список курсов .

Изменить - опубликовал мой собственный ответ ниже, чтобы показать решение, которое сработало для меня (наконец-то!)

Answer 1

Код, который я хотел бы вызвать, находится в моем контроллере:

public ActionResult UpdateDropDown(string courseType)
    {
        IDropDownList dropdownlistRepository = new DropDownListRepository();
        IEnumerable<SelectListItem> courseList = dropdownlistRepository.GetCourseList(courseType);
        return Json(courseList);
    }

Используя примеры из jQuery в действии , теперь у меня есть следующий код jQuery:

$('.radiobuttons input:radio').click(function() 
{
    var courseType = $(this).val(); //Get selected courseType from radiobutton
    var dropdownList = $("#CourseSelection"); //Ref for dropdownlist
    $.post("/ByCourse/UpdateDropDown", { courseType: courseType }, function(data) {
    $(dropdownList).loadSelect(data);
    });
 });

Функция loadSelect взята прямо из книги и выглядит следующим образом:

(function($) {
    $.fn.emptySelect = function() {
        return this.each(function() {
            if (this.tagName == 'SELECT') this.options.length = 0;
        });
    }

$.fn.loadSelect = function(optionsDataArray) {
    return this.emptySelect().each(function() {
        if (this.tagName == 'SELECT') {
            var selectElement = this;
            $.each(optionsDataArray, function(index, optionData) {
            var option = new Option(optionData.Text, optionData.Value);

                if ($.browser.msie) {
                    selectElement.add(option);
                }
                else {
                    selectElement.add(option, null);
                }
            });
        }
    });
}
})(jQuery);

Answer 2

Продолжайте возвращать вашу коллекцию selectlistitem; это хорошо переводится в JSOn, по крайней мере, так, как массив объектов, которые выглядят как {text: "a", value: "1"}, и вы можете перебрать массив и таким образом воссоздать список ...

Так что он будет работать со строго типизированными объектами. Вам просто нужно взять объекты и сконструировать элементы для основного раскрывающегося списка.

НТН.