Use ASP.NET AJAX Cascading Drop Down Control to Access a Database

I need cascading dropdownlists for my current project. My database hierarchy structure is designed to have an unspecified indent level. So I might need 3 dropdownlists.. maybe 4, maybe just 2.

Thanks for the introduction :-)

That's an interesting scenario.

I don't have any code that does this, though I'll put it on my list.

Dynamically Adding conrols in ASP.NET somewhat difficult becuase the added controls are not added to any page state mechanism.

You certainly can inject additional DropDowns programatically into the page but you'll need to recreate those additions in the page_init method so postbacks don't remove them.

Joe,

I don't quite understand about this tool needs to use Web Service to pick up data from database. How come this extender doesn't provide DataSourceID attributes to just call the SQLDataSource control to get the data feed instead of going through so much coding with Web Service?

I just think this AJAX control is just making developer to create more codes rather than simplify the coding process for having a cascading dropdown control. We can have a series of cascading dropdown controls by using SQLDataSource wrapped inside the UpdatePanel control, why would we need this AJAX one which requires us to go through Web Service to get data from the database.

Please correct me if I am wrong.

Thank you,

Erik

I liked this video a lot man, thanks a lot dear Joe. You have used a lot of techniques in this video, and it was so benificial to watch it. Thanks a lot man

I do share the same opinion with edirgaria, although maybe I didn't really get the essence. Can you please list the advantages (disadvantages) of using this technique over the UpdatePanel one?

Thanks

Radu

Hi Joe

Very very good video.. this has helped me alot.

But i need to know one thing. What if the javascript is turned of the ajac-cotrols doesn't work!!!!

How do I handle so the page works as standard aspx if javascript is disabled. Are there any examples on that??

There are a couple of reasons for using service methods instead of UpdatePanel.

1.) UpdatePanel is WAY less efficient since it does a complete page postback and executes the complete .aspx pafe lifecycle.

2.) YOu can execute much more server side logic than a simple parametric database query.

As to JavaScript.....

If the user doesn't have JavaScript enabled then there is no AJAX. You need to post back after every selection (which you can't do automaticaly since there is no JavaScript) and build an updated page each time.

What you are saying is that I should also write code in the server-side(aspx.cs) in the load_event that retrives data from the database.

But what if javascript is enabled. It retrives data two times.. one from the Load_event(Serverside) and the secondtime it gets from the Servicefile(constructed for AJAX-controls)????

Thanks

You asked what to do it Javascript was turned OFF.

If JavaScript is on then you just do ASP.NET AJAX.

yes that is what Iam asking for. How do I check if javascript is on so I can use ajax? Iam using services like your example.

Why are you not creating a video on how to detect javascript?? is it not important? Cause I have asked and searched, havent found any good information...

No need for a video.

Just use the code here:

www.codeproject.com/.../Javascript_Detection.aspx

Hi Joe,

I'm trying to implement Cascading DDLs with DB using  Categories and Products tables of Northwind db.

I've two DDLs - category & products and 2 CCDs - ccdCategory and ccdProducts.

I'm getting [Method Error 500] when page loads.

I'm using Web Developer 2005 Express Edition.

Can you please tell me why this happens?

But web service is working correctly.

Hi Joe,

I saw your vedio and was trying to implement Cascading DDLs with DB using  Categories and Products tables of Northwind db.

I've two DDLs - category & products and 2 CCDs - ccdCategory and ccdProducts.

I'm getting [Method Error 500] in Category DDL when page loads.

I've set ServiceMethod & ServicePath properties correctly.

And also the required attributes in web service file.

I'm using Web Developer 2005 Express Edition.

Can you please tell me why this happens?

But web service is working correctly.

Hi joe,

I never thought that implementing ajax in .net is soo easy and interesting.Ya Microsoft makes every thing powerful and easy to implement.I m proud of Microsoft.

And Joe all ajax videos posted by u are just fantastic.

This will help many.Thank u very much.

can u tell me difference between "Atlas" and "Ajax Extension 1.0". Which one should i install to use??

waiting for reply.............

Many THANKS !

I's so rewarding when folks are able to learn from the work I/we do.

BTW - Atlas was just the project name that we used before we released. You should be using the "ASP.NET Extensions for AJAX 1.0".

To Jnaneshwar: You're seeing a 500 Server error ?

