Reusable javascript function to fill cascading dropdown in ASP.Net MVC 5

Question

I have an ASP.Net MVC 5 appliaction, with some edit pages, each one has multiple input elements (textboxes, checkboxes, dropdowns, etc) and I want to change the values of a dropdown based on the selected values of another dropdown.

For that, I wanted to write a reusable, generic javascript function , which does an ajax-call with certain parameters and places the html-(or json-)result in a certain tag.

As I am pretty sure, that someone already had those requirements, I don´t want to invent the wheel again. Did someone already make something like this? Or is there some nice jquery-plugin, which I was not able to find?

In detail, I was thinking of something like this:

Input parameters:

• Ajax-Url to call
• Arguments to send to controller (by default, it should send the selected value of the dropdown, but sometimes one might need to send additional values or even the whole form)
• Target : jquery-locator for html-element, where the html-result should be placed
• ( Maybe other parameters : configure POST or GET call; configure "add" or "replace" target; OnSuccess/OnError handlers; etc)

I expected jquery unobtrusive to have something like this, but unfortunately not.

(I don´t use any javascript frameworks like Knockout or AngularJs and I don´t want to introduce anything like that only for this small thing I need).

Answer 1

Ide say that it's simple enough just to write your own. You could be fancy and make a function which you pass in a post url, newly selected value, step number (ie you have a 3 step system, car manufacturer (step 1), car make (step 2), car model (step 3)). Then that call returns a JSON list of values that you use to populate the next dropdown.

It could look something like:

<select name="States" multiple="multiple">
    <option value="TX">Texas</option>
    <option value="OK">Oklahoma</option>
    <option value="OH">Ohio</option>
</select>
<select name="Cities">
</select>

.... // later inside of script

var gatherStepOptions = function(postUrl, newSelectValue, currentStep){
    var postData = {
        NewSelectValue: newSelectValue,
        CurrentStep: currentStep
    }

    $.ajax(
    {
        type: "POST",
        data: JSON.stringify(postData),
        url: "postUrl",
        contentType: 'application/json; charset=utf-8'
    }).done(function(values) {
        return values; // might need to parse
    })
    .fail(function() {
        return ["failed"];
    });
}

var updateSelectValusWithNew = function($select, valSelected, currStep){
    $select.empty();
    var newSelectVals = gatherStepOptions("gatherOptionValuesUrl", valSelected, currStep);
    $.each(newSelectVals, function(val){
        $select.append($("<option></option>")
            .attr("value", val).text(val));
    });
}

$("[name='States']").click(function(e) {
    var $selectToUpdate = $("[name='Cities']");

    updateSelectValusWithNew($selectToUpdate, $selectToUpdate.val(), 1);
}

Please keep in mind I wrote this inside of this window and havn't run it so theres a good chance there could be errors in the code. I might actually run this later if I have time. If I do I will fix it up