Click here to Skip to main content
11,929,675 members (55,170 online)
Click here to Skip to main content
Add your own
alternative version


42 bookmarked

Master Pages and JavaScript document.getElementById

, 14 Dec 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
This article talks about the issues faced in accessing controls inside a Master Page from JavaScript, and points a quick solution.


Master Pages is one of the best features of ASP.NET 2.0. But, if you are a beginner in .NET 2.0 and Master Pages, you would get stuck in accessing controls placed inside a Master Page using JavaScript. Whenever a control is placed inside a Master Page, its client ID would be changed. As the client ID is changes, the document.getElementById(serverID) of the control in JavaScript won't work. In this article, I will discuss about one of the simplest solutions to get the client ID of a control in a Master Page for use in JavaScript.


Whenever a control is inside a Master Page, the client ID of the control would get appended with its content placeholder ID. So, for an element with an ID “txtTest”, the new client ID would look something like “ctl00_ContentPlaceHolder1_ txtTest”.

So, when you try to use document.getElementById(‘txtTest’), you will not get access to the txtTest textbox in JavaScript. You need to access it by calling document.getElementById(‘ctl00_ContentPlaceHolder1_ txtTest’).

To avoid hard coding of very long client IDs, we can access the control by using document.getElementById('<%=txtTest.ClientID%>'). This will give us access to txtTest. Now, this will work fine until and unless the script is inline with the ASPX page, i.e., if the script is included as part of the ASPX page. But, the same won’t work if you have the script in a separate .js file and add it to the ASPX page by specifying its location.

So, in this scenario, to get access to the control, we have to hard code the control’s ID. But hard coding is not the ideal way of coding. To avoid this situation, what we can do is maintain a mapping between the client ID and the server ID. In the JavaScript code, we can get the client ID of the control by giving its server ID. This can be achieved as shown below.

Using the code

The above said can be achieved as shown here. First, we need to declare two arrays; the first array will have the server IDs of the required controls, and the second array will have the client IDs of the server controls in the same order. Register these two arrays at the client side. Now, create a JavaScript function which will accept the server ID and will compare the server ID with the available server IDs in the array and will give its position in the array. Then, the same function would return you the matching client ID from the same location in the client IDs array. I feel this is one of the simplest ways of maintaining a mapping between client and server IDs.

The code below shows the declaration of the array, and the declaration of the JavaScript function in the code-behind.

// This is the method used to register the array
// of the clientid's as well as the serverid's 
// Also this method registers the function GetClientId, which is used
// to get the client id provided server id is supplied

public void RenderJSArrayWithCliendIds(params Control[] wc)
    if (wc.Length > 0)
        StringBuilder arrClientIDValue = new StringBuilder();
        StringBuilder arrServerIDValue = new StringBuilder();

        // Get a ClientScriptManager reference from the Page class.
        ClientScriptManager cs = Page.ClientScript;

        // Now loop through the controls and build the client and server id's
        for (int i = 0; i < wc.Length; i++)
            arrClientIDValue.Append("\"" + 
                             wc[i].ClientID + "\",");
            arrServerIDValue.Append("\"" + 
                             wc[i].ID + "\",");

        // Register the array of client and server id to the client
           arrClientIDValue.ToString().Remove(arrClientIDValue.ToString().Length - 1, 1));
           arrServerIDValue.ToString().Remove(arrServerIDValue.ToString().Length - 1, 1));

        // Now register the method GetClientId, used to get the client id of tthe control
        cs.RegisterStartupScript(this.Page.GetType(), "key", 
           "\nfunction GetClientId(serverId)\n{\nfor(i=0; i<MyServerID.length; i++)" + 
           "\n{\nif ( MyServerID[i] == serverId )\n" + 
           "{\nreturn MyClientID[i];\nbreak;\n}\n}\n}", true);

We can make this code a part of a common class for all UI pages like a page base, so that in every page we need to access a control in JavaScript, we can simply call the function with the control to be accessed as the parameter.

// Here we need to register the client ids to the client,
// so that the same can be used in the javascript
// If there are nultiple controls make it by comma seperated..

This is one of the simplest ways to have a mapping between client and server IDs. Here, there is no need to worry about accessing a control inside a Master Page from an external JavaScript file.

