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

Question

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

<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> 

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

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

Edit - отвечал мой собственный ответ ниже, чтобы показать решение, которое работало для меня

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"}, и вы можете прокручивать массив и воссоздать список таким образом ...

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

HTH.