本文共 1928 字，大约阅读时间需要 6 分钟。
最近在做项目的时候遇到了一个问题，就是在项目中我使用了母版页的结构，所以在获取前台ID的中会遇到服务器控件ID自动添加母版页ID前缀的问题。
记得刚开始做web开发的时候，使用Repeater控件也遇到过子控件ID自动加前缀的问题，那时候的解决办法就是将项目运行一下，在浏览器中查看源代码，然后复制运行后生成的最终ID，粘贴到自己的代码中去，但是现在再用这种方法总觉得不妥，看起来太业余。
说这个有点扯跑题了，下面是正题：
由于用了母版页，所以我写jQuery的时候取控件ID就要这样写
| 1 | jQuery( "#<%= btnAdd.ClientID%>" ).click(); |
这样写法的好处是服务器按钮控件btnAdd会直接通过ClientID这个属性获得其加完前缀的最终ID。
而这段代码在运行之后，我们可以看到最终生成的内容是这样的
| 1 | jQuery( "#ContentPlaceHolder1_btnAdd" ).click(); |
可以看出自动在原ID的基础上加了ContentPlaceHolder1_这个前缀。
但是问题也随之而来了，在当我把jQuery 的代码从前台.aspx页的<head>中独立到一个单独的.js文件之后，发现一切就变得失效了。查看源代码，如下
| 1 | jQuery( "#<%= btnAdd.ClientID%>" ).click(); |
对，它没有变，所以功能也就失效了。
出现这个问题的原因是什么呢？
1、比较平民的说，<%= %> 这个东西只能在.aspx中使用，也就是说只有在.aspx页中才能被识别出来。
2、比较官方的说法，Js文件是拿给客户端浏览器解析的，服务端只负责把你的Js文件输出给客户端，不会像.aspx去解析<%= %>，所以浏览器运行JS不认识这个<%= %>，只会当成一个普通字符串。
对于原因的理解以我的水平就到此了，下面说一下针对这类问题的解决办法。
1、针对你要选取的控件加一个对应的隐藏域控件，像这样
| 1 | < input type = "hidden" id = "hfAdd" value="#<%=btnAdd.ClientID %>" /> |
由于这个控件不是runat="server"控件，即非服务器控件，所以不用担心它会自动加上前缀，所以在.js文件中直接正常调用即可，如下
| 1 | jQuery(jQuery( "#hfadd" ).val()).click(); |
2、在.aspx页面中，脚本顶部定义一个变量，然后通过<%= %>给变量赋值，即这个变量就是你想要的控件最终ID，然后在独立的.js文件中直接调用这个变量就可以了。形式如下
.aspx页
| 1 2 3 4 5 6 7 | < head > < script type = "text/javascript" src = "../Scripts/jquery-1.5.2.min.js" ></ script > < script type = "text/javascript" > var buttonADD = "#<%= btnAdd.ClientID%>"; </ script > < script type = "text/javascript" src = "../Scripts/独立的js文件.js" ></ script > </ head > |
独立的js文件.js
| 1 2 3 | jQuery(document).ready( function () { jQuery(buttonADD).click(); }) |
这里要注意的是在.aspx页中对于脚本文件的调用顺序要注意一下，如果你想要在.js文件中使用声明的变量，就必须在其声明后，才引用你的.js文件。
目前我认为这两种方法可能是最可取的，有网友说还可以给js文件加上aspx的属性的东东，我有点傻傻分不清了，所以也不准备研究了。
上面两种方法各有各的好处，大家根据情况选择使用呗，如果js代码没多少或者不嫌乱的话，那就直接写在.aspx的<head>中好了。
PS：这里补充几个问题
1、使用 某控件ID.ClientID 这种形式取最终ID的话，前提是这个控件必须要是服务器控件，如果不是服务器控件的话，我们也没有必须获取所谓的最终的ID，因为非服务器控件是不会加前缀的。
2、不单单是<%= %> 只能在.aspx页才能被解析，包括<% %>和<%# %>都是一样的。