Now, we can access the elements which are given in the RenderJSArrayWithCliendIds function in the JavaScript as shown below:

var TextBox = document.getElementById(GetClientId("txtTest"));

This will solve any issue arising due to changes in the client IDs of controls placed inside a Master Page.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rajganesh Mountbatton
Technical Lead
India India
An Electronics Engineer by curricula, Software Engineer by profession. Have passion towards developing applications using Microsoft's .NET technology.

You may also be interested in...

Comments and Discussions

GeneralFor a big man Pin
Ahmad Rostami20-Feb-15 1:41
memberAhmad Rostami20-Feb-15 1:41 
GeneralMy vote of 5 Pin
Sibeesh Venu28-Jul-14 7:11
professionalSibeesh Venu28-Jul-14 7:11 
QuestionThanks Pin
ir.ajax29-Dec-13 23:29
memberir.ajax29-Dec-13 23:29 
GeneralThanks Pin
RashdSiddique6-Aug-13 2:39
memberRashdSiddique6-Aug-13 2:39 
QuestionThanks Pin
Anidesh7-Mar-13 21:12
memberAnidesh7-Mar-13 21:12 
QuestionWorks! Pin
ernestmachado31-Aug-12 3:52
memberernestmachado31-Aug-12 3:52 
From where does 'ctl00' come from???
QuestionWorks Pin
ernestmachado31-Aug-12 3:51
memberernestmachado31-Aug-12 3:51 
QuestionJS object expected ... help Pin
aalhussein19-Jul-12 15:55
memberaalhussein19-Jul-12 15:55 
AnswerRe: JS object expected ... help Pin
Rajganesh Mountbatton26-Jul-12 2:57
memberRajganesh Mountbatton26-Jul-12 2:57 
QuestionWhy don't use ClientIDMode="Static" Pin
el bayames23-Mar-12 7:12
memberel bayames23-Mar-12 7:12 
AnswerRe: Why don't use ClientIDMode="Static" Pin
Rajganesh Mountbatton3-May-12 20:27
memberRajganesh Mountbatton3-May-12 20:27 
AnswerRe: Why don't use ClientIDMode="Static" Pin
spencepk25-May-12 7:18
memberspencepk25-May-12 7:18 
GeneralMy vote of 5 Pin
sayadian7-Mar-12 0:18
membersayadian7-Mar-12 0:18 
GeneralMy vote of 5 Pin
ottodavila198331-Dec-11 7:00
memberottodavila198331-Dec-11 7:00 
GeneralMy vote of 5 Pin
nibeesh8-May-11 16:13
membernibeesh8-May-11 16:13 
GeneralMy vote of 5 Pin
Dominick O'Dierno6-Oct-10 9:18
memberDominick O'Dierno6-Oct-10 9:18 
GeneralMy vote of 5 Pin
olavolsf26-Jun-10 1:03
memberolavolsf26-Jun-10 1:03 
GeneralHey man ..i like it Pin
Yves28-Apr-10 14:39
memberYves28-Apr-10 14:39 
GeneralMy vote of 1 Pin
Syed Javed6-Dec-09 4:14
memberSyed Javed6-Dec-09 4:14 
GeneralThanks !! It works excellently Pin
Shariq Misbahi23-Jul-09 21:00
memberShariq Misbahi23-Jul-09 21:00 
QuestionNice But could use a little more Help on getting values back from a secoundary window. Pin
Kevin Lyons15-Jan-09 4:11
memberKevin Lyons15-Jan-09 4:11 
QuestionThe name 'txtTest' does not exist in the current context Pin
HuntTheShuntHTS15-Jan-09 2:09
memberHuntTheShuntHTS15-Jan-09 2:09 
AnswerEasier solution Pin
Corne.duplooy21-Oct-08 3:53
memberCorne.duplooy21-Oct-08 3:53 
GeneralRe: Easier solution Pin
Rajganesh Mountbatton21-Oct-08 4:10
memberRajganesh Mountbatton21-Oct-08 4:10 
GeneralAwesome! Pin
cwellis24-Sep-08 9:21
membercwellis24-Sep-08 9:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151126.1 | Last Updated 14 Dec 2007
Article Copyright 2007 by Rajganesh Mountbatton
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid