SIGN UP MEMBER LOGIN:    
ARTICLE

Create Dynamic Tabs using AJAX tab container & add controls & read them dynamically?

Posted by Ravish Sindhwani Articles | AJAX in C# August 02, 2010
In this article we will see that how to create dynamic tabs.
Reader Level:
Download Files:
 

In this article we will see that how to create dynamic tabs.

For making dynamic tabs I will use Ajax Tab Container controls. I will create tabs dynamically, will add controls to each of the tabs dynamically and after that we will read the value of each control on some button click.

Step 1: Open visual studio and create a web site.

1.gif
 
STEP 2: Add the refrence to AjaxToolkit.

2.gif
 
STEP 3: Declare Globally TabContainer.

3.gif
 
STEP 4: Next is we need to create tabs dynamically. We can write code for making Dynamic Tabs in Page_load event also but the problem of writing this code in Pageload event is: If we are creating dynamic tabs for a Sharepoint custom Webpart than it will throw error on postback events. But it will work for normal ASPX pages. For this reason I will write it in Page_Init function.

4.gif

5.gif
 
STEP 5: After creating dynamic tabs we will add dynamic controls to it. Here I will create one asp table and then add the controls to it and after adding controls I will add this dynamically generated table to the tabs of the Tab Container control. 

The reason why I am adding a table is just for formatting. You can directly add controls to the panel.

6.gif
 
STEP 6: Here I have added one button and created one click event on it. This button click event I will use for reading the dynamically generated controls

7.gif
 
Here I used one placeholder PC1 also. If we are creating Dynamic tabs for ASP application than no problem but if we are building it for Sharepoint than it is very helpful. If we are not using it than sometimes postback triggers are showing some ajax javascript error.

Now press F5 and see the result.
 
8.gif

Hope this article will be a help to you!

erver'>
Login to add your contents and source code to this article
share this article :
post comment
 

Beware. If you add dynamic tabs to a tab container that is using vertical tabs you will get a Jscript error. I have yet to find a work around. If anyone knows of one please let me know on this current thread. http://forums.asp.net/t/1760620.aspx/1?Jscript+error+with+dynamic+tab+control

Posted by Ty Barton Jan 20, 2012

Dear Ravish, When page load first time then the control created but what if add dynamic one by one. We can add tabs at first time ti happen. but if we want to add control second time then it does not happen. Kiran Vaghela

Posted by Kiran Vaghela Sep 26, 2011

Ur article is simple and easy to get to understand.can u provide article about how to create a Ajax page for creating greeting card

Posted by Akila Akila Mar 16, 2011

how to create events for the dynamic tabs manually

Posted by madhu soothanan Nov 30, 2010

I am a VB.NET developer. I followed your article word to word but I am getting this error at

PC1.Controls.Add(tbcDynamic)....Please help


"Parameter cannot be Null: Parameter name-Child"

Posted by IT Professional Aug 31, 2010
6 Months Free & No Setup Fees ASP.NET Hosting!
Become a Sponsor
PREMIUM SPONSORS
  • The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
    The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
Team Foundation Server Hosting
Become a Sponsor