Ths is useually an error in the Web Service code and can be seen if the Service Class is not decorated with the ScriptService attribute.

I had a look at AutoComplete Extender, Which OnTextChanged is returning some values in a list box, I want that to be checkboxlist to enable multiple selections. How can that be done

Could I populate a checkbox list with the last cascading drop down list using this method?  I need two drop down lists and one checkbox list for a user to make selections.

Not as it exists now, but since it's open source you could fork your own version of the control.

Joe: terrific example. One question: once these controls are set up and a page postback is done (after completing the rest of the selections on a page), the viewstate of the dropdown list controls seems to get lost. I have seen some references to doing some work OnInit to preserve viewstate, but if the access to the database is all being handled through the extender control properties and a web service, there is not a lot being done that could be moved to "OnInit". Is there a way to preserve viewstate for the cascading dropdowns when returning after a page postback?

Thanks, Walt

Dear Joe,

I'm totally new in AJAX, from this video, I would like to know the code:

Public Fuction GetMakes(byval knownCategoryValues as String, ByVal category As string) As CascaddingDropDownNameValue()

'implementing

End Function

1) Is that the knownCategoryvalues is the reserve word?

2) the function is pass in 2 parameters from where?

3) from the implementing part, the makesValues.add () NewCascadingDropDownValue (row("...").tostring(), row("...").tostring())

the carId return parameter is to pass in to the cascading model's as knownCategoryValue?

4)from the next webmethod: Model

stringDictionary is used when we need to get parameter from parent control? for database?

5)what is that means by Cascadingdropdown.ParseKnownCategoryValuesString(knownCateg oryValue)?

6)if my MakeID is a string value,in the if method, i should put "...or (Not char.tryParse(kv("Make"),makeID)) Then ..."

Hope to hear you soon.Thank you

from the movie above, i would like to know more details about it. Since i'm totally new to ajax,I am so hunger for that...

1) the knowCategoryValues a parameter that sent from where? Shall we use another name to replace it?

2) the string dictionary is act like an abstract table to get values knownCategoryValues from the parent control?

3)instead of use integer as a makeID, I use string as my make ID, then may i write "...Or (Not Char.TryParse(kv("SupplierID"), suppID))) Then ..."?

Hope to hear reply from anyone of you. Thanks.

Y i'm not able to leave a comment here?

METHOD 500 really makes CascadingDropDown a bad thing.

I have wasted to much time trying to trouble shoot this.

Joe,

   I have done this,"Ths is usually an error in the Web Service code and can be seen if the Service Class is not decorated with the ScriptService attribute."  But still get Method 500....   Should I abandon the Ajax thing and go back to the old way?  I hate to do that, but it looks like I might.

   I am curious, I saw your video of the debugging JavaScript in VS-2008.  I received a free copy from DevConnections and I was thinking of installing it.  Would I be able to trouble shoot this better if I had VS-2008?

Dear Joe,

I would like to populate my region dropdown list depending on my country dropdown list value. I would like to use the Cascading dropdown list - AJAX.Is there any way of doing this without having to use a Webservice? I would appreciate your help.

Landistols - how else you you indend to dynamicaly fetch data from the server ?

Airborne - Email me directly and I'll see if I can help you find the bug.

Hi,

Been looking for this video tutorial for ages. Thanks for supplementing the xml source data tutorial.

I'm wondering of you can use a Datareader instead of a dataset?

Joe,

Thanks for this video! Really helped me out! I'm having 1 issue because I'm using a MasterPage. The child CDD can't find the parent CDD. I checked the HTML (view source) and the id of the parent is ctl00_ContentPlaceHolder1_cddCustomers. So, I used that in the child CDD, but no joy. Then I tried ctl00$ContentPlaceHolder1$cddCustomers, but still no joy.

How to I get this to work with a MasterPage?

Thanks in advance!

Chris

Doh!  Why is it when you post a question, just after you hit the Submit button, you have an idea that corrects your problem?! ha!

I figured out I should be trying to locate the parent DDL not the parent CDD! Thanks again for the video!

Chris

I want two drop downs, state and county. When the first (table1) and second (table2) dropdowns are selected I want to display/write a list of contacts (table3) associated with the DD's. How can I do this using the above tutorial?

I have the same question as (Hideyoshi : On May 06, 2008 10:27 PM).

What I am trying to understand is the data flow of the controls and what I can easily manipulate and what is to be constant (assumed).

