Get a<HEAD> with ASP.NET 2.0

11 December 2006 - 11:43 PM / by Dominic Pettifer. 5 Comments for Get a<HEAD> with ASP.NET 2.0.

Technical Article - New in ASP.NET 2.0 is the ability to add runat="server" to the pages <head> tag. This lets you programmatically modify the head element and other elements inside it such as, Title, adding JavaScript code and style attributes, plus many more. Here I show how this is done.

Link Tags

Link tags allow us to add links to external resources, such as CSS files, JavaScript files, RSS feeds and so on. This is useful in that the browser will cache these external resources, instead of downloading them again if they were embedded amongst the HTML mark-up or in the head tag. This will help cut down on bandwidth and make pages download quicker.

HtmlLink cssLink = new HtmlLink();
cssLink.Href = "styles.css";
cssLink.Attributes.Add("rel", "Stylesheet");
cssLink.Attributes.Add("type", "text/css");

this.Header.Controls.Add(cssLink);

This will add the following link to the head...

<link rel="Stylesheet" href="styles.css" type="text/css" />

Note: Funny how there's no type safety via properties for the 'rel' and 'type' attributes.

JavaScript Code

Finally we can also add JavaScript code to our page. This is done pretty much the same way as style elements...

HtmlGenericControl javaScript = new HtmlGenericControl("script");
javaScript.Attributes.Add("type", "text/javascript");
javaScript.InnerText = "alert('Hello World!');";

this.Header.Controls.Add(javaScript);

Although there is perhaps a slightly better way to do it via the ClientScript property that exposes a ClientScriptManager object. With this object we can use the RegisterClientScriptBlock() method to dynamically render a JavaScript block just after the start of the form element (we need a form element with runat="server" somewhere in the page for this to work)...

this.ClientScript.RegisterClientScriptBlock(this.GetType(),
    "Script Name", "alert('Hello World!');", true);

The second argument 'Script Name' is a unique name for the script block. If we repeat this code again we'll still end up with one script block, however if we change the name to 'Script Name 2' for the second line we'll have two script blocks.

This is useful for custom user/server controls that rely on JavaScript for their implementation, as it stops multiple JavaScript blocks being added if the same control is used multiple times in a page (see upcoming blog on custom server controls).

The other approach is to use the RegisterStartupScript() method. This behaves exactly the same as the RegisterClientScriptBlock() method, except with RegisterStartupScript() the JavaScript block is rendered just before the final </form> closing tag.

As its name suggests, we can run startup scripts in items inside the form element of our page (or even items before then), because the script block is rendered last, and other elements before it have already been rendered in the page flow ready to be manipulated by the script block (via CSS/DOM).

Conclusion

Thanks for reading and hope you have found this article useful. I don't claim to be some expert guru or anything, so I have probably missed out something important here, or got something completely wrong. If I have then please drop me a line, or leave a comment. Thank you!

Jump to Page...

Title, Meta Tags and Style Elements
Link Tags and JavaScript Code

Get a<HEAD> with ASP.NET 2.0

Link Tags

JavaScript Code

Conclusion

5 Comments on "Get a<HEAD> with ASP.NET 2.0"

Re:

Yippee!

RE: Get a<HEAD> with ASP.NET 2.0

RE: Get a<HEAD> with ASP.NET 2.0

RE: Get a<HEAD> with ASP.NET 2.0

Leave a Comment

Random Image

Quick Poll

Latest Tweets