There seems to be a lot of issues on the ASP.NET Forums with "Theming" the AJAX Control Toolkit's Tab Control. There are lots of requests for samples (one example), but there are limited resources out there. Looking at the Tabs sample page, you will find information on Theming, but it's pretty basic. You will find the various styles that affect the tabs on the bottom of the sample page. Even with this, it leaves something out and people have problems.   I believe the thing that throws people off is how the sample states "If your CssClass does not provide values for any of those then it falls back to the default value."; the default value for the tabs are extremely basic.  The style you most frequently see is the XP tab style (more on this later).

I feel you should begin by looking at the structure of the tab HTML to truly understand how it works. If you are curious about the other HTML structure, check out Firebug. The power of Firebug is truly amazing; this is a sample screenshot but doesn't even come close to paying Firebug justice:

[If anyone from the Microsoft IE team is listening; PLEASE give us this power in IE7 or IE8, the Internet Explorer Developer Toolbar is ok, but it just feels crippled next to Firebug and "Firebug Lite" doesn't fill any of the real gap.]

Let's take a closer look at the tab structure:

As you can see, a tab is constructed of nested <span> tags. The class ajax__tab_outer defines the right side of the tab, the class ajax__tab_inner defines the left side of the tab, and finally ajax__tab_tab defines the middle of the tab as this image shows:

Now that we understand the tab structure, let's work on some styles. In this example, we'll clone the tab styles of Internet Explorer 7 (IE7) under Windows XP. The easiest way to create new styles is to copy that of the ajax__tab_xp which is the default style that you typically see. Browsing the source of the Tab control (which you can download from Codeplex), navigate to the AjaxControlToolkit\Tabs folder and open up Tabs.css. You will find a section called xp theme; this is what we are copying. Looking at the CSS you'll see that the effects for the tab are created using images and for the IE7 style, we will do the same. So in copying the XP style, we create the following images:

• tab-line.gif – Used to underline the header
• tab-right – The right side of the inactive tab
• tab-left – The left side (outer) of the inactive tab
• tab – The inner portion (tab) of the inactive tab
• tab-right-hover – The right side of the hover tab
• tab-left-hover – The left side (outer) of the hover tab
• tab-hover – The inner portion (tab) of the hover tab
• tab-right-active – The right side of the active tab
• tab-left-active – The left side (outer) of the active tab
• tab-active – The inner portion (tab) of the active tab

…and finally create the styles (I have separated the background declarations from the other styles just for simplicity of listing and discussions)

First the backgrounds; this is a carbon copy of the ajax__tab_xp with just our new images replacing the embedded ones.

Finally, the rest of the styles which we'll change a bit from the ajax__tab_xp styles:

Most of the styles are arbitrary (and most are copies from the ajax__tab_xp styles), but the two import styles that effect the tab are the height and padding, underlined in the sample above. The height matches that of the tab images while the padding increases the width and centers the text vertically and horizontally. You could set different left and right paddings to change the text alignment, but in this example we have it centered.

The last thing we need to do is to add the custom CssClass to the Tab Container:

<ajaxcontroltoolkit:tabcontainer id="tabContainer" runat="server" height="300" cssclass="visoft__tab_xpie7">

Finally, everything in place; we get the following tab style:

The three styles are represented in the image: tab, active, and hover. Not a bad reproduction from the original. Obviously, we don't have an image in the header in this example, but this can always be added using the <headertemplate> of the Tab Panel. You can also go a bit farther with the replication and add the thin bar that is below the tabs.

If you'd like, you can download the files for this sample: Full Solution | CSS and Images Only

"ASP.NET AJAX / UpdatePanel aren't working…" – this is probably the number one complaint/question found on the ASP.NET AJAX Forums. I decided it would probably be a good idea to discuss some of the common issues I've seen:

1. xhtmlConformance – This is a common gotcha as described in detail on Scott Guthrie's blog. <xhtmlConformance mode="Legacy" /> will not work with ASP.NET AJAX. The thing that people often miss with this is sometimes this is set in the server's machine.config. You can override this setting in your particular application, see MSDN for details. Note, if you aren't having an issue, there isn't really a need to set this. However, the settings you want for ASP.NET AJAX are either:
   • <xhtmlConformance mode="Transitional" />
   • <xhtmlConformance mode="Strict" />

    

2. Installing ASP.NET AJAX – Users often don't install the ASP.NET AJAX Extensions which is an easy problem to fix. The first thing to check out is the ASP.NET AJAX docs: Installing ASP.NET AJAX. You can download the Extensions on the AJAX Download Page. Remember, these Extensions need to be installed on your web server as well as your development machine. Also, if you are using Visual Studio 2005, you need to have Visual Studio 2005 SP1 installed. SP1 installs the components needed to begin developing with ASP.NET AJAX (such as the UpdatePanel, ScriptManager, etc). Check out the Web Dev Tools blog for the web specific changes in Visual Studio SP1. Note that SP1 is a BIG install; it takes quite a while to install. One other thing to note here, some users are still using the old, pre-release, Atlas UpdatePanel and ScriptManager. It is highly recommended that you upgrade these to at least version 1.0.

    

3. Configuring AJAX – Another common issue is attempting to use AJAX goodness on an old, "non-ASP.NET AJAX" site. Basically, unless you create an ASP.NET AJAX Web Site using the new template that Visual Studio SP1 adds (ASP.NET AJAX Enabled Web Application), AJAX will not work without some configuration on your part. All that needs to be done is to modify your web.config file with the specific ASP.NET AJAX settings. Refer to the ASP.NET AJAX docs for more information, specifically Configuring ASP.NET AJAX. If you are having issues with configuring your web.config (for example, this post), my recommendation is to create a new "ASP.NET AJAX Enabled Web Application", copy the web config and make the specific changes to that copy that you need for your particular site. Then use this web.config in your old site…

    

4. Controls Not Compatible w/ UpdatePanel – another very common problem is with controls not operating as expected within the UpdatePanel. Looking at the UpdatePanel Control Overview in the docs, have a look at the section titled "Controls that Are Not Compatible with UpdatePanel Controls". The most common issue with controls seems to be the Validators. Looking at the docs, you can "fix" the validators by simply setting the EnableClientScript property to "false". Also there are ASP.NET AJAX compatible validators in the in the works, see Matt Gibbs blog for more information on this.

    

Well, while this isn't a complete list of problems that you may find, hopefully it sums up about 90% of them out there. In addition to these issues, I know users have problems with UpdatePanel Triggers, User Controls in UpdatePanels, and UpdatePanels in MasterPages. It's a good idea to read through the ASP.NET AJAX docs to become familiar with the controls. Also, check out the AJAX Videos which discuss usage of not only the UpdatePanel but also the AJAX Control Toolkit.

I've seen some posts of users asking about parsing HTML in .NET.  Lots of people use RegEx which is OK, but wouldn't it be nice to use XPath.  Problem with this is that most sites have mangled HTML not even close to XHTML which is needed to utilize XML tools.  It peaked my interest, so I decided to look a bit further.

I came across Chirs Fulstow's Blog and he discussed the HTML Agility Pack.  It's been around for quite a while and while I haven't tried it out first hand yet, it sounds great.  You can get the latest version of the HTML Agility Pack on CodePlex: http://www.codeplex.com/htmlagilitypack. 

Hopefully this will help out those users trying to parse HTML out there... 

I received an interesting error today when I tried to create a WebForm which didn't have any content on it. 

Using themed css files requires a header control on the page. (e.g. <head runat="server" />).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: Using themed css files requires a header control on the page. (e.g. <head runat="server" />). 

Fair enough, I do have a Theme set in my Web.Config, so on to disable themes for the page, a la:

If you are interested in this topic, you should check out the new post: "Modal UpdateProgress for UpdatePanel - Revisited" on this topic.  The solution in this post had some issues that have been corrected in the new post.

I’ve seen a lot of requests on the ASP.NET forums for ways to display disable an UpdatePanel during an update.  I’ve seen quite a few complex techniques to achieve this, but by using standard controls you can create a nice looking modal progress indicator.  Using the UpdateProgress control, there is an easy way to make the progress indicator modal with little code and a bit of CSS.

First, let’s start with the code:

<asp:updateprogress associatedupdatepanelid="UPDATEPANELID" id="updateProgress" runat="server">

    <progresstemplate>

        <div id="progressBackgroundFilter"></div>

        <div id="processMessage"> Loading...<br /><br /><img alt="Loading" src="images/ajax-loader.gif" /></div>

    </progresstemplate>

</asp:updateprogress>   

Pretty simple code… basically the only “custom code” are the two DIVs.  The first, progressBackgroundFilter is used to blank out the page.  The second is the message to display.  In this case, it’s just text and an animated gif.

The rest of the code is just CSS.  In this example, I am using the id selector approach of CSS to add the styles to the DIVs but you can of course changed these to class names.

#progressBackgroundFilter {
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  overflow:hidden;
  padding:0;
  margin:0;
  background-color:#000; 
  filter:alpha(opacity=50);
  opacity:0.5;
  z-index:1000;
}