Specifically, I ran debug on the web service and I gathered the output:

All web services designed to interact w/ ajax cascadingdropdown boxes need to be in this pre-determined format. CascadingDropDownNameValue().

Which is actually just a 2 dimensional array [makeValues.ToArray()]in a xml format.

So testing the web service in this way would produce the following xml.

localhost/.../GetMakes

example paramters

knownCategoryValues:(empty string)

category:Make

returns:

- www.w3.org/.../XMLSchema-instance" xmlns:xsd="www.w3.org/.../XMLSchema" xmlns="">http://tempuri.org/">

- <CascadingDropDownNameValue>

 <name>Acura</name>

 <value>1</value>

 <isDefaultValue>false</isDefaultValue>

 </CascadingDropDownNameValue>

- <CascadingDropDownNameValue>

 <name>Audi</name>

 <value>2</value>

 <isDefaultValue>false</isDefaultValue>

 </CascadingDropDownNameValue>

- <CascadingDropDownNameValue>

 <name>BMW</name>

 <value>3</value>

 <isDefaultValue>false</isDefaultValue>

 </CascadingDropDownNameValue>

 </ArrayOfCascadingDropDownNameValue>

My question is the same:

1) Is knownCategoryvalues a reserved word for interacting with web services designed for the control group (CascadingDropDow)?

2> How is it populated or is the answer assumed becaused it is part of the AJAX control. In other words, "this control is just that way, move on" .

I do plainly see where it gets the category field (data) from.

<ajaxToolkit:CascadingDropDown ID="cddMakes"                         runat="server"                                        TargetControlID="ddlMakes"

Category="Make"

so Any help in explaning "knownCategoryvalues" would be appreciated.

thanks,

-Doug Lubey of Louisiana

Hi,

Thank you for this informative example.

I'm personnally trying to do a hierarchy structure with the cascading drop down but unable to do so. I'm using three times the same web service call with the different parent Ids. It works fine for the first and second ddl but for the third I always get a Method error and it changes. Sometimes it's 500, others it's 12030 and other it's 12031...

Any clues on how this can be done? Is there something I'm missing about the calls?

Somehow it works now.

I need to populate the cddDay where it takes two parameters from the other cascading drop downs

GetDayList ==> how should i modify the below code for this to work.

               TargetControlId="ddlMonth"

               LoadingText="[Loading Months...]"

               ServicePath="../LocationService.asmx"

               ServiceMethod="GetMonthList" Enabled="True" />

               TargetControlId="ddlYear"

               LoadingText="[Loading Year...]"

               ServicePath="../LocationService.asmx"

               ServiceMethod="GetYearList" Enabled="True" />

               TargetControlId="ddlDay"

               LoadingText="[Loading Year...]"

               ServicePath="../LocationService.asmx"

               ServiceMethod="GetDayList" Enabled="True" />

Hello!

I wrote a classic ASP application that has 4 dropdown lists using javascript, the first is the driver that fills the other three, and their values are embedded in each of them. They are used for imputing and also for editing the data that comes from a database. I don’t know how to integrate javascript into ASP.NET. After looking at your videos and searching in the web I am still lost as to what to do.

Can you offer some guidance?.

Thanks

A Good video..thanks

I am getting the following error when I view in browser and have no clue what it means.  Any help would be appreciated.  Thanks.

Unable to cast object of type 'AjaxControlToolkit.CascadingDropDown' to type 'System.Web.UI.WebControls.DropDownList'.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidCastException: Unable to cast object of type 'AjaxControlToolkit.CascadingDropDown' to type 'System.Web.UI.WebControls.DropDownList'.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.  

Stack Trace:

[InvalidCastException: Unable to cast object of type 'AjaxControlToolkit.CascadingDropDown' to type 'System.Web.UI.WebControls.DropDownList'.]

  AjaxControlToolkit.CascadingDropDown.CascadingDropDown_Clie ntStateValuesLoaded(Object sender, EventArgs e) +89

  AjaxControlToolkit.ExtenderControlBase.LoadClientStateValue s() +268

  AjaxControlToolkit.ExtenderControlBase.Page_PreLoad(Object sender, EventArgs e) +28

  System.EventHandler.Invoke(Object sender, EventArgs e) +0

  System.Web.UI.Page.OnPreLoad(EventArgs e) +86

  System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1323

