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?
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.
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?
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
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
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).
SnowJim
Member
306 Points
293 Posts
Cascading dropdown boxes and MVC2
May 17, 2010 02:23 PM|LINK
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
Jerrolds
Member
95 Points
123 Posts
Re: Cascading dropdown boxes and MVC2
May 17, 2010 05:28 PM|LINK
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
SnowJim
Member
306 Points
293 Posts
Re: Cascading dropdown boxes and MVC2
May 17, 2010 06:25 PM|LINK
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
Jerrolds
Member
95 Points
123 Posts
Re: Cascading dropdown boxes and MVC2
May 17, 2010 09:48 PM|LINK
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
SnowJim
Member
306 Points
293 Posts
Re: Cascading dropdown boxes and MVC2
May 18, 2010 06:20 AM|LINK
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
SnowJim
Member
306 Points
293 Posts
Re: Cascading dropdown boxes and MVC2
May 21, 2010 05:39 PM|LINK
I am still having problem with this, pleas help.
Jerrolds
Member
95 Points
123 Posts
Re: Cascading dropdown boxes and MVC2
May 21, 2010 09:32 PM|LINK
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
SnowJim
Member
306 Points
293 Posts
Re: Cascading dropdown boxes and MVC2
May 22, 2010 05:06 PM|LINK
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).
SnowJim
Member
306 Points
293 Posts
Re: Cascading dropdown boxes and MVC2
May 25, 2010 08:10 AM|LINK
Are you maby returning the form itself and then extracts the value from the proper dropdown?
krokonoster
Contributor
4291 Points
1352 Posts
Re: Cascading dropdown boxes and MVC2
May 25, 2010 07:16 PM|LINK
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.)