Cascading dropdown boxes and MVC2 : The Official Microsoft ASP.NET Forums

Reply

Re: Cascading dropdown boxes and MVC2

May 26, 2010 12:13 AM|LINK

Try this:

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

Raj
http://weblogs.asp.net/rajbk/

Reply

Re: Cascading dropdown boxes and MVC2

May 28, 2010 06:54 AM|LINK

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

Reply

Re: Cascading dropdown boxes and MVC2

May 30, 2010 11:31 AM|LINK

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?

Reply

SnowJim

Member

306 Points

293 Posts

Re: Cascading dropdown boxes and MVC2

Jun 02, 2010 05:40 PM|LINK

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

BestRegards

Reply

krokonoster

Contributor

4291 Points

1352 Posts

Re: Cascading dropdown boxes and MVC2

Jun 02, 2010 05:52 PM|LINK

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.

Reply

SnowJim

Member

306 Points

293 Posts

Re: Cascading dropdown boxes and MVC2

Jun 02, 2010 06:13 PM|LINK

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

Reply

SnowJim

Member

306 Points

293 Posts

Re: Cascading dropdown boxes and MVC2

Jun 12, 2010 07:04 PM|LINK

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

$("#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

Reply

krokonoster

Contributor

4291 Points

1352 Posts

Re: Cascading dropdown boxes and MVC2

Jun 12, 2010 07:15 PM|LINK

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.....??)

Reply

SnowJim

Member

306 Points

293 Posts

Re: Cascading dropdown boxes and MVC2

Jun 12, 2010 07:24 PM|LINK

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

Reply

krokonoster

Contributor

4291 Points

1352 Posts

Re: Cascading dropdown boxes and MVC2

Jun 12, 2010 07:32 PM|LINK

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.

Cascading dropdown boxes and MVC2 RSS

38 replies

rajbk

Re: Cascading dropdown boxes and MVC2

SnowJim

Re: Cascading dropdown boxes and MVC2

SnowJim

Re: Cascading dropdown boxes and MVC2

SnowJim

Re: Cascading dropdown boxes and MVC2

krokonoster

Re: Cascading dropdown boxes and MVC2

SnowJim

SnowJim

Re: Cascading dropdown boxes and MVC2

SnowJim

Re: Cascading dropdown boxes and MVC2

krokonoster

Re: Cascading dropdown boxes and MVC2

SnowJim

Re: Cascading dropdown boxes and MVC2

krokonoster

Re: Cascading dropdown boxes and MVC2

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft