Looking for a Tutorial Based on the AJAX control CascadingDropDown Extender?

Have you looked for a car recently? Visited a used car website lately? noticed how they had a dropdown menu?

Well they were using a CascadingDropDown or a variation of it.

The CascadingDropDown Extender is a Drop down menu where you can categorize your data, and by using a Web Service Method, you can avoid PostBack and have a much smoother transition between DropDowns.

In Today’s example were going to utilize this tool like you would in a Used Car Website,

We’re going to use an XML file with Data in it, you can build your own Data, but we suggest you download the Source file as this is a bit of a tough Extender to use and it can get confusing quite quickly.

The DropDown Works as if it was a little server, To render it shortly for those who do not know CascadingDropDown is an extender control used to fill the data in one DropDownList depending on the value chosen in another DropDownList. It gets all the necessary data through AJAX using a web method.

Step 1. Let’s Begin the Project

1. We can begin by ppening a new Website in Visual Studio 2010.
Then we can add a new webform we will name is CascadingDropDown.aspx.
2. Then we will want to add a web service named CarsService.asmx. The web service is what we will store the data for the DropDownlist on our “little server” like we mentioned above.
3. Now let’s move to Design View in Visual Studio and Let’s Add a DropDownList and CascadingDropDown to the DropDownList.
4. After that we can set a label just to show what you which vehicle you selected.
5. Now here is the important part. You must set the Target Control Properly if you are doing this on your own. , Remember to Set the Service Path and Service Method and Parent Control. You must either define an XML Source or a Database Source to display the dropdown data. To See the Rest of the Web Service Method Download the Rest of the source file

The markup of the page will look like:

Conclusion

In Today’s example we showed you how a CascadingDropwdown works and wow to manipulate it using Web Service Methods.
Now aternatively a Database can be used as well, and we will also be doing a tutorial on how to set up a CascadingDropDown Extender with a Database File
This CascadingDropdown can be used in a variety of ways to enhance your end users online experience by allowing them to narrow down by brand, type and or weight or whatever you can think of. This tool can seem a little confusing at first, but to avoid any confusion we recommend you to download the Source File to follow along.