AJAX >> Using AJAX to load a usercontrol that requires a custom css file

Summary

The technique demonstrates how to transform a non-AJAX scenario which adds a CSS <link> tag to the head of the page to work with AJAX, using a client-side javascript function to register the  <link>.

Using AJAX in an application is probably the standard now. Partial page rendering offers a number of benefits such as increased page responsiveness, as well as close-to-desktop experience using AJAX-based toolkits such as RadControls for ASP.NET AJAX.

However, adding UpdatePanels to the page and expecting that all of your “postback” logic will continue to function without changes is only true for simple scenarios. There are many more advanced cases where programming logic needs to undergo changes to get things working with AJAX>

It is one such case that I want to discuss – having a user control that registers its own CSS file to the page. The correct way to do it in the postback era, was like this:

//This is the user control page load method

protected void Page_Load(object sender, EventArgs e)

    {

        HtmlLink link = new HtmlLink();

        link.Href = "StyleSheet1.css";

        link.Attributes.Add("type", "text/css");

        link.Attributes.Add("rel", "stylesheet");

        Page.Header.Controls.Add(link);

    }

Actually, the first question that comes to one’s mind is: Why is it that we are using code at all? Why not just output the <link> tag as a part of the control HTML? Like:

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />

Ok, this is sure correct and it will work – regardless of whether you load the control with AJAX or not. But the problem is that it is not XHTML-compliant. XHTML rules mandate that all CSS is registered to the HEAD element of the page, hence the Page.Header.Controls.Add approach.

XHTML compliancy is as important as AJAX – but their requirements are often at odds with each-other, just like in this case. The problem with the Page_Load implementation is that it simply won’t work when the control is loaded through AJAX. Why? The phrase “partial page update” says it all. The part of the page where the control would appear is, of course, updated. But not the head! The header of the page does not get automatically updated when the control is loaded.

My colleague Svetlina Anati and I have prepared a simple project that demonstrates three cases – loading a user control with postback, with AJAX (which does not work OK), as well as an AJAX-based version that works (after all, this is exactly what we want to show you in this post ;)

The approach applied is to register a client-side function to execute when the control is loaded on the page. The function takes care of registering the css file to the head (but first checks to see whether the HEAD tag already contains a <link> tag with such a URL).

Here is a screenshot from the application demonstrating the three scenarios of loading the simple user control.

You can download the sample project from here:UserControlWithCssAndAjax (1)