CODEWITHSUNDEEP
asp.net-mvcjquery
Alex P
Alex P

Reputation: 12487

How to update strongly typed Html.DropDownList using Jquery

I have a webpage with two radiobuttons and a dropdownlist as follows:

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

The dropdownlist is strongly typed and populated with Model.CourseList (NB - on the first page load, 'Beginner' is the default selection and the dropdown shows the beginner course options accordingly)

What I want to be able to do is to update the DropDownList based on which radiobutton is selected i.e. if 'Advanced' selected then show one list of course options in dropdown, and if 'Beginner' selected then show another list of courses.

Edit - posted my own answer below to show solution that worked for me (finally!)

Upvotes: 2

Views: 1456

Answers (2)

Alex P
Alex P

Reputation: 12487

The code I would like to call sits within my Controller:

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

Using examples provided in jQuery in Action, I now have the following jQuery code:

$('.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);
    });
 });

The loadSelect function is taken straight from the book and is as follows:

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

Upvotes: 2

Brian Mains
Brian Mains

Reputation: 50728

Continue to return your collection of selectlistitem; this translates to JSOn nicely, at least it should, as an array of objects that look like { text: "a", value: "1" } and you can loop through the array and recreate the list this way...

So it will work with strongly-typed objects. You just have to take the objects and construct the elements for the underlying drop down.

HTH.

Upvotes: 2

Related Questions