#processMessage { 
  position:absolute; 
  top:30%; 
  left:43%;
  padding:10px;
  width:14%;
  z-index:1001;
  background-color:#fff;
} 

The progressBackgroundFilter is what blanks out the screen.  This operates like standard modal code by simply overlaying a DIV on top of the content using absolute positioning.  The z-index is what sets it to be over the content; this number can be anything, but I set it to 1000 so it would be much higher than any other absolutely positioned object.  The filter is used to set the transparency in IE while the opacity is for FireFox; both set the transparency to half.  Finally, the processMessage styles position a div above the background filter (z-index is set to 1001).  The top, left and width are set to percentages to horizontally center the box and the top is arbitrarily placed 30% from the top.

In the inital post, I mistakenly left out some of the CSS properties.  The bold styles are new and they should now work successfully...

KNOWN ISSUES:

This technique was tested with IE 7 and FireFox. 

This technique works well when your page doesn't scroll, but has a few problems when there is a scrollbar involved.  The problem is with position:absolute, it can't seem to figure out bottom:0px when you scroll.  One way around this is to use postion:fixed instead, but this has problems in IE6. Even with this, there is no way to overlay the browser's scrollbar.  The only real option is to use JavaScript to position the background and message, such as subModal: http://sublog.subimage.com/articles/2006/01/01/subModal.  Even this doesn't blank out the browser's scrollbars though.

The best condition for making modal items work easily is using a separate container DIV and hiding the browser's scrollbar.  One of my favorite layouts is Stu Nicholls' approach to a fixed layout: http://www.cssplay.co.uk/layouts/fixit.html (also see the rest of his website for some real awesome CSS fun).  With this approach, the overlay can block out the scrollbars as well.

There is a demo of the modal UpdateProgress over at http://www.visoftinc.com/samples/UpdateProgress.aspx.  This demo isn't using the inner container, so you can see the known issue if you shrink the window to have scrollbars appear.