Cascading dropdown boxes and MVC2

Hi,

I am filling a dropdown box by using ViewState, now I need to be able to create more drowdown boxes and fill them based on what was sleected in prev box.

I have a mehtod in the control that takes a parentId and returns a List<Entity>, when selecting a option in dropdownbox1 a call will be made with jquery with the parent id that returns the list, if there is a count > 0 in the return collection a new dropdown will be created and populated. This should be reqursiv.

I have looked at diffrent solutions on the net, there is some that just uses the $.post and then there is those that uses $.getJSON.

How should I handle this? Is there any torturial to look at? And how do I get the final value back to the server when submitting?

BestRegards

Re: Cascading dropdown boxes and MVC2

I had this problem just last week

http://forums.asp.net/p/1557068/3835085.aspx#3835085

Most, if not all the source is there

Basically use jquery to call an Action that returns a JsonResult, then you can build the dropdowns from there

Re: Cascading dropdown boxes and MVC2

Thanks!

That works, but I need it to be Cascading in a dynamic way.

If I select option 3 from the box1 then box2 should get all the items that have option 3 from box1 as its parent. If i select option 1 in box2 then I should get all the items with the parent option 1 from box1 in box3 ans so on.

My code looks like this :

$(function () {
            $('#ProductCategories').change(getModels);
            $('#ddlFirst').attr('disabled', true);
            $('#ddlSec').attr('disabled', true);
        });




function getModels() {
            var strOrganizationIDs = "";
            $("#ProductCategories option:selected").each(function () {
                strOrganizationIDs += $(this)[0].value;
            });


            var url = "/AdCategory/GetCategoriesByParent/" + strOrganizationIDs;
            $.getJSON(url, null, function (data) {
                $("#ddlFirst").empty();
                $.each(data, function (index, optionData) {
                    $("#ddlFirst").append("<option value='"
                            + optionData.Value
                            + "'>" + optionData.Text
                            + "</option>");
                    $("#ddlFirst").attr('disabled', false);
                });
            });
        };

This does work on the ProductCategories and the ddlFirst box but I don´t see how to make this dynamic. Also how do you submit the last selected value to the server side?

BestRegards

Re: Cascading dropdown boxes and MVC2

I did kind of a brute force way to handle multiple cascading drop downs with the code, but i found this recently that we might want to use - its more elegant

http://jsbin.com/unope/edit

Re: Cascading dropdown boxes and MVC2

Okay, the preview of that code did not work, but I could try to implement it anyway.

There is however just static elements but I supose I can hide and unhide and then have 8 dropdowns.

U do how ever not understand how I get the value from the last box(what ever box this might be) back to the serverside?

BestRegards

Re: Cascading dropdown boxes and MVC2

I am still having problem with this, pleas help.

Re: Cascading dropdown boxes and MVC2

Well what i did was on "change" of the dropdown, i got the selectId, then did the JSON call to my controller action and with its results cleared the "dependant" dropdown and repopulated it with the results

<script type="text/javascript">
    $(document).ready(function() {
        $("#ParentDropDown").change(function() {


            resetDropDown("#ChildDropDown");
            

            var selectedId = getSelectedId("#ParentDropDown");
            populateDropDown("#ChildDropDown", selectedId);


        });
        

    });


    function populateDropDown(dropDownId, selectedId) {
        if (selectedId != "" || selectedId == "0") {
            $(dropDownId).removeAttr("disabled");


            var url = "/MyController/Action/" + selectedId;
            $.getJSON(url, null, function(data) {
                $.each(data, function(index, optionData) {
                    $(dropDownId).append("<option value='"
                            + optionData.Value
                            + "'>" + optionData.Text
                            + "</option>");
                });
            });
        }
    }


    function getSelectedId(dropdownId) {
        var selectedId = "";
        $(dropdownId + " option:selected").each(function() {
            selectedId += $(this)[0].value;
        });


        return selectedId;
    }


    function resetDropDown(dropDownId) {
        $(dropDownId).empty();
        $(dropDownId).append("<option value=''>--- Select Something ---</option>");
        $(dropDownId).attr("disabled", true);
    }


</script>

Hope this helps

Re: Cascading dropdown boxes and MVC2

Thanks! But how to you get the slected valu from the last dropdown to the servicen side? I am working with a typed view and this dropdown procedure will not be bound to the model(Or is it possible to do that).

Re: Cascading dropdown boxes and MVC2

Are you maby returning the form itself and then extracts the value from the proper dropdown?

Re: Cascading dropdown boxes and MVC2

Update: Forget the stuff below, too confusing. Slapped together a working sample for ya: Download it here

