dougv.com | The Web home of Doug Vanderweide » Blog Archive » Update: Dynamically Adding JavaScript To Select ASP.NET Content Pages / Master Pages Via The HtmlGenericControl Class

Update: Dynamically Adding JavaScript To Select ASP.NET Content Pages / Master Pages Via The HtmlGenericControl Class

October 28, 2006, 9:45 pm PDT

In a previous article, I had discussed the problem of applying JavaScript to only select content pages of a site that uses master pages.

I said there were four ways to go about it: Simply dumping your JavaScript on your content page (bad practice); add the JavaScript directly to the <head> section of your master page (bad practice); include an external JavaScript file to a <script> tag in your master page’s <head> section (good practice, but wasteful if you only need the script on a single page or few pages of a multi-page site); or use a ContentPlaceHolder in the <head> section, then use a Content tag on the content page to include your JavaScript (which the IDE hates, but will tolerate; and, which Microsoft does not specifically state is an OK practice).

I’ve done some follow-up research and found the right way to include JavaScript on a single page of an ASP.NET site that uses master pages: The HtmlGenericControl class.

As I noted in the previous article, ASP.NET allows us to manipulate any HTML element on either the master page or any of the content (child) pages that reference it.

Not only that, we can also create HTML tags and programmatically add them anywhere we want, on either the master or content (child) pages.

So, let’s suppose you want to add some JavaScript to a single page. The steps are simple:

Write your JavaScript and save it to a file somewhere in your Web site’s HTML path.
Programmatically create a <script> tag that will reference your JavaScript file
Set the src and type attributes of the tag
Dynamically add the tag to the master page
Optionally, if we need to launch any JavaScript function based on page events (onload, onunload, etc.), we add those attributes to the master page’s <body> tag.

So, let’s assume you’ve written your JavaScript and saved it into a file in your root HTML directory. I’ll use a sample JavaScript file called “helloworld.js,” which will simply update a DIV element in our content page to read “Hello World!” when the page is first loaded.

We need to create a Page_Load subroutine on the content (child) page where we’ll call the script.
Next, we need to create the <script> tag that will contain the reference to our JavaScript.
Now, we need to add two attributes: src, which will give us the source file location; and type, which for newer browsers is “text/javascript”.
With the tag created and the attributes set, we add the tag to the master page’s <head> tag.

Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
	Dim objJsTag As New HtmlGenericControl("script")
	objJsTag.Attributes.Add("src", "/helloworld.js")
	objJsTag.Attributes.Add("type", "text/javascript")
	Master.Page.Header.Controls.Add(objJsTag)
End Sub

With the tag appended, we now need to trigger the page’s onLoad event to have the JavaScript do its thing. To do that, we have to have a named <body> tag in the master page, and we need to set the body tag to run at the server:

<body id="htmlBody" runat="server">

With the <body> tag set, we can now access it from the content (child) page, and add an onload attribute to fire our JavaScript function. You’d add these lines to your Page_Load subroutine to accomplish that:

Dim objBodyTag As HtmlGenericControl = Page.Master.FindControl("htmlBody")
objBodyTag.Attributes.Add("onload", "helloWorld();")

I’ve created a ZIP file of demo code that you can download which demonstrates this method.

I distribute code under the GNU GPL version 3.

You can also create inline JavaScript code (rather than using an external source file) by accessing the InnerHtml property. To use that, instead of adding a src attribute to your <script> tag, just assign a value to the property:

Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
	Dim objJsTag As New HtmlGenericControl("script")
	objJsTag.Attributes.Add("type", "text/javascript")
 
	Dim strJS As String = "function helloWorld() {" & vbCrLf
	strJS += "document.getElementById("divHello").innerHTML = 'Hello World!';" & vbCrLf
	strJS += "}" & vbCrLf
	objJsTag.InnerHtml = strJS
 
	Master.Page.Header.Controls.Add(objJsTag)
End Sub

Note that you don’t want to use the InnerText property, because InnerText will convert HTML special characters (<, >, &, etc.) into their entity equivalents (e.g., <, >, &, etc.). That will likely have unintended consequences in certain JavaScripts.

Share This »