Using JavaScript with Master Pages in ASPNet

In this article I am explaining a very common issue that people face How to use JavaScript with Master Pages in ASP.Net. Hence I decided to explain the same. When working with master pages there is only one master page and multiple content pages hence writing JavaScript function becomes an issue.

Placing the JavaScript in Content Pages

When working with Master Pages one has to place the JavaScript within script tags in the content pages between the content placeholder

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

function Function-1()

{

//Function-1 goes here

}

function Function-2()

{

//Function-2 goes here

}

</script>

</asp:Content>

As you will notice above I have placed the JavaScript function in a content page within the ContentPlaceHolder

You can place the script anywhere within the ContentPlaceHolder of the content page but it looks better to place it at the bottom.

Issue with the IDs of Controls

Consider the example below I have used a textbox, a label and a HTML button and on the onclick event of a HTML button I am calling the JavaScript function GetValue()

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

function GetValue()

{

var label = document.getElementById("Label1");

var textbox = document.getElementById("TextBox1");

alert("Label Value is " + label.innerHTML);

alert("TextBox Value is " + textbox.value);

}

</script>

</asp:Content>

But when I run the application and click on the HTML button I get JavaScript error saying object required.

JavaScript runtime error when using JavaScript with Master Pages

Now the reason for the above JavaScript error is the ID of the controls Label1 and TextBox1. JavaScript function is not able to find any controls with ID Label1 and TextBox1 For more details refer the figure below which displays the HTML source of the page.

HTML source of the page displaying changed ID of the controls

As you will notice the ID of the TextBox1 has changed to ctl00_ContentPlaceHolder1_TextBox1 and that of Label1 has changed to ctl00_ContentPlaceHolder1_Label1 hence the JavaScript function is not able to find them.

But you will also notice that the ID of the Button1 has n changed the reason is runat=”server” is not present in the button. When MasterPages are used they tend to rename all the controls in the content pages which have runat=”server”.

The Solution

The solution to the above problem is taking help of the ASP.Net Inline Tags and the ClientID and UniqueID properties of an ASP.Net Control. The definition of the both the terms is given below

ClientID – ASP.NET automatically generates a ClientID for a server when the control is rendered as HTML id of the control

UniqueID – The hierarchically-qualified unique identifier assigned to a control by the ASP.NET rendered as HTML name of the control

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

function GetValue()

{

var label = document.getElementById("<%=Label1.ClientID%>");

var textbox = document.getElementById("<%=TextBox1.ClientID%>");

alert("Label Value is " + label.innerHTML);

alert("TextBox Value is " + textbox.value);

}

</script>

</asp:Content>

As you will notice above I am using ASP.Net Inline Server Tags <%=Label1.ClientID%> What is does is it simply prints the ClientID of the Control here Label1 Thus there is no need to worry about the changing IDs Thus it is a best practice to follow this method for all controls having runat=”server” tag

For more information on ASP.Net Inline Server Tags refer my article Inline ASP.Net Server Tags

Now after the changes done the JavaScript function is able to find the controls and hence it functions properly as required. The reason why it started working can also be seen in the HTML source of the page as shown in figure below.

JavaScript document.getElementById not working with Master Page and Content Page in ASP.Net

As you will notice above the Yellow mark displays that the ID of the TextBox and Label is same as what is generated by the MasterPage hence the JavaScript function started working.

Note: The method of shown above does not work with JavaScript Source (JS) files since <% %> tags are not permitted in them.

The above code has been tested in the following browsers

Internet Explorer FireFox Chrome Safari Opera