Prior to utilizing Ajax making a page with tabs was a bit of a pain. I would setup a MultiView and add in Views for each tab. Ajax’s Tab Container control is much easier to use. I’ve listed below the order on a sample aspx file that I setup the various Ajax controls to get it all to work.
The only real tricks I saw were to add the ScriptManager and the order of the TabContainer/TabPanel/ContentTemplate. The ScriptManager and Tab controls went inside the <div> and I made sure that the toolkit was registered as cc1.This example is in no way comprehensive, just a simple way to get some clean looking tab functionality on a aspx page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" Style="z-index: 17; left: 0px; position: absolute; top: 50px" Height="582px" Width="1519px" ActiveTabIndex="0" Enabled="true" >
<cc1:TabPanel runat="server" ID="ajaxPanel1" HeaderText="test1">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Height="59px" Style="z-index: 100; left: 12px; position: relative; top: 22px" Text="Test 1" Width="105px" />
<asp:Button ID="Button2" runat="server" Height="59px" Style="z-index: 102; left: 23px;position: absolute; top: 211px" Text="Test 2" Width="150px" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel runat="server" ID="TabPanel1" HeaderText="test2">
<ContentTemplate>
<asp:Button ID="Button3" runat="server" Height="59px" Style="z-index: 100; left: 221px; position: relative; top: 18px" Text="Button2" Width="105px" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestConnectionString %>"
SelectCommand="sptest_select" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" Style="z-index: 102; left: 74px; position: absolute;top: 239px" DataSourceID="SqlDataSource1" >
</asp:GridView>
</ContentTemplate> </cc1:TabPanel>
<cc1:TabPanel runat="server" ID="TabPanel3" HeaderText="test3">
<ContentTemplate>
<asp:Button ID="Button3" runat="server" Height="59px" Style="z-index: 100; left: 12px; position: relative; top: 22px" Text="Orig Button" Width="105px" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
</form>
</body>
Technorati Tags:
AJAX,
ASP.Net