cascading dropdownlist without postback

So, here's the scenario:

I have a .aspx page having two dropdowns, the data to be loaded in them is usually static(but may change everyday), the first dropdown always displays the main categories and the second dropdown is initially empty.

Now, the requirement is:

As the user selects a category from the first dropdownlist, the second dropdownlist should populate based on the selection just made.

The road-block:

This should be done without a postback.

My boss wants something like the drop downs on this page.

So what I gather is, I'd have to retrieve the data from the database on page load event, store it in the cache(or somewhere else?), then use javascript to handle the selectedindexchanged event of the 1st dropdown, use the data from database stored at pageload and populate the second dropdown according to the selected value of first dropdown.

It's been 2 days since I'm开发者_StackOverflow stuck on this and can't seem to find a feasible solution, and in need of great help.

Thanks in advance for throwing any light on the matter.

P.S.- I'm a beginner ASP.Net C# programmer and have no knowledge of Javascript.

Microsoft released the Ajax Control Toolkit which has a Cascading dropdownlist control.

Edit: to boost performance on retrieving the data I suggest that you make use of the Cache object in ASP.NET and cache the data as close to the place as possible where you need it to give it a boost.

Another trick you can do is to send all the information as a json object when you render the page the first time so you don't need to use webservice calls but simply use javascript parsing to read out the json object and extract the information needed from it to fill up your second dropdownlist.

The hard way: Truly do it client-side. There's a sample here to get you started.

The easy way.. Use an Ajax UpdatePanel and do it server-side, but the UpdatePanel will make it not post do a full post-back. (Tutorial here)

The UpdatePanel will be WAY easier and much quicker to code.