Dheeraj's Tech Wiki

Recently I noticed that there was a control named ToolkitScriptManager in the ASP.NET AJAX Control Toolkit and I was wondering how it was different from the regular ScriptManager. After reading this wonderful blogpost I came to know that ToolkitScriptManager will combine all the ASP.NET AJAX scripts by default. I decided to run a small test to see how exactly this effects performance and the results were quite impressive. I first created a simple page with the ScriptManager and the AJAX Calendar Extender control. Below is the screenshot from firebug:



As you can see from the above screenshot that with the ScriptManager control we are making 15 requests to the server, page size is 168.4kb and it takes 5.62 seconds to load this page. Now lets see how ToolScriptManager changes these numbers:



Now the you can see that the number of requests have come down to 7, page size is 124kb and it takes only 4.03 seconds to load this page.

All you need to do is just REPLACE

WITH

Conclusion: Imagine if you are saving 8 requests, 44kb of data and 1.59 seconds of load time on a page with a single AJAX Control. How much performance gain would you get on a page with update panels and many AJAX controls?

I wanted to add some Tab Panels to my ASP.NET AJAX Tab container from my code behind file. Below is the code on my .aspx page:

Blow is my code in the aspx.cs file to add two new tab panels to the tab container:

TabPanel t1 = new TabPanel();
            t1.ID = "Tab1";
            t1.HeaderText = "Tab:1";

            TabPanel t2 = new TabPanel();
            t2.ID = "Tab2";
            t2.HeaderText = "Tab:2";

            TabContainer1.Tabs.Add(t1);
            TabContainer1.Tabs.Add(t2);

Pretty straight forward stuff. But to my astonishment when I ran the page I couldn't see my tab control in the browser. Below is the HTML generated for my two tab panels:

<div id="TabContainer1_Tab1" class="ajax__tab_panel" style="display:none;visibility:hidden;">
</div>
<div id="TabContainer1_Tab2"; class="ajax__tab_panel" style="display:none;visibility:hidden;">
</div>

As you can see from the above HTML that my two tab panels visibility is set to hidden by default. In order make the tab control visible we have to set the ActiveTabIndex for thr tab container as follows:

TabContainer1.ActiveTabIndex = 0;