背景
当一个控件在模板页中时,这个控件的Client ID将会被附着与他的Content placeholder ID.所以,如果一个元素的ID为txtTest”,那么这个新的Client ID就会像"ctl00_ContentPlaceHolder1_ txtTest”.
所以,当你试着用document.getElementById(‘txtTest’)
, 你将无法使用javascript来访问txtTest,你需要通过调用document.getElementById(‘ctl00_ContentPlaceHolder1_ txtTest’)来访问它。
为了避免对这个较长的Client ID进行硬编码,我们可以通过使用
document.getElementById('<%=txtTest.ClientID%>')访 问控件,这样就能够访问txtTest.现在它将会奏效除非javascript与aspx也一致,也就是说,当javascript作为aspx页的一 部分时,这样写挺奏效的。但是如果把javascript语句放到单独的.js文件中通过指定路径引用到aspx页面的话,这样写就不行了。
所以,在这个脚本里,为了获取控件,我们不得不硬编码控件的ID,但是硬编码不是编码的理想方式,为了避免这种状况,我们 所能做的是在Client ID和Server ID间保持一个映射,在javascript代码中,我们能够根据给定的Server ID获取Client ID,这个将在下面被实现。
使用这些编码
在上面所说的将会在这里实现,第一,我们需要申明两个数组;第一个数组用来存储控件Server ID,第二个数组在同样的位置存放服务器控件的Client ID.在客户端注册这两个数组。现在,生成一个javascript的函数,接收server ID并且用这个server ID和数组中存储的server ID进行比较,给出它在数组中的位置。然后,同样的函数将会根据这个位置在Client ID数组中找到对应的Client ID.我感觉这是保持Client和Server IDs映射的最简单的方法。
这段代码显示了数组的定义以及javascript的申明。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
2 {
3 if (wc.Length > 0)
4 {
5 StringBuilder arrClientIDValue = new StringBuilder();
6 StringBuilder arrServerIDValue = new StringBuilder();
7
8 // Get a ClientScriptManager reference from the Page class.
9 ClientScriptManager cs = Page.ClientScript;
10
11 // Now loop through the controls and build the client and server id's
12 for (int i = 0; i < wc.Length; i++)
13 {
14 arrClientIDValue.Append("\"" +
15 wc[i].ClientID + "\",");
16 arrServerIDValue.Append("\"" +
17 wc[i].ID + "\",");
18 }
19
20 // Register the array of client and server id to the client
21 cs.RegisterArrayDeclaration("MyClientID",
22 arrClientIDValue.ToString().Remove(arrClientIDValue.ToString().Length - 1, 1));
23 cs.RegisterArrayDeclaration("MyServerID",
24 arrServerIDValue.ToString().Remove(arrServerIDValue.ToString().Length - 1, 1));
25
26 // Now register the method GetClientId, used to get the client id of tthe control
27 cs.RegisterStartupScript(this.Page.GetType(), "key",
28 "\nfunction GetClientId(serverId)\n{\nfor(i=0; i<MyServerID.length; i++)" +
29 "\n{\nif ( MyServerID[i] == serverId )\n" +
30 "{\nreturn MyClientID[i];\nbreak;\n}\n}\n}", true);
31 }
32 }
这是得到Client和Server IDs映射的最简单的方法。这里,没有必要担心在外部javascript文件中访问模板页中的控件。
现在我们可以通过如下代码访问在javascript中被提交到RenderJSArrayWithCliendIds函数中的控件。
var TextBox = document.getElementById(GetClientId("txtTest"));
这个将会解决由于控件在模板页中使得Client IDs改变而产生的任何问题。