Click here to Skip to main content
Click here to Skip to main content

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.

Introduction

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.

Background

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
        cs.RegisterArrayDeclaration("MyClientID",
           arrClientIDValue.ToString().Remove(arrClientIDValue.ToString().Length - 1, 1));
        cs.RegisterArrayDeclaration("MyServerID",
           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..
RenderJSArrayWithCliendIds(txtTest);

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.

License

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

Share

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.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalSibeesh Venu28-Jul-14 7:11 
QuestionThanks Pinmemberir.ajax29-Dec-13 23:29 
GeneralThanks PinmemberRashdSiddique6-Aug-13 2:39 
QuestionThanks PinmemberAnidesh7-Mar-13 21:12 
QuestionWorks! Pinmemberernestmachado31-Aug-12 3:52 
QuestionWorks Pinmemberernestmachado31-Aug-12 3:51 
QuestionJS object expected ... help Pinmemberaalhussein19-Jul-12 15:55 
AnswerRe: JS object expected ... help PinmemberRajganesh Mountbatton26-Jul-12 2:57 
QuestionWhy don't use ClientIDMode="Static" Pinmemberel bayames23-Mar-12 7:12 
AnswerRe: Why don't use ClientIDMode="Static" PinmemberRajganesh Mountbatton3-May-12 20:27 
AnswerRe: Why don't use ClientIDMode="Static" Pinmemberspencepk25-May-12 7:18 
GeneralMy vote of 5 Pinmembersayadian7-Mar-12 0:18 
Thanks
GeneralMy vote of 5 Pinmemberottodavila198331-Dec-11 7:00 
GeneralMy vote of 5 Pinmembernibeesh8-May-11 16:13 
GeneralMy vote of 5 PinmemberDominick O'Dierno6-Oct-10 9:18 
GeneralMy vote of 5 Pinmemberolavolsf26-Jun-10 1:03 
GeneralHey man ..i like it PinmemberYves28-Apr-10 14:39 
GeneralMy vote of 1 PinmemberSyed Javed6-Dec-09 4:14 
GeneralThanks !! It works excellently PinmemberShariq Misbahi23-Jul-09 21:00 
QuestionNice But could use a little more Help on getting values back from a secoundary window. PinmemberKevin Lyons15-Jan-09 4:11 
QuestionThe name 'txtTest' does not exist in the current context PinmemberHuntTheShuntHTS15-Jan-09 2:09 
AnswerEasier solution PinmemberCorne.duplooy21-Oct-08 3:53 
GeneralRe: Easier solution PinmemberRajganesh Mountbatton21-Oct-08 4:10 
GeneralAwesome! Pinmembercwellis24-Sep-08 9:21 
GeneralThanks! Pinmembertrujello7-Sep-08 5:38 
GeneralPlease additional explenation PinmemberDaniel_Moreshet25-Jun-08 2:22 
AnswerRe: Please additional explenation [modified] PinmemberRajganesh Mountbatton29-Jul-08 19:52 
QuestionHow can I get PopWindow page value back to Parent which in using Master Page. PinmemberMember 193449421-Apr-08 6:14 
Generalthank you Pinmemberkevinduk11-Mar-08 7:39 
GeneralNice Pinmemberunknownunknown18-Feb-08 1:28 
GeneralThanks PinmemberGfw27-Dec-07 6:36 
GeneralWrong name Pinmemberdennisbetten17-Dec-07 11:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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
Web03 | 2.8.141223.1 | Last Updated 14 Dec 2007
Article Copyright 2007 by Rajganesh Mountbatton
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid