AJAX >> Using AJAX to load a usercontrol that has refers to a custom css file
Posted by: the telerik blogs,
on 03 Oct 2008 |
View original | Bookmarked: 0 time(s)
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
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.
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>
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
//This is the
user control page load method
protected void Page_Load(object sender, EventArgs e)
HtmlLink link = new HtmlLink();
link.Href = "StyleSheet1.css";
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?
<link href="StyleSheet1.css" rel="stylesheet"
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
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
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 ;)
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).
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.