----------------------------------------------------------- ---------------------

Version Information: Microsoft .NET Framework Version:2.0.50727.1433; ASP.NET Version:2.0.50727.1433

How would you handle a situation where the primary key of the Cars table was a varchar and not an integer?

In responce to my previous comment I have found a solution to my question. It's not a complete solution as I don't know yet the best way preform the check to make sure the key is a char(or String) but it does work if the PK is a char and not an integer. I just assigned the makeId variable like this:

Dim siteID As String = kv.Item("Site")

I would like to know advantages/disadavantages of using "Casacading dropdowns" over "dropdowns with updatepanel" in terms of performance, scalability where there would be many users and lots of data to be filled.

Hi Joe,

I put CascadingDropDown inside of DetailsView in EditItemTemplate but it's not working and I think they are not compatible with each other.Please advise.

Hello Joe,

how will the control behave if some data of the database is deleted. For example from Car table Audi with carID 2 is deleted and all data about models or colors about Audi. There will be only carID 1 and 3 left. I'm asking this because to the web method is sent the selected index into the drop down list. Instead of sending the selected index can be sent the selected text value to the web method. I was trying to make some changes to the source code of the control but unfortunately I'm newbie with AJAX and I couldn't manage it.

Thanks

Igor

pls just IGNORE my last post, I have understand wrong that the selected index is sent to the web method

hello by is posibility put one input button, for put the values the dropdownlist for example car = acure , Model = integra, color = blue ,,,, i supose this but not working

<script language="javascript" type="text/javascript">

<!--

function Button1_onclick() {

document.getElementById('ddlMakes').value=1;

document.getElementById('ddlModels').value=2;

document.getElementById('ddlColors').value=3;

}

// -->

</script>

Here are four possible solutions to the 500 error:

1) Add attribute System.Web.Script.Services.ScriptService above the web service class.

2) Make sure that the parameters in the target web method have these EXACT names 'knownCategoryValues' and 'category'.

3) Make sure the web service returns data by invoking it on the web page. If a sql error happens or a timeout occurs 500 will be shown because no data returned. If you have to dummy up data and return it before trying to access the db.

4) Some sites need the pathing given a little extra info:

  ServicePath="~/AcquireData.asmx"

HTH

Is there any other solutions?

I still have the same problem at the moment.

I've tried all four possible solutions for the problem but it is still there with the error.

Ok,I have managed to get something running. Try this out and you must be able to get this project to work for you.

This solution defies all logical explanation, but I got it to work. MyMethod() represents the methods in your respective projects.

Test the web service method MyMethod() independently. Leave the first parameter empty.

Pass a string value (say "make") for the second parameter.

If the webservice returns records, then the webservice is OK.

Open the webservice code-behind file in VWD Express & go to the method in question.

Replace the following line:Public Function MyMethod(ByVal knownCategoryValues As String, ByVal category As String) As AjaxControlToolkit.CascadingDropDownNameValue()

with this line:

Public Function GetCarMakes() As AjaxControlToolkit.CascadingDropDownNameValue()

Rebuild project and test. The first dropdown will be populated with values from the database.

Open the project once again in VWD Express and undo the changes made in 3.

Rebuild and test once more. There should be no more problems.

Cheers,

-Shanthanu

<<<<This is a RE-POST OF MY EARLIER POST with some edits. Sorry!>>>

Ok,I have managed to get something running. Try this out and you must be able to get this project to work for you.

This solution defies all logical explanation, but I got it to work. MyMethod() represents the methods in your respective projects.

1.Test the web service method MyMethod() independently. Leave the first parameter empty.

2.Pass a string value (say "make") for the second parameter.

3.If the webservice returns records, then the webservice is OK.

4.Open the webservice code-behind file in VWD Express & go to the method in question.

Replace the following line:

Public Function MyMethod(ByVal knownCategoryValues As String, ByVal category As String) As AjaxControlToolkit.CascadingDropDownNameValue()

with this line:

Public Function MyMethod() As AjaxControlToolkit.CascadingDropDownNameValue()

5. Rebuild project and test. The first dropdown will be populated with values from the database.

6. Open the project once again in VWD Express and undo the changes made in 3.

7. Rebuild and test once more. There should be no more problems.

Cheers,

-Shanthanu

did anyone find the solution to the Method 500 error?  I am getting that now...driving me nutz!  

