Master pages and JavaScript document. getelementbyid

Translation:

Master pages and JavaScript document. getelementbyid

Introduction

A template page is one of the most important features of ASP. NET 2.0. However, if you are a newbie to. net2.0 and the template page, you need to spend a lot of time accessing the controls built in the template page with JavaScript. Each time a control is placed on a template page, its client ID is modified. After the Client ID is modified, useDocument. getelementbyid (serverid)Accessing these controls will not work. In this articleArticleTo obtain the Client ID of the control in the template page used by JavaScript.

Background

When a control is on the template page, the client ID of the control will be attached to its content placeholder ID. therefore, if the ID of an element is txttest, the new client ID will be like "ctl00_contentplaceholder1 _ txttest ".

So when you try to useDocument. getelementbyid ('txttest '), You will not be able to access txttest using JavaScript, you need to callDocument. getelementbyid ('ctl00 _ contentplaceholder1 _ txttest ')To access it.

To avoid hard encoding for this long Client ID, we can useDocument. getelementbyid ('<% = txttest. clientid %> ')Access the control so that you can access txttest. Now it will work unless Javascript is the same as aspx, that is, when Javascript is part of the ASPX page, this write works. However, if you place the Javascript statement in a separate. js file and reference it to the ASPX page by specifying a path, the writing will not work.

Therefore, in this script, in order to obtain the control, we have to hard encode the Control ID, but hard encoding is not an ideal way of coding. To avoid this situation, what we can do is to maintain a ing between the client ID and the server ID.Code.

Use these Codes

The above will be implemented here. First, we need to declare two arrays. The first array is used to store the Control Server ID, the second array stores the Client ID of the server control in the same location. register these two arrays on the client. Now, generate a JavaScript function that receives the server ID and compares it with the server ID stored in the array to give its location in the array. Then, the same function will find the corresponding client ID in the Client ID Array Based on this location. I think this is the easiest way to keep the client and server IDs ing.

This code shows the definition of the array and the declaration of JavaScript.

// 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 suppliedpublic 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} ", true );}}

We can use this code as a part of the public class of all the basic UI pages. In this way, you need to access the control through JavaScript on each page. We can use the accessed control as a parameter to call this function.

 
// Here we need to register the client IDs to the client // so that you can use the same // In JavaScript. If there are multiple controls, separate them with commas. renderjsarraywithcliendids (txttest );
 

This is the easiest way to map client and server IDs. There is no need to worry about accessing the controls on the template page in an external Javascript file.

Now we can use the following code to access the controls submitted to the renderjsarraywithcliendids function in JavaScript.

VaR textbox = Document. getelementbyid (getclientid ("txttest "));

This will solve any problems caused by the change of client IDs in the template page.

 

Original

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 wocould get stuck in accessing controls placed inside a master page using JavaScript. whenever a control is placed inside a master page, its client ID wocould be changed. as the Client ID is changes,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 wocould get appended with its content placeholder ID. So, for an element with an ID"Txttest", The new client ID wocould look something like"Ctl00_contentplaceholder1 _ txttest".

So, when you try to useDocument. getelementbyid ('txttest '), You will not get access toTxttestTextbox in Javascript. You need to access it by callingDocument. getelementbyid ('ctl00 _ contentplaceholder1 _ txttest ').

To avoid hard coding of very long client IDs, we can access the control by usingDocument. getelementbyid ('<% = txttest. clientid %> '). This will give us accessTxttest. Now, this will work fine until and unless the script is inline with the ASPX page, I. E ., if the script is encoded as part of the ASPX page. but, the same won't work if you have the script in a separate. JsFile 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 wocould 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 suppliedpublic 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} ", 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 inRenderjsarraywithcliendidsFunction 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.