Shawn Burke's Blog

Pushing the new stuff

How To: Make Tab control panels load "on-demand"

How To: Make Tab control panels load "on-demand"

Rate This
  • Comments 16

Several people have asked about how to make the contents of their tabs load when the user first clicks them, thereby reducing initial page size.

I can think of several ways to do this with varying levels of complexity, but here's away you can do right now with minimal hacking.  We'll think about how to build this in.  But for now...

Basically we can do this with UpdatePanels. 

What we'll do is:

  1. Add an UpdatePanel inside each TabPanel
  2. Add a hidden button to trigger that update panel
  3. Add a Panel with Visible="false" that has the content we want to load inside of it (Visible false prevents it from rendering at all)
  4. Write some JavaScript to trigger that button.

Let's get started.  First, we just create an empty AJAX Enabled project and drop an AjaxControlToolkit TabContainer on the page.  Add some TabPanels:

<act:TabContainer ID="tc1" runat="server" >

<act:TabPanel HeaderText="TabPanel0" runat="server" >

<ContentTemplate>

This is the inital tab.

</ContentTemplate>

</act:TabPanel>

<act:TabPanel HeaderText="TabPanel1" runat="server" >

<ContentTemplate>

We want to load this later.

</ContentTemplate>

</act:TabPanel>

</act:TabContainer>

Next, to each TabPanel, add an UpdatePanel, and inside that a Button and a Panel.  Note the OnClick handler on the Button and the naming of the button and the panel.  On the button, set it's style to "display:none;" so the browser hides it.

<act:TabPanel HeaderText="TabPanel1" runat="server">

<ContentTemplate>

<asp:UpdatePanel ID="up1" runat="server">

<ContentTemplate>

<asp:Button ID="TabButton1" runat="server"  OnClick="TabButton_Click"  style="display:none;"/>

<asp:Panel ID="TabContent1" runat="server" Visible="False">

We want to load this later

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</act:TabPanel>

Now on the server side, we add some code to handle the click.  Again, note how we use the naming. 

Protected Sub TabButton_Click(ByVal sender As Object, ByVal e As System.EventArgs)

' find the sibling with the name that starts with TabContainer

'

Dim containerId As String = "TabContent" & tc1.ActiveTabIndex

Dim panel As Panel = tc1.ActiveTab.FindControl(containerId)

If (Not panel Is Nothing) Then

panel.Visible = True

End If

End Sub

Here, we just flip the Visible property to true.  You could, of course, do a databinding operation here or whatever.

Now we just wire it up.  We add some JavaScript to handle this hookup for us to the top of the page, and set the "OnClientActiveTabChanged" property on the TabContainer. 

<act:TabContainer ID="tc1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="loadTabPanel" > 

Note this WILL NOT set the content for the initial tab.  For the tab you start with, you really should render that to begin with.  If you need to do this dynamically, you'll need to add some code to fire the activeTabChanged event on the TabContainer when it loads.  The JavaScript is fairly straight forward, but I won't paste it in here.  You can grab it from the project.

<script type="text/ecmascript" src="OnDemandTabs.js"/>

Test it - we're done!  When the active tab changes, the UpdatePanel will fire and we'll go back to the server.  Note how this is set up so you can do it for N tabs - just keep using TabButtonX/TabContentX as the naming pattern and it'll work.

 

We can even add an UpdateProgress here to make it look nice, though on the local machine we'll probably never see it.

<asp:UpdateProgress id="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate>Loading...</ProgressTemplate>

</asp:UpdateProgress>

 Presto.  Hope that helps.  Full project attached.  Works in all browsers.

Attachment: OnDemandTabs.zip
Leave a Comment
  • Please add 2 and 6 and type the answer here:
  • Post
  • I translated (on developer fusion) your function above to C# which gave me:

    protected void TabButton_Click(object sender, System.EventArgs e)

       {

           string containerId = "TabContent" + TabContainer1.ActiveTabIndex;

           Panel panel = TabContainer1.ActiveTab.FindControl(containerId);

           if (((panel != null)))

           {

               panel.Visible = true;

           }

       }

    But I get the following error:

    Cannot implicitly convert type 'System.Web.UI.Control' to 'System.Web.UI.WebControls.Panel'. An explicit conversion exists (are you missing a cast?)

    Any thoughts on this?

  • Right - you need a cast on that line:

    Panel panel = (Control) TabContainer1...

  • 摘要本期共有4篇文章(目前ASP.NET日渐凋敝阿,这么少东西都不好意思拿出来,以后不如改成两周推荐一次了):如何根据需要加载某一Tab中的内容ManageStylesTool窗口让Gr...

  • Last week the ASP.NET AJAX Control Toolkit team released Build 10618 of the ASP.NET AJAX Control Toolkit

  • Last week the ASP.NET AJAX Control Toolkit team released Build 10618 of the ASP.NET AJAX Control Toolkit.

  • Last week the ASP.NET AJAX Control Toolkit team released Build 10618 of the ASP.NET AJAX Control Toolkit.

  • i tried the code snippet above... but i am not able to see the gridview in one of the panel.

  • well got it working but everytime i click on the tab it does a full postback so i tried inserting the tabcontainer into update panel so that the postback i async but it doesn't display the content in the tab as it did previously without update panel

  • Hi

    This is a great bit of code and it works well in a c# project I'm developing. However, how do you get the tabs to update the content? I have the tabs populated via a database and the underlying data changes based on a dropdown list (outside of the tabs) so I want to update the data on the tabs when the tabs are clicked on if the data has changed. I can see the  updateControl.click(); in the .js file but can't figure out how to wire this up.

    Cheers

  • 浏览器 UpdatedASP.NETAJAXControlToolkitReleaseandNewASP.NETAJAXVideos/Articles ...

  • 摘要

    本期共有4篇文章(目前ASP.NET日渐凋敝阿,这么少东西都不好意思拿出来,以后不如改成两周推荐一次了): 如何根据需要加载某一Tab中的内容

    ManageStylesToo...

  • Updated ASP.NET AJAX Control Toolkit Release and New ASP.NET AJAX Videos/Articles

  • I tried to download the attached zipped file but it seams to be corrupt and I can't unzip it. Can you please verify that, I have tried to download multiple time but there result was same.

  • Why not just use the OnActiveTabChanged event?  Test for which tab has been clicked then load your tables accordingly.

  • I cant download the zip....seems to be corrupt...Please HELP!!

Page 1 of 2 (16 items) 12