Need to create multiple dropdown list

krahman01 · June 11th, 2010, 03:42 AM

I need to create several dropdown lists where based on choosing one item in a dropdown list, the next dropdown item gets chosen and so on. These items can come from database as well. Anybody knows of any existing source code?

Imar · June 14th, 2010, 03:59 AM

Hi there,

You could take a look at the CascadingDropDown control in the AJAX Control Toolkit: http://www.google.nl/#hl=nl&q=ajax+c...ce7b8b40a10917

Cheers,

Imar

krahman01 · June 14th, 2010, 01:49 PM

thanks, but, what I wanted is to have the second and 3rd dropdown show up when an item from 1st dropdown is selcted.

Imar · June 14th, 2010, 01:55 PM

Isn't that exactly what the CascadingDropDown is supposed to do? If not, can you elaborate?

Imar

krahman01 · June 14th, 2010, 05:30 PM

Not really. Even though it's cascading dropdown, from the examples, you select car's make and then model, etc. All three of the dropdown controls are shown already. What I want to do is select from first control for make and then based on that make(such as BMW) second dropdown is visible and shows the choices for BMW(such as 328i, etc.)I don't really want any control to show up below(just invisible) unless I selected BMW or something. Maybe JQuery can do that, but, without JQuery is it possible to do other ways?

Imar · June 15th, 2010, 02:27 AM

Isn't that simply a matter of hiding the second and third control at first by setting Visible to false and showing them only when their DataBound event is fired?

But there are many solutions outside the CascadingDropDown (which really makes things a lot simpeler).

1. Use your own code server side
Set AutoPostBack on the first DDL to true. In it SelectedIndexChanged event get the selected item, get relevant items from the database and bind them to DDL2. Additionally, show DDL2. Repeat that for the combination of the second / third DDL.

2. Use jQuery and AJAX calls and build up the list client side
A lot has been written about this so you may want to Google a bit until you find an article you like and can use. Here's a start: http://www.dotnetcurry.com/ShowArticle.aspx?ID=417

3. Use third party controls
Commercial software vendors often have controls for this scenario. Again, Google should bring up useful stuff.

Cheers,

Imar

krahman01 · June 15th, 2010, 06:36 PM

I chose your suggested solution #2 because, that sounded more straightforward and quick. But, I'm getting some JavaScript error which is preventing me to run this successfully:

Server Error in '/' Application.
--------------------------------------------------------------------------------

Parser Error
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Only Content controls are allowed directly in a content page that contains Content controls.

Source Error:

Line 1:
Line 2: <head>
Line 3: <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Line 4: <script language="javascript" type="text/javascript">
Line 5: $(function () {

Source File: /Default.aspx Line: 3

--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1

-------

I placed the script code in the default.aspx with <head>..</head> enclosed.

Imar · June 16th, 2010, 03:17 AM

Quote:

I placed the script code in the default.aspx with <head>..</head> enclosed.

That's not allowed when the page is based on a master page. You can choose among at least three solution:

1. Don't use a Master Page

2. Move the script to the <head> section of the Master Page (so it's available in all pages that use that master page)

3. Create a ContentPlaceHolder in the head of the master and add the scripts to the Content block for that ContentPlaceHolder in your content page.

Hope this helps,

Imar

krahman01 · June 17th, 2010, 09:30 PM

I think I already tried the third option that you've stated. That didn't work with default asp container. I'll try the 2nd one.

Imar · June 18th, 2010, 02:48 AM

The third option should definitely work; it's what I always use for these scenarios. What error are you getting or why doesn't it work for you?

Imar