Hey guys, i'm new to this stuff. I've searched for hours but couldn't find an appropriate solution for my problem. i'm sure that it's not a big deal, but somehow i can't figure out how to solve this.
the problem is the following:
I have a website with a menu and other not so importent content on it. There is also a TabContainer inside an UpdatePanel.
I want to implement multiple Tabs which contain a single UserControl for each Tab. These Tabs should be add -and removable. So when i click on button of the menu a new Tab opens up and gets filled with the correct User Control.
I've tried the following:
Dim myTab As New AjaxControlToolkit.TabPanel
Dim Member As System.Web.UI.Control = LoadControl("~/Member.ascx")
myTab.Controls.Add(Member)
TabContainer1.Tabs.Add(myTab)
Somehow i get a tab, but i have to click on the tab to display my user control at the same time i get an ArgumentOutOfRangeException followed by a time out.
Any idea what i've done wrong?
thanks in advance!
Need to see your code if possible
Yes, please show us a simple repro. It's hard to tell why from your current description.
It's more a question in general. Is it correct that i only place the tabcontainer on my page and add the tabpanels dynamically via my code behind file?..like already mentioned in the post before:
Dim myTab As New AjaxControlToolkit.TabPanel
Dim Member As System.Web.UI.Control = LoadControl("~/Member.ascx")
myTab.Controls.Add(Member)
TabContainer1.Tabs.Add(myTab)
What else do I have to take care of when I want to implement add and removeable tabs? i think it's not possible to add and remove updatepanels at runtime right?
I figured out that the "ArgumentOutOfRangeException" disapears if I put the code above in the page init event, but that doesn't really help me at all, because the Tabpanels should be created when i click on one of my menu buttons.
thanks in advance!
Generally, the code and logic you've shown is correct.
I'm asking for a simple repro because I'm not sure where is the exception thrown, and suspect this might have something to do with the page life cycle.
I fixed the exception by adding the code into the page init event (the user control was loaded into a tab before it existed). i'm sure your're right that it has something to do with my page life cycle. The question is: is it possible to remove and add the same tab during the page life cycle?
Thanks for the quick reply!
muffos:
The question is: is it possible to remove and add the same tab during the page life cycle?
Yes, of course you can.
Hallo again,
The page works perfect if I add the TabPanel with the UserControl inside during the page_init event, but that is not a fitting solution. If I put the code that adds the Tabpanel in a button click event the tab is not displayed and I get an error like the following (translated error message):
An Error occured during the validation of the ViewState-MAC. If this apllication was hosted by a webfarm or a cluster make sure that the <machineKey> configuration indicates the same validationKey and validation algorithm. AutoGenerate can not be used in a cluster.
Any idea why i get this error?
Could you give me a short example of a aspx page where you at and remove ajax tabs by clicking on a button?
I really appreciate your help!
I found an older thread where they were discussing the same problem that I have right now.
http://forums.asp.net/p/1077423/1595745.aspx
They didn't find a solution either. Ideas on this?!?!
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void LinkButton1_Click(object sender, EventArgs e) { TabContainer1.Tabs.RemoveAt(TabContainer1.ActiveTabIndex); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"> <ContentTemplate> Tab 1 </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> <ContentTemplate> Tab 2 </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3"> <ContentTemplate> Tab 3 </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Remove Current Tab</asp:LinkButton> </form></body></html> Is this what you need?Well, I managed to add one dynamically created tab with a user control inside without getting any error. Somehow i'm not able to add any more Tabs.
Here is my current code:
PartialClass _Default
Inherits System.Web.UI.PagePrivate _memberAs System.Web.UI.Control
Private _TestSeite2As System.Web.UI.Control
ProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.LoadTimeLabel.Text = DateTime.Now
EndSub
ProtectedSub LinkButton1_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles LinkButton1.ClickDim myTabAsNew AjaxControlToolkit.TabPanelTabContainer1.ActiveTabIndex = 0
myTab.Visible =True
EndSub
ProtectedSub LinkButton2_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles LinkButton2.ClickDim myTab2AsNew AjaxControlToolkit.TabPanelTabContainer1.ActiveTabIndex = 1
myTab2.Visible =True
EndSub
ProtectedSub TabContainer1_Init(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles TabContainer1.InitIf Page.IsPostBackThen
TabContainer1.Tabs.Clear()
_member = LoadControl("~/Member.ascx")Dim myTabAsNew AjaxControlToolkit.TabPanel
myTab.HeaderText ="Tab 1"
TabContainer1.Tabs.AddAt(0, myTab)
myTab.Controls.Add(_member)
EndIf
//// i know that the following loop doesn't make any sence, it's just the result of my frustration :)
If Page.IsPostBackThen
_member = LoadControl("~/Testseite2.ascx")Dim myTab2AsNew AjaxControlToolkit.TabPanel
myTab2.HeaderText ="Tab 2"
TabContainer1.Tabs.AddAt(1, myTab2)
myTab2.Controls.Add(_member)
myTab2.Visible =True
EndIf
EndSubEndClass
//////////////////////and here my aspx page:
<%@.PageLanguage="VB"AutoEventWireup="true"CodeFile="ItellU.aspx.vb"Inherits="_Default"enableEventValidation="false"viewStateEncryptionMode="Never"enableViewStateMac="false" %><%@.RegisterSrc="Member.ascx"TagName="Member"TagPrefix="uc1" %>
<%@.RegisterSrc="Testseite2.ascx"TagName="Testseite2"TagPrefix="uc1" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Untitled Page</title>
<linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/></head>
<bodystyle="background-color: #e3efff">
<formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager"runat="server"EnablePartialRendering="true">
</asp:ScriptManager>
<div>
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="conditional"ChildrenAsTriggers="false">
<ContentTemplate>
<asp:PanelID="Timer"style="z-index:100; position: absolute; top: 584px; left: 27px"runat="server"Height="50px"Width="125px">
<asp:UpdatePanelID="UpdatePanelTimer"runat="server">
<ContentTemplate>
<asp:LabelID="TimeLabel"runat="server"style="vertical-align: middle; border-top-style: none; border-right-style: none; border-left-style: none; background-color: white; text-align: center; border-bottom-style: none"BackColor="White"Height="25px"Width="180px"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="Timer1"EventName="Tick"/>
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
<asp:TimerID="Timer1"runat="server"Interval="900">
</asp:Timer>
<tablestyle="z-index: 119; left: 234px; width: 897px; position: absolute; top: -4px; height: 844px; border-left-color: #a9c0df; border-bottom-color: #a9c0df; border-top-style: ridge; border-top-color: #a9c0df; border-right-style: ridge; border-left-style: ridge; border-right-color: #a9c0df; border-bottom-style: ridge;">
<tr>
<tdstyle="width: 437px; height: 443px"valign="top"><ajaxToolkit:TabContainerID="TabContainer1"runat="server"height="0px"OnInit="TabContainer1_Init">
</ajaxToolkit:TabContainer>
</td>
</tr>
</table><asp:LinkButtonID="LinkButton1"runat="server"Style="z-index: 108; left: 10px;
position: absolute; top: 120px;"CssClass="linkbuttonBlue">neue Auftragsdienstleistung</asp:LinkButton>
<asp:LinkButtonID="LinkButton2"runat="server"Style="z-index: 109; left: 10px;
position: absolute; top: 143px;"CssClass="linkbuttonBlue">GDL Zuordnung
</asp:LinkButton>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="LinkButton1"EventName="Click"/>
<asp:AsyncPostBackTriggerControlID="LinkButton2"EventName="click"/></Triggers>
</asp:UpdatePanel></div>
</form>
<scripttype="text/javascript">
function setBodyHeightToContentHeight() {document.body.style.height = Math.max(document.documentElement.scrollHeight,
document.body.scrollHeight)+"px";}
setBodyHeightToContentHeight();
window.attachEvent('onresize', setBodyHeightToContentHeight);</script>
</body>
</html>
please remember, that i'm new to this stuff :)
thanks in advance!
What's wrong with your code? I suppose it's working fine.
Two panels are created, and whenever you click on a linkButton, a corresponding tab panel will be actived.
<%@. Page Language="VB" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load TimeLabel.Text = DateTime.Now End Sub Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton1.Click Dim myTab As New AjaxControlToolkit.TabPanel TabContainer1.ActiveTabIndex = 0 myTab.Visible = True End Sub Protected Sub LinkButton2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles LinkButton2.Click Dim myTab2 As New AjaxControlToolkit.TabPanel TabContainer1.ActiveTabIndex = 1 myTab2.Visible = True End Sub Protected Sub TabContainer1_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles TabContainer1.Init If Page.IsPostBack Then TabContainer1.Tabs.Clear() Dim _member As New TextBox() '= LoadControl("~/Member.ascx") Dim myTab As New AjaxControlToolkit.TabPanel myTab.HeaderText = "Tab 1" TabContainer1.Tabs.AddAt(0, myTab) myTab.Controls.Add(_member) End If '//// i know that the following loop doesn't make any sence, it's just the result of my frustration :) If Page.IsPostBack Then Dim _member As New TextBox() ' = LoadControl("~/Testseite2.ascx") Dim myTab2 As New AjaxControlToolkit.TabPanel myTab2.HeaderText = "Tab 2" TabContainer1.Tabs.AddAt(1, myTab2) myTab2.Controls.Add(_member) myTab2.Visible = True End If End Sub </script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"><title>Untitled Page</title><link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head><body style="background-color: #e3efff"><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true"></asp:ScriptManager><div><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional" ChildrenAsTriggers="false"><ContentTemplate> <asp:Panel ID="Timer" style="z-index:100; position: absolute; top: 584px; left: 27px" runat="server" Height="50px" Width="125px"> <asp:UpdatePanel ID="UpdatePanelTimer" runat="server"> <ContentTemplate> <asp:Label ID="TimeLabel" runat="server" style="vertical-align: middle; border-top-style: none; border-right-style: none; border-left-style: none; background-color: white; text-align: center; border-bottom-style: none" BackColor="White" Height="25px" Width="180px"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> </asp:UpdatePanel> </asp:Panel><asp:Timer ID="Timer1" runat="server" Interval="900"></asp:Timer> <table style="z-index: 119; left: 234px; width: 897px; position: absolute; top: -4px; height: 844px; border-left-color: #a9c0df; border-bottom-color: #a9c0df; border-top-style: ridge; border-top-color: #a9c0df; border-right-style: ridge; border-left-style: ridge; border-right-color: #a9c0df; border-bottom-style: ridge;"><tr><td style="width: 437px; height: 443px" valign="top"> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" height="0px" OnInit="TabContainer1_Init"></ajaxToolkit:TabContainer> </td></tr></table><asp:LinkButton ID="LinkButton1" runat="server" Style="z-index: 108; left: 10px;position: absolute; top: 120px;" CssClass="linkbuttonBlue">neue Auftragsdienstleistung</asp:LinkButton> <asp:LinkButton ID="LinkButton2" runat="server" Style="z-index: 109; left: 10px;position: absolute; top: 143px;" CssClass="linkbuttonBlue">GDL Zuordnung</asp:LinkButton> </ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click"/><asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="click"/></Triggers></asp:UpdatePanel></div></form><script type="text/javascript">function setBodyHeightToContentHeight() {document.body.style.height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)+"px";}setBodyHeightToContentHeight();window.attachEvent('onresize', setBodyHeightToContentHeight);</script> </body></html>I found a solution, check this out.
it works nearly perfect, but i use a hidden tab to keep my tabcontainer alive. I think this code might help you if you want to implement AJAX Tabs with rich functionality.
PartialClass _DefaultInherits System.Web.UI.Page
Private _memberAs System.Web.UI.ControlPrivate _TestSeite2As System.Web.UI.Control
Private myTabAs AjaxControlToolkit.TabPanelPrivate myTab2As AjaxControlToolkit.TabPanel
Private tabbitabAs AjaxControlToolkit.TabPanelProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.LoadTimeLabel.Text = DateTime.Now
If Session.Item("CreateTab")IsNothingThen
Session.Add("CreateTab",False)EndIf
EndSub
ProtectedSub LinkButton1_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles LinkButton1.ClickIf Session.Item("button1clicked")IsNothingThen
Session.Add("button1clicked",True)Else
Session.Item("button1clicked") =True
EndIf
If Session.Item("UpdateUpdatePanel")IsNothingThen
Session.Add("UpdateUpdatePanel",True)Else
Session.Item("UpdateUpdatePanel") =True
EndIf
EndSub
ProtectedSub LinkButton2_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles LinkButton2.ClickIf Session.Item("button2clicked")IsNothingThen
Session.Add("button2clicked",True)Else
Session.Item("button2clicked") =True
EndIf
If Session.Item("UpdateUpdatePanel")IsNothingThen
Session.Add("UpdateUpdatePanel",True)Else
Session.Item("UpdateUpdatePanel") =True
EndIf
EndSub
ProtectedSub TabContainer1_ActiveTabChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles TabContainer1.ActiveTabChangedEndSub
ProtectedSub TabContainer1_Init(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles TabContainer1.InitIf IsPostBackThen
TabContainer1.Tabs.Clear()
If Session.Item("CreateTab")Then
tabbitab =New AjaxControlToolkit.TabPaneltabbitab.HeaderText =""
TabContainer1.Tabs.Add(tabbitab)
TabContainer1.ActiveTab = tabbitab
TabContainer1.ActiveTabIndex = TabContainer1.Tabs.Count
EndIf
If Session.Item("button1clicked")Then
_member = LoadControl("~/Member.ascx")myTab =New AjaxControlToolkit.TabPanel
myTab.HeaderText ="neue Auftragsdienstleistung"
TabContainer1.Tabs.Add(myTab)
myTab.Controls.Add(_member)
TabContainer1.ActiveTab = myTab
TabContainer1.ActiveTabIndex = TabContainer1.Tabs.Count
EndIf
If Session.Item("button2clicked")Then
_member = LoadControl("~/Testseite2.ascx")myTab2 =New AjaxControlToolkit.TabPanel
myTab2.HeaderText ="GDL Zuordnung"
TabContainer1.Tabs.Add(myTab2)
myTab2.Controls.Add(_member)
TabContainer1.ActiveTab = myTab2
TabContainer1.ActiveTabIndex = TabContainer1.Tabs.Count
EndIf
If Session.Item("UpdateUpdatePanel")Then
UpdatePanel1.Update()
Session.Item("UpdateUpdatePanel") =False
EndIf
EndIf
EndSubProtectedSub CloseTabButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles CloseTabButton.Click
If IsPostBackThen
Try
If TabContainer1.ActiveTabIs myTabThen
Session.Item("button1clicked") =False
EndIf
If TabContainer1.ActiveTabIs myTab2Then
Session.Item("button2clicked") =False
EndIf
Catch exAs ExceptionSession.Item("button1clicked") =False
Session.Item("button2clicked") =False
EndTry
Session.Item("UpdateUpdatePanel") =True
Session.Item("CreateTab") =True
EndIf
EndSubEndClass
but still thanks a lot
Zaid Amer: