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)

Note: this is a .zip file and should change the file extention to .zip when you download it.

About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.