Issues With Cascading Dropdowns Using MVC4 and Jquery

Question

I've researched this problem extensively and cannot figure out what is wrong. I am trying to implement cascading dropdowns using MVC4 and Jquery for a page that I have, and no matter what solution I use online, my ActionResult parameter is always null.

Here's the Javascript which gets called just fine:

<script type="text/javascript">
$('.clientnames').on('change', function (e) {

    // Retrieve the filter url from the data-filter-url attribute
    var filterUrl = $(this).attr('data-filter-url');

    // Grab the id of the selected item
    var selectedId = $(this).val();
    window.alert("filterurl:" + filterUrl + "    selectedID:" + selectedId);

    // Grab the container that should be updated
    var updateContainer = $(this).attr('data-update-container');

    // Grab the id of new dropdown
    var dataUpdateId = $(this).attr('data-update-id');

    var completeUrl = filterUrl + selectedId;

    $.get(completeUrl, function (r) {

        // Load Partial View using the URL from the data-filter-url attribute
        $(updateContainer).html(r);

        // This would be used if you wanted to trigger the new dropdown to filter another
        if (dataUpdateId != null) {
            // Trigger the change event after it is loaded
            $(dataUpdateId).trigger('change');
        }
    });
});

Controller function, this is getting called but the value not successfully passed in:

 public ActionResult ImportList(string selectedId)
     {
         //DO COOL STUFF
     }

And the view:

 @Html.DropDownListFor(model => model.Clients.DropdownItems, 
         new SelectList(Model.Clients.DropdownItems, "ItemID","ItemName"),
                        new
                        {
                            @class = "clientnames",
                            data_filter_url = Url.Content("~/import/importlist/"),
                            data_update_container = ".dropdown-container",
                            data_update_id = "#SecondItemID"
                        }
)

I am pretty much following the advice on this page here: http://www.sidecreative.com/Blog/Entry/Cascading-dropdown-lists-with-MVC4-and-jQuery

Although I've tried a few different solutions, and everytime the value is still null. I'm pretty new to MVC and Jquery, so any advice would be appreciated.

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Try passing the selected value like this:

$('.clientnames').on('change', function (e) {

    // Retrieve the filter url from the data-filter-url attribute
    var filterUrl = $(this).attr('data-filter-url');

    // Grab the id of the selected item
    var selectedId = $(this).val();
    window.alert("filterurl:" + filterUrl + "    selectedID:" + selectedId);

    // Grab the container that should be updated
    var updateContainer = $(this).attr('data-update-container');

    // Grab the id of new dropdown
    var dataUpdateId = $(this).attr('data-update-id');

    $.get(filterUrl, { selectedId: selectedId }, function (r) {

        // Load Partial View using the URL from the data-filter-url attribute
        $(updateContainer).html(r);

        // This would be used if you wanted to trigger the new dropdown to filter another
        if (dataUpdateId != null) {
            // Trigger the change event after it is loaded
            $(dataUpdateId).trigger('change');
        }
    });
});

Your controller action takes a parameter called selectedId, and notice how this is passed in the $.get function:

$.get(filterUrl, { selectedId: selectedId }, function (r) {
    ...
});

You might also checkout the following post for other examples of implementing cascading droipdowns in ASP.NET MVC.

Thank you very much! This fixed the null issue. Was there a recent change in jquery? I don't know why every example I saw did not have it like this. I'll look into the post you linked as well to hopefully get this cascading dropdown working. — user2661299, Aug 27 '13 at 16:05

Issues With Cascading Dropdowns Using MVC4 and Jquery

1 Answers1