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:
We moved our Web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
To start, open Visual Studio 2008. File > New > Web Site > ASP.NET Web Site and name it TabContainer or whatever you would like.
We will begin with adding a ToolkitScriptManager to the page in design View by simply Double clicking it in the ASP.NET AJAX Library or whatever you called it when you installed it into your toolbox. To get the AJAX Toolkit just click here and follow the readme instructions.
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 <TabPanel> we need to add a <ContentTemplate>. Then within the content template we need to add an <UpdatePanel>. Then add a DropDownList and it should look similar to the code block below:
<body>
<form
id="myForm"
runat="server">
<ajaxToolkit:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:TabContainer
ID="TabContainer1"
runat="server"
ActiveTabIndex="4">
<ajaxToolkit:TabPanel
ID="Zone1"
runat="server"
HeaderText="Zone 1">
<ContentTemplate>
<asp:UpdatePanel
ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<fieldset>
<legend>Temperature</legend>
<asp:DropDownList
ID="ddlTemp"
runat="server"
DropDownControlID="Label1">
<asp:ListItem>90</asp:ListItem>
<asp:ListItem>85</asp:ListItem>
<asp:ListItem>80</asp:ListItem>
<asp:ListItem>75</asp:ListItem>
<asp:ListItem>70</asp:ListItem>
<asp:ListItem>65</asp:ListItem>
<asp:ListItem>60</asp:ListItem>
<asp:ListItem>55</asp:ListItem>
</asp:DropDownList>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel> |
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 <tags>. In this case we called the DropDownList Temperature and filled it with some values.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
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:
<asp:Button
runat="server"
ID="btnUpdate"
Text="Update"
OnClick="btnUpdate_Click" />
</asp:button>
<asp:Label
ID="Label1"
runat="server"
ForeColor="green"
Font-Bold="true"
Font-Names="Courier New"
Font-Size="Large">
</asp:Label> |
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.
protected void btnUpdate_Click(object sender, EventArgs j)
{
Label1.Text = "You selected: " + ddlTemp.SelectedItem.Text + " was changed at " + DateTime.Now.ToString();
} |
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.
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