Hi Joe:

Thank you for your helpful videos. I want to have 2 cascadingdropdowns pulling data from two files: country then state/province. I am using a formview. I have figured out how to make this work in the inserttemplate and the itemtemplate (at least it seems to be working OK). However, when I have the user go to edit mode (edittemplate), the info is displayed correctly, the user can make changes to the dropdowns (or any other field on the form), but when I go to save the changes, I get an error:Input string was not in a correct format. Everthing is working except save in edittemplate. In searching it seems others know the edit mode must be handled differently but I cannot find a post that indicates how to make it work. Any chance you have taken this video to the next level to show how to incorporate ajax toolkit cascadingdropdowns in formview with insert and update?

Thanks,

Dan

This is exactly what I was looking for. I was able to step along with your demo do get a state, city, location scenario set up with no trouble at all. Your clear and precise details about setting up the datasets and table adapters is much appreciated!

Hi Joe,

I have my cascading drop-downs working.

However I am trying to add/delete/manipulate values/row entries once they are built up, via my vb code similar to the way I can with a normal dropdown.

Is this possible?

If so, how do I do it?

Or am I better just using different conditional queries for my cascading dropdowns?

Many Thanks,

Brian

Hi Joe,

I have AJAX HoverMenu and CascadingDropDown Control in one web page(VB ASP).

When HoverMenu popup, it cannot cover the DropDownList Control that are bind to AJAX CascadingDropDown. DropDownList control always show on the top of popup menu.

How to solve this issue?

Thanks,

Ben

Hi Joe,

I liked your video,but one question came in my mind is that

Can we use this cascadind dropdown to work for listboxes?

Do you have any ideas on that?

HI joe,

in this example, How i can put default values with load page for example, begin with car=bmw, Model 7 series, color green,,,,, and 2..for example if i can use a input button that make car =Audi, Model=A6 , color = brown,,, please never i can't do this, and nothing can help my , and i make this question but never i can help my, this is not posibility,, help my please

thanks

What to do if i have one table, which shows year, make, model and type of Engine.

YearID Yearnmae Make Model Engine Part No

1 2000 TOYOTA COROLLA L4 0446512581 FRONT BRAKE PADS

1 2000 TOYOTA COROLLA L4 0449552040 REAR BRAKE PADS

1 2000 TOYOTA COROLLA L4 1780122020 AIR FILTER

1 2000 TOYOTA COROLLA L4 2330021010 FUEL FILTER

What to do if i have one table, which shows year, make, model and type of Engine.

YearID Yearnmae Make Model Engine Part No

1 2000 TOYOTA COROLLA L4 0446512581 FRONT BRAKE PADS

1 2000 TOYOTA COROLLA L4 0449552040 REAR BRAKE PADS

1 2000 TOYOTA COROLLA L4 1780122020 AIR FILTER

1 2000 TOYOTA COROLLA L4 2330021010 FUEL FILTER

I can load the year in first drop down, and Make also in 2nd based on the YearID, but how I can do the model casecade dropdown fill up based on the Make selected, whereas I do not have any ID for the Make,

then how it will work for the Engine when you have no id for Model.

I am stuck please someone help me alwani89 hotmail.com

I have four dropdownlists. The first one is hard coded with ProductType names and id numbers for values. The second dropdownlist needs to populate ProductLines from the hard coded values in the first dropdownlist. From that point on, I need normal cascading dropdown behavior for the third and fourth dropdown lists. How can I get the second dropdownlist to retrieve its values from the first hard coded dropdownlist, and then use the cascading extenders from that point on?

The reason I need this behavior is because I am going to have to hard code the first dropdownlist for every sub-website in our company to differentiate the files that are retrieved from the same database by website.

thank you joe

Hi, i´m curious if there is a chance to use as ServiceMethod not a webservice method, but a page method (the page method can internaly invoke a webservice or not). In the documentation I found the following description about the ServicePath attribute:

ServicePath - Path to a web service that returns the data used to populate the DropDownList. This property should be left null if ServiceMethod refers to a page method. The web service should be decorated with the System.Web.Script.Services.ScriptService attribute.

Well, it says that the attribute ServicePath have to left null. But what about the method decorations of the page methods. Do they still nees an [ScriptService] attribute? Is there anything else to consider?

I wonder why is this case never considered (There is only that one line in the documentation)?!

Thanks in advance!