TIP/Trick: Enable/Disable ASP .NET Ajax TabContainer Tabs

Space and content distribution is a very important part when designing a web site. That’s why breaking content into multiple sections using a tabbed widget in order to save space is a commonly used technique these days.

Today I’m going to address a common issue that arises when using a tab widget, which is enabling/disabling specific tabs. But first let’s talk a little bit about the Ajax Control Toolkit. The Ajax Control Toolkit provides a palette of AJAX enabled controls, with the purpose of creating an “interactive web experience”. If you work with ASP .NET, you MUST have heard about ASP .NET AJAX, previously known as ATLAS. You must also have seen and feel familiar with update panels and Microsoft’s ASP.NET AJAX paradigm. Certainly the ASP .NET AJAX framework makes AJAX implementation trivial to anyone.

The tendency of throwing update panels everywhere in order to achieve partial post backs in your page it’s a widely used approach among ASP
.NET AJAX enabled sites. It’s also a common practice to see how every server/client side control on a web page, get replaced with any equivalent found on the AJAX Toolkit provided by Microsoft. If you are using one of these “cutting edge” techniques my friend, let me tell you that you are killing your application performance. And that also, I’m NOT the first one to point this out. The ASP .NET AJAX framework and the AJAX Toolkit have been widely criticized over thousands of technical web blogs. Mainly because by providing a mechanism for “easy” AJAX implementation performance of your web application gets compromised.

Basically,performance gets affected because a lot of web resources get imported when using both the framework and the toolkit. Also the fact that in every “partial post back” you actually send the whole page making HTTP GET/POST actions more bloated when loading your page. You could use Mozilla Firefox’s Firebug plugin to analyze your HTTP requests and the amount of data that gets sent back and forth to the server, or just google about the topic in order to extend your knowledge about this particular subject.

I encourage you guys to use other lightweight javascript frameworks that help you achieve DOM manipulation and asynchronous calls to the server in order to retrieve and send data like jQuery or Prototype.

Show me the code!

So I decided to do two examples instead of one. Besides doing it using the AJAX Control Toolkit. I also did it using jQuery, just to have two
options. So here’s the code.

AJAX Control Toolkit Tab Container

Here’s the HTML:

<div style="width: 500px">
    <cc1:TabContainer ID="TabContainer1" runat="server">
    <cc1:TabPanel HeaderText=”Tab 1” runat=”server” ID=”tpTab1”>
        <ContentTemplate>
            Tab 1 Content!
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel HeaderText=”Tab 2” runat=”server” ID=”tpTab2”>
    </cc1:TabPanel>
        <ContentTemplate>
            Tab 2 Content!
        </ContentTemplate>
    </cc1:TabContainer>
    <p>
        <input type="button" onclick="DisableEnableTab(false,0);" value=”Disable Tab 1” />
    </p>
</div>

And here's the javascript:

function DisableEnableTab(boolVal, tabIndex) {
      var tab = $find('<%=TabContainer1.ClientID%>');
      tab.get_tabs()[tabIndex].set_enabled(boolVal);
}

jQuery

Here’s the HTML:

<div id="tabs" style="width: 500px">
    <ul>
        <li><a href="#tab-1"><span>One</span></a></li>
          <li><a href="#tab-2"><span>Two</span></a></li>
      </ul>
      <div id="tab-1">
          Tab 1 Content!
      </div>
      <div id="tab-2">
          Tab 2 Content!
     </div>
</div>
<p>
    <input type="button" onclick="javascript:DisableTab();" value="Disable Tab 1" />
</p>

And here’s the javascript:

$(document).ready(function() {
  $("#tabs").tabs();
});

function DisableTab() {
       //Selecting another tab
      $("#tabs").tabs('select', 1);

      //Disabling first tab
      $("#tabs").tabs('option', 'disabled', [0]);
}

So there it is, happy coding!