This tutorial will show you how to add UpdatePanels within a TabContainer using ASP.NET 3.5 AJAX C#.

In this tutorial we will demonstrate how to add two UpdatePanels with two DropDownLists in each UpdatePanel and display two seperate results within a TabContainer using ASP.NET 3.5 AJAX.

Here is a snapshot of what the final product looks like:

To start, open Visual Studio 2008. File > New > Web Site > ASP.NET Web Site and name it TabContainer or whatever you would like.

Then Let’s double-click on the TabContainer, located just under the ToolkitScriptManager under the ASP.NET AJAX Library tab that we just added. Then we need to add a TabPanel. Within the we need to add a . Then within the content template we need to add an . Then add a DropDownList and it should look similar to the code block below:

We are creating a TabContainer with two UpdatePanels that are independent of each other. We simply placed a DropDownList within the UpdatePanel and made sure to use the correct syntax and formatting . In this case we called the DropDownList Temperature and filled it with some values.

Next we need to add a submit button so when the user chooses the correct value from the DropDownList it is accepted and displayed with a label within the UpdatePanel with a TimeStamp. It should look similar to this:

Of course, all the markup above is located in between </asp:DropDownList> and </fieldset> tags.

Here is the code behind. The btnUpdate_Click event is called and displays a message within that specific UpdatePanel with a timeStamp to know when the temperature was changed.

This is a pretty cool feature with the AJAX Toolkit. Here are some helpful hints in case you get lost in all the markup. Notice how the TagPrefix=”ajaxToolkit” and also notice where and how the TagPrefixes are used. You can also see where the TabContainer and is located in the AJAX Toolkit.

Download Source Files