Creating TABCONTAINER with ajax dynamically ASP.NET

ReneDev picture ReneDev · Jan 7, 2014 · Viewed 7k times · Source

Within a tabcontainer I wish to show a variety of tabs which will contain different user controls. I need to assign the user controls to the tabs through code, and not assign the user controls as its usually done within the tags, for instance:

<ajaxToolkit:TabPanel runat="server" HeaderText="NOMBRE" ID="TabPanel1"  Enabled ="true" >
    <ContentTemplate>

    </ContentTemplate>
</ajaxToolkit:TabPanel>

For what I need this does not work.

So here is my code to assign the tabs to the user controls, the code is as the fallowing:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
         Control ctrlNombre = LoadControl("~/UserCtrl/Nombre.ascx"); //user control
         TabPanel1.Controls.Add(ctrlNombre);  //add user control to tabpanel     
     }
 }

And the event “onactivetabchanged” I create a menu depending on which tab is active, which will load the control, here is the code:

protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e)
{
    switch(TabContainer1.ActiveTabIndex)
    {
         case 0:
             Control ctrl1 = LoadControl("~/UserCtrl/userControl1.ascx");
             TabPanel1.Controls.Add(ctrlNombre);
             break;
          case 1:
             Control ctrl2 = LoadControl("~/UserCtrl/ userControl2.ascx");
            TabPanel1.Controls.Add(ctrlApPaterno);

    }
 }

However, this actually does work, the problem occurs when I clicked a certain button from some user control, this makes a full post back to the server as it would normally will do, but this post back causes the user control previously loaded disappear. What can I do to solve this? I really hope someone will help me out on this one, I will really appreciate it.

Here is an image of what happens when I clicked a button: Image

Thank you so much guys, I hope someone can help me solve this.

Answer

Vignesh Kumar A picture Vignesh Kumar A · Jan 7, 2014

You may need to recreate the tab panels when the postback occurs in the Page_init because the tabpanels do not exist on post backs until they have been made...

So in Page_init you should call a function that makes the default tab collection and then later on the page you can add a new tab panel to the collection.

protected void Page_Init(object sender, EventArgs e)
{
     Control ctrlNombre = LoadControl("~/UserCtrl/Nombre.ascx"); //user control
     TabPanel1.Controls.Add(ctrlNombre);  //add user control to tabpanel   
}

Refer:

http://dorababu-meka.blogspot.com/2012/12/create-dynamical-ajax-tab-and-filling.html http://www.c-sharpcorner.com/uploadfile/Ravish001/create-dynamic-tabs-using-ajax-tab-container-add-controls-read-them-dynamically/

Hope this makes sense.