Deleted: Too confusing (Not to mention this forum's functionality for posting lot of code with text in between is a pain.)

Re: Cascading dropdown boxes and MVC2

Try this:

http://weblogs.asp.net/rajbk/archive/2010/05/20/cascadingdropdown-jquery-plugin-for-asp-net-mvc.aspx

Re: Cascading dropdown boxes and MVC2

Thanks for all your help.

I have tried rajbk sugestion and that works fine to some point. I do however still have problems :

How do I make this dynamic so it could add almost how many dropdown as the datamodel sugests?
How do I see to it that if a call returns 0 results then no more dropdowns should be shown and the choosen value should be the from the last dropdown.
How do I get the selected value from the last dropdown back to the serverside when hitting submit on the typed view?
What happens if the user are not using javascript? Is this somthing I should think about?

//SnowJim

Re: Cascading dropdown boxes and MVC2

Hi,

I have now solved the followin :

Needs max 5 so I created 5 dropdowns hand hide them.
I have modified the script to hide the dropdowns until thay are loaded.
When posting to the server I am checking whitch dropdown that are last set by usint Request.Form["category05"] and then extracts the value.
No solution here, but I am thinking of require javascript to use the site. Is this a bad idé?

The problem that still exists is if the post goes to the service and the validation fails, then it will return with the view to the user again but the dropdowns will not be set. Im not sure how to fix this. I could extend the ModelView class with information about how each of the dropdowns is set, but Im not really sure how to do this the right way? When a selection are made there will go a call to the service to collect the collection for the new dropdown, this means that I can not just set the selected value direcly.

Another way is to hide the dropdowns and show a label with the choosen category path and then a delete button that removes the label and then shows the first dropdown. This is not a nice solution becourse the enduser will have to set the whole path even if its just the last that should be changed.

Any Idé How to solve this?

Re: Cascading dropdown boxes and MVC2

I really need help on this, I do not know how to maintain state beween posts? Any suggestion?

BestRegards

Re: Cascading dropdown boxes and MVC2

SnowJim
will not be bound to the model(Or is it possible to do that).

Not only possible but it's the right way to go.

I think that's what I have in that sample I posted for you.

Re: Cascading dropdown boxes and MVC2

Yes, you are right it looks that way, I will investigate your sample some more. Thanks!

Re: Cascading dropdown boxes and MVC2

Hi,

I have now investigated your sample and tried to change my own solution according to yours. But I do have a problem.

My drop downs looks like this :

<%: Html.DropDownListFor(model => model.ModelViewAd.Category1, Model.ModelViewAd.Category1List, "-- Välj kategori --")%>
                    <%: Html.DropDownListFor(model => model.ModelViewAd.Category2, Model.ModelViewAd.Category2List, "-- Välj kategori --")%>
                    <%: Html.DropDownListFor(model => model.ModelViewAd.Category3, Model.ModelViewAd.Category3List, "-- Välj kategori --")%>
                    <%: Html.DropDownListFor(model => model.ModelViewAd.Category4, Model.ModelViewAd.Category4List, "-- Välj kategori --")%>

In the rendered HTML page it looks like this :

<select id="ModelViewAd_Category1" name="ModelViewAd.Category1"><option value="">-- Välj kategori --</option>
<option value="10">Fordon</option>

<option value="15">För hemmet</option>
<option value="17">Bostad</option>
</select>
                    <select id="ModelViewAd_Category2" name="ModelViewAd.Category2"><option value="">-- Välj kategori --</option>
</select>
                    <select id="ModelViewAd_Category3" name="ModelViewAd.Category3"><option value="">-- Välj kategori --</option>
</select>
                    <select id="ModelViewAd_Category4" name="ModelViewAd.Category4"><option value="">-- Välj kategori --</option>

</select>

I have changed the script to this :

        <script type="text/javascript">
            $(function () {
                $("select#ModelViewAd_Category1").change(function () {
                    var id = $(this).val();
                    var urlAction = "/AdCategory/GetCategoriesByParent1/" + id;
                    $.getJSON(urlAction, { id: id }, function (data) {
                        $("#ModelViewAd_Category2").addItems(data.d);
                    });
                });
            });
    </script>

I get the following exception when running $("#ModelViewAd_Category2").addItems(data.d); :

<div role="listitem"> $("#ModelViewAd_Category2").addItems(data.d);
</div>

As you can see, I do not got a real exception message?

The response I am getting is

{"d":[{"Selected":false,"Text":"Lägenheter                                                                                          ","Value":"18"},{"Selected":false,"Text":"Fritidsboende                                                                                       ","Value":"19"}]}

Why am I getting this exception? And how do I fix it?

Is there really no simpler way? I have invested as much time in this cascading dropdown solution as I have on the entire project and I have not yet a wokring sample. Its also seemse like I will not be able to do a entirely cascading dropdown where the dropdowns is created if needed, insted I will have do define the dropdowns before sending it to the client. I can live with this but it would be nicer with a real cascading dropdown solution.

BestRegards
Jimmy

Re: Cascading dropdown boxes and MVC2

Did you include common.js or at least the two functions I got in there? (addItems and clearSelect)

Not sure what your ViewModel looks like (model.ModelViewAd.Category1.....??)

Re: Cascading dropdown boxes and MVC2

Thanks for fast answer!! I hade missed the common file, when it was included it worked fine. I will ofcourse have to dig in to the code to be able to hide the dropdowns that are not in use but that should not be that hard I hope?

Thanks for your solution, it seems simpler then the one I was first trying to implement.

//SnowJim

Re: Cascading dropdown boxes and MVC2

Very simple to hide (jQuery's .hide() method should work)

No worries, this solution works so well for me, I'm a bit concerned that I'm overlooking better ways.

Pls do update me if you come across something that seems better.