ASP.NET 2.0 创建母版页引来的麻烦
2008-06-17 10:28
260 查看
[ASP.NET 2.0]创建母版页引来的麻烦
一、问题提出
由于总体排版和设计的需要，我们往往创建母版页来实现整个网站的统一性，最近我由于统一性的需要，把原来整个项目单独的页面全部套用了母版页。但是出现了一个错误……在我的Blog中记录一下，方便大家参考。
二、抽象模型
由于整个页面内容过多，所以我把这个页面中最为本质的问题抽象出来。
原来单一页面，就是利用按钮触发JS事件，在文本域中插入"(_)"功能，其实现代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>单一页面抽象模型－YJingLee</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<textarea id="txt" runat="server" name="txt" rows="10" cols="50"></textarea>
<asp:Button ID="btnInsert" runat="server" Text="服务器端插入(_)" OnClientClick="insert();"/>
<input id="btnInsert2" name="insert" onclick="insert();" type="button" value="客户端插入(_)" runat="server"/></div>
</form>
</body>
</html>
上述页面可以正常使用。后来使用模板页后，其代码如下：
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="使用母版页面抽象模型－YJingLee" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea id="txt" runat="server" name="txt" rows="10" cols="50"></textarea>
<asp:Button ID="btnInsert" runat="server" Text="服务器端插入(_)" OnClientClick="insert();"/>
<input id="btnInsert2" name="insert" onclick="insert();" type="button" value="客户端插入(_)" runat="server"/></div>
</asp:Content>
当打开后按下按钮出现了"Microsoft JScript 运行时错误: 'document.getElementById(...)' 为空或不是对象"。这是什么原因呢？原来好好的，怎么套用个母版页就出现这个奇怪的问题呢？困扰了好久，和朋友讨论了一下，终于找到了答案……
三、分析本质
原来我们仔细看看其生成的HTML代码：
单一页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title> 单一页面抽象模型－YJingLee</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTEzMjE5NDA0NWRkKlEH1jSXJkIbnUaP2d9Dra8LQEk=" />
</div>
<div>
<textarea name="txt" id="txt" rows="10" cols="50"></textarea>
<input type="submit" name="btnInsert" value="服务器端插入(_)" onclick="insert();" id="btnInsert" />
<input name="btnInsert2" type="button" id="btnInsert2" onclick="insert();" value="客户端插入(_)" /></div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALVid/5DQKShrDCCQL5w9POBQL5w4vOBZPGqxUU/yvoKTqG8k+uG8YroGTv" />
</div></form>
</body>
</html>
再看看套用母版页之后，生成的HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>使用母版页面抽象模型－YJingLee</title></head>
<body>
<form name="aspnetForm" method="post" action="Default2.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwMTY2NjE0OWRkADUETiohcorj2qXOE9M1qhFVw20=" />
</div>
<div>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea name="ctl00$ContentPlaceHolder1$txt" id="ctl00_ContentPlaceHolder1_txt" rows="10" cols="50"></textarea>
<input type="submit" name="ctl00$ContentPlaceHolder1$btnInsert" value="服务器端插入(_)" onclick="insert();" id="ctl00_ContentPlaceHolder1_btnInsert" />
<input name="ctl00$ContentPlaceHolder1$btnInsert2" type="button" id="ctl00_ContentPlaceHolder1_btnInsert2" onclick="insert();" value="客户端插入(_)" /></div>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKyga4JAtO59ZELApOT2tEDApOTwvAC83bfMO00kt0PYcRte7XQOsXBcFE=" />
</div></form>
</body>
</html>
是不是看到问题了，源文件控件元素的ID和生成HTML文件的ID不一致。表单from的name属性和id属性变成了aspnetForm，控件的id属性被无缘无故了加上了ctl00_ContentPlaceHolder1_前缀，其name属性也加上了ctl00$ContentPlaceHolder1$前缀。
这下知道了，难怪提示"'document.getElementById(...)' 为空或不是对象"的错误了，原来生成页面后其ID都变了。
那么我们如何解决它呢？既然他id变了，我们就把JS代码id改为生成后的id。代码如下：
function insert() {
document.getElementById("ctl00$ContentPlaceHolder1$txt").value=document.getElementById("ctl00$ContentPlaceHolder1$txt").value+"(__)";
return;
}
//或者
function insert() {
document.getElementById("ctl00_ContentPlaceHolder1_txt").value=document.getElementById("ctl00_ContentPlaceHolder1_txt").value+"(__)";
return;
}
好了，问题解决了，不过想想有什么更好的办法呢？到底为什么呢？
其实分析一下，它是后来生成的客户端id，我们可以用C#语句Control的ClientID属性，像这样写：txt.ClientID; txt还是原来控件的id，后面的ClientID就是新生成的id。txt.ClientID是从程序里取到的后来生成新的id，这样不是更好吗。修改代码如下：
function insert() {
document.getElementById("<%=txt.ClientID %>").value=document.getElementById("<%=txt.ClientID %>").value+"(__)";
return;
}
还有在后台Request.Form["txt"]键值需要改变，必须变为Request.Form["<%=txt.ClientID %>"]才能接收到页面的值。想想如果想要得到ID的control是一个用户控件的话，当生成页面后尽管能得到其ClientID，但是却得不到这个对象，所以也就不能设置或获得其属性了。比如，我要做的这个用户控件，由三个DropDownList组成，可是我却想得到一个完整的日期值（指在客户端），一种思路是先获得三个DropDownList的ClientID，然后再由ID1.value+ID2.value+ID3.value取得，可是如果你一个页面上需要放多个这样的用户控件的话，你需要取得多少个ClientID？显然这样做的话，工作量会很大，而且要操作众多的对象，很容易出错。
四、总结
这一类问题我像在我们编写程序时往往经常会遇到，总结一下：这应该属于"使用了MasterPage，或者GridView中的模版列后所有元素ID不一致问题"。由于种种原因（比如使用了MasterPage，或者GridView中的模版列），一个控件在设计时的ID往往不同于生成页面后的ID，为了获得控件客户端ID，我们可以从生成的页面入手，取控件id修改方法：
document.getElementById("ctl00$编辑区ID$控件ID");
document.getElementById("ctl00_编辑区ID_控件ID");
document.getElementById("<%=控件名ID.ClientID %>");推荐
至于为什么，是自己还没有深刻理解其中的根源还是.NET机制问题呢？不知道VS2008会不会有这个问题呢？
在我们设计时往往就会出现一些莫名其妙的问题，我想我们遇到问题时，冷静思考，把握主次，从底层框架入手，纠其原因，相信最终会找到答案。
posted @ 2007-10-30 21:18 李永京 阅读(2570) 评论(36) 编辑 收藏 所属分类: ASP.NET
发表评论
回复 引用 查看
#1楼 2007-10-30 21:36 | 菌哥
地球人都知道！
回复 引用 查看
#2楼 2007-10-30 21:56 | 怪怪
其实模板页最后编程控件的一个子控件, 本身NamingContainer又会把自己的ID放到控件ID前作为前缀. 所有在客户端对ID的引用, 都应该用ClientID的方式才保险.
回复 引用 查看
#3楼 2007-10-30 21:58 | 怪怪
document.getElementById("ctl00$编辑区ID$控件ID");
document.getElementById("ctl00_编辑区ID_控件ID");
万万要不得..
回复 引用 查看
#4楼 2007-10-30 23:18 | funwun [未注册用户]
這個都可以寫一篇文章,強!!!!!!!!!!!1
回复 引用 查看
#5楼 2007-10-30 23:31 | watson hua
@怪怪
这倒不见得。
我举一个例子。
现在需要一个标签的dom id作为另一个标签的某个属性的值。
如果在服务器端控件标签的属性里，服务器端脚本是不会被解释执行的，更取不到clientId，只能冲到aspx.cs里去attributes.add，这又是破坏页面结构的。所以如果像"ctl00$编辑区ID$控件ID"这种id,维护的起的话，用用无妨。
当然我的意思是，平衡多种方案，选一个代价最小的，而"ctl00$编辑区ID$控件ID"，也可以作为一种方案。
没有什么是肯定的。
回复 引用 查看
#6楼 2007-10-30 23:49 | 怪怪
@watson hua
这个服务器控件属性中的代码解释问题，我自己写了ExpressionBuilder， 可以完美解决，其实这个ExpressionBuilder其实这个只需覆盖盖两个方法，每个方法里写一行话。
第二，如果你需要一个服务器端控件的dom id作为另一个runat="server"的标签的属性，除了上述做法，还可以自己继承需要接收这个参数的标签所对应的控件，定义一个属性来接收目标服务器控件的服务器端ID，然后在NamingContainer树中查找这个服务器控件ID，得到其ClientID，你可以看看微软自己的DataSourceID等用服务器端ID做参数，找到控件的方法(而现在咱们的目标是找到这个控件，得到其ClientID属性值).
为什么我说这个事情最好这么做, 而不能"ctl00$编辑区ID$控件ID"， 因为这个控件ID生成的方法是可以被子类覆盖的。所以控件的UniqueID和ClientID不见得一定是这种形式， 所以我说这种写法不可取。另外如果控件树发生变化，也会造成那些自动生成的ID部分比如ctl00发生变化， 这就很不可靠了。
没有什么是肯定的， 这是在哲学意义上来说，有些事情在某一个范围内确实有个对错之分...，你说呢 :)
回复 引用 查看
#7楼 2007-10-30 23:55 | Cat Chen
永远不要去假设客户端id属性，需要此属性就去ClientID取，这样才是正交的设计——不依赖于任何外部的控件，如果你把客户端id写死了，那么你就依赖于当前的INamingContainer的套叠情况，一旦控件树改变了，ClientID随之改变，你硬编码的id就不再正确，而这种错误是难以发现的。
回复 引用 查看
#8楼 2007-10-30 23:59 | Cat Chen
随之而来的，肯定有人说客户端执行时，无法取到ClientID。然而服务器端在客户端之前执行，如果你要把ClientID先保存到客户端，是肯定能做到的，因此总能在客户端代码执行之前先获得ClientID。
很多时候，大家觉得JavaScript反正是辅助性的，随便写也可以，然后函数也没有参数。例如隐藏某Label用的函数，就是function hideLabel()，之后你当然要在里面硬编码那个Label的id啊。事实上你应该把函数定义为function hideLabel(id)，在调用该函数的代码在服务器端生成，把ClientID嵌入进去。
回复 引用 查看
#9楼 2007-10-31 00:02 | Zhuang miao
走过
回复 引用 查看
#10楼 2007-10-31 08:38 | gm [未注册用户]
我还以为是什么大的发现呢，这个用了asp2.0的都应该知道的！！！
回复 引用 查看
#11楼 2007-10-31 08:44 | 随风飘扬 [未注册用户]
这些是常识了吧....
回复 引用 查看
#12楼 2007-10-31 08:55 | e2mars [未注册用户]
我就不知道，谢谢博主！
回复 引用 查看
#13楼 2007-10-31 09:00 | JerryChou
常识还能写出这么大一篇来，佩服。
回复 引用 查看
#14楼 2007-10-31 09:24 | 哑佬邓 [未注册用户]
大家都是新人走过来的，应该多多支持一下,虽然我知道,但是可以加深一下和鼓励一下别人，何乐而不为呢，
回复 引用 查看
#15楼 2007-10-31 10:24 | melodyyyyy [未注册用户]
汗。。。我也不知道有document.getElementById("<%=控件名ID.ClientID %>");这种取法。。。都是硬取的ID。。。受教了 谢谢。
回复 引用 查看
#16楼 2007-10-31 11:29 | 沙加
最好就是不要用服务器端的控件,我现在都用HTML控件了，实在不行再加一个runat=server就不结了.
回复 引用 查看
#17楼 2007-10-31 12:43 | （武眉博<活靶子Net> ） [未注册用户]
实现INamingContainer的都这样
回复 引用 查看
#18楼 [楼主]2007-10-31 12:54 | 李永京
大家都是新人走过来的！在此留下自己的足迹，何乐而不为呢？也给新手带来帮助。。。
回复 引用 查看
#19楼 2007-10-31 13:35 | 壁虎
共享自己的经验有错吗？
共享并不高深的经验错了吗？
你懂你可以一带而过，但是不懂却是可以学到东西。
我不认为简单的东西就不能共享。毕竟简单或者难，那是相对的。
回复 引用 查看
#20楼 2007-10-31 14:32 | Teracy_Joy
共享自己得经验,我支持,每个人工作开发得内容不同,接触得东西不同,各又所长,大家应该虚心学习,另外我还补充一点:在母板页还有在用户控件中得TextBox等等控件ID在应用到某各页面得时候控件ID都会发生改变得,所以在写js也是一样得,用你提到你得:document.getElementById("<%=控件名ID.ClientID %>");这样得方法,其实不管在什么地方用这个最保险了.
回复 引用 查看
#21楼 2007-10-31 14:41 | heng-xi [未注册用户]
及时的支援
回复 引用 查看
#22楼 2007-10-31 17:28 | Cat Chen
@沙加
只要有runat="server"，就是服务器端控件，<div id="myDiv" runat="server" />同样受INamingContainer影响，输出的ClientID仍然可能不等于ID。
回复 引用 查看
#23楼 2007-10-31 19:34 | Matrix
如果是母板再套母板再套webpart呢。
呵。
用ClientID直接搞定
回复 引用 查看
#24楼 2007-11-01 20:35 | 随心所欲
document.getElementById("ctl00$编辑区ID$控件ID");
这种方式真是要不得。切记。
回复 引用 查看
#25楼 [楼主]2007-11-01 21:46 | 李永京
@随心所欲
为什么啊?告诉我好吗?我想用document.getElementById("<%=控件名ID.ClientID %>");.这个document.getElementById("ctl00$编辑区ID$控件ID"); 是我开始想到的....谢谢
回复 引用 查看
#26楼 2007-11-02 12:42 | 随心所欲
因为"ctl00$编辑区ID$控件ID"是一个自动生成的Id，不保证正确。最好还是ClientID。
这是给你自己下绊子，给程序留下隐患。
回复 引用 查看
#27楼 [楼主]2007-11-02 14:05 | 李永京
@随心所欲
谢谢啊...吸取教训,不能只看表面现象.
回复 引用 查看
#28楼 2007-11-02 15:32 | 随心所欲
都有一个学习的过程。
我也遇到过这个问题，解决方法不大一样，你也可以借鉴一下。
http://www.cnblogs.com/dlwang2002/archive/2006/12/21/599107.html
回复 引用 查看
#29楼 2007-11-24 16:10 | 阙荣文 [未注册用户]
看到那么多对楼主不屑的回复,真是让人感慨. 都是些什么人啊.
我觉得楼主写得好, 从现象到本质到解决方案, 思路清晰条理明了. 支持.
那些所谓"常识" 就怎样怎样的人有没有想过,
难道你在娘胎里就知道这个"常识"
难道你一开始学ASP2.0就知道这个常识??
再退一步说,让你写一篇文章说这个问题你还不一定说得有楼主那么好.
你们这些人得瑟什么?
有什么资格得瑟?
楼主请无视这些垃圾, 我支持你!!
回复 引用 查看
#30楼 [楼主]2007-11-24 18:22 | 李永京
@阙荣文
他们都是高手啊，这些的确对于他们来说就是常识了，但是我考虑到像我这样新手很多，书上也没有相关介绍，只有在实际项目中总结出来，写写的......
回复 引用 查看
#31楼 2007-11-27 19:49 | 阙荣文 [未注册用户]
TO 楼主:
我上面说的话和技术无关, 只是我认为能把这点知识写出来,而且写得那么好就值得肯定.我鄙视的使那种用很不屑的语气在边上指手画脚的行为.
现在很多论坛的风气就很不好,发个帖子,写篇文章,总有人跳出来指手画脚说这个怎样怎样,那个又怎样怎样. 我觉得是态度问题,如果确实对这篇帖子(文章)有异议,可以讨论,可以补充. 凭空说一些大话,莫名其妙的话,有何意义?
当然, 我可能理会错某些评论的本意了,也许发表者并没有这个意思.那就算我借题发挥吧. 共勉.
回复 引用 查看
#32楼 2007-12-05 22:56 | 可乐虫 [未注册用户]
仁者见仁,智者见智
回复 引用 查看
#33楼 2007-12-14 11:33 | xiazhi33 [未注册用户]
其实 呵呵``` 还有种 好的办法就是 findcontrol 了`
不知道 大家使用过没的 `` 我反正经常使用的哈!
回复 引用 查看
#34楼 2008-01-09 10:26 | ColdDog
我这里的一篇翻译文第4点也提到这个问题，请参考：
http://www.cnblogs.com/lxinxuan/archive/2007/04/21/721980.html
回复 引用 查看
#35楼 [楼主]2008-01-09 12:37 | 李永京
@ColdDog
恩，去看看！
回复 引用 查看
#36楼 2008-04-09 13:02 | Must Studying [未注册用户]
你知道你怎么不提啊？？？博主提的不错，说你不好的都垃圾
一、问题提出
由于总体排版和设计的需要，我们往往创建母版页来实现整个网站的统一性，最近我由于统一性的需要，把原来整个项目单独的页面全部套用了母版页。但是出现了一个错误……在我的Blog中记录一下，方便大家参考。
二、抽象模型
由于整个页面内容过多，所以我把这个页面中最为本质的问题抽象出来。
原来单一页面，就是利用按钮触发JS事件，在文本域中插入"(_)"功能，其实现代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>单一页面抽象模型－YJingLee</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<textarea id="txt" runat="server" name="txt" rows="10" cols="50"></textarea>
<asp:Button ID="btnInsert" runat="server" Text="服务器端插入(_)" OnClientClick="insert();"/>
<input id="btnInsert2" name="insert" onclick="insert();" type="button" value="客户端插入(_)" runat="server"/></div>
</form>
</body>
</html>
上述页面可以正常使用。后来使用模板页后，其代码如下：
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="使用母版页面抽象模型－YJingLee" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea id="txt" runat="server" name="txt" rows="10" cols="50"></textarea>
<asp:Button ID="btnInsert" runat="server" Text="服务器端插入(_)" OnClientClick="insert();"/>
<input id="btnInsert2" name="insert" onclick="insert();" type="button" value="客户端插入(_)" runat="server"/></div>
</asp:Content>
当打开后按下按钮出现了"Microsoft JScript 运行时错误: 'document.getElementById(...)' 为空或不是对象"。这是什么原因呢？原来好好的，怎么套用个母版页就出现这个奇怪的问题呢？困扰了好久，和朋友讨论了一下，终于找到了答案……
三、分析本质
原来我们仔细看看其生成的HTML代码：
单一页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title> 单一页面抽象模型－YJingLee</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTEzMjE5NDA0NWRkKlEH1jSXJkIbnUaP2d9Dra8LQEk=" />
</div>
<div>
<textarea name="txt" id="txt" rows="10" cols="50"></textarea>
<input type="submit" name="btnInsert" value="服务器端插入(_)" onclick="insert();" id="btnInsert" />
<input name="btnInsert2" type="button" id="btnInsert2" onclick="insert();" value="客户端插入(_)" /></div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALVid/5DQKShrDCCQL5w9POBQL5w4vOBZPGqxUU/yvoKTqG8k+uG8YroGTv" />
</div></form>
</body>
</html>
再看看套用母版页之后，生成的HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>使用母版页面抽象模型－YJingLee</title></head>
<body>
<form name="aspnetForm" method="post" action="Default2.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwMTY2NjE0OWRkADUETiohcorj2qXOE9M1qhFVw20=" />
</div>
<div>
<script language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea name="ctl00$ContentPlaceHolder1$txt" id="ctl00_ContentPlaceHolder1_txt" rows="10" cols="50"></textarea>
<input type="submit" name="ctl00$ContentPlaceHolder1$btnInsert" value="服务器端插入(_)" onclick="insert();" id="ctl00_ContentPlaceHolder1_btnInsert" />
<input name="ctl00$ContentPlaceHolder1$btnInsert2" type="button" id="ctl00_ContentPlaceHolder1_btnInsert2" onclick="insert();" value="客户端插入(_)" /></div>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKyga4JAtO59ZELApOT2tEDApOTwvAC83bfMO00kt0PYcRte7XQOsXBcFE=" />
</div></form>
</body>
</html>
是不是看到问题了，源文件控件元素的ID和生成HTML文件的ID不一致。表单from的name属性和id属性变成了aspnetForm，控件的id属性被无缘无故了加上了ctl00_ContentPlaceHolder1_前缀，其name属性也加上了ctl00$ContentPlaceHolder1$前缀。
这下知道了，难怪提示"'document.getElementById(...)' 为空或不是对象"的错误了，原来生成页面后其ID都变了。
那么我们如何解决它呢？既然他id变了，我们就把JS代码id改为生成后的id。代码如下：
function insert() {
document.getElementById("ctl00$ContentPlaceHolder1$txt").value=document.getElementById("ctl00$ContentPlaceHolder1$txt").value+"(__)";
return;
}
//或者
function insert() {
document.getElementById("ctl00_ContentPlaceHolder1_txt").value=document.getElementById("ctl00_ContentPlaceHolder1_txt").value+"(__)";
return;
}
好了，问题解决了，不过想想有什么更好的办法呢？到底为什么呢？
其实分析一下，它是后来生成的客户端id，我们可以用C#语句Control的ClientID属性，像这样写：txt.ClientID; txt还是原来控件的id，后面的ClientID就是新生成的id。txt.ClientID是从程序里取到的后来生成新的id，这样不是更好吗。修改代码如下：
function insert() {
document.getElementById("<%=txt.ClientID %>").value=document.getElementById("<%=txt.ClientID %>").value+"(__)";
return;
}
还有在后台Request.Form["txt"]键值需要改变，必须变为Request.Form["<%=txt.ClientID %>"]才能接收到页面的值。想想如果想要得到ID的control是一个用户控件的话，当生成页面后尽管能得到其ClientID，但是却得不到这个对象，所以也就不能设置或获得其属性了。比如，我要做的这个用户控件，由三个DropDownList组成，可是我却想得到一个完整的日期值（指在客户端），一种思路是先获得三个DropDownList的ClientID，然后再由ID1.value+ID2.value+ID3.value取得，可是如果你一个页面上需要放多个这样的用户控件的话，你需要取得多少个ClientID？显然这样做的话，工作量会很大，而且要操作众多的对象，很容易出错。
四、总结
这一类问题我像在我们编写程序时往往经常会遇到，总结一下：这应该属于"使用了MasterPage，或者GridView中的模版列后所有元素ID不一致问题"。由于种种原因（比如使用了MasterPage，或者GridView中的模版列），一个控件在设计时的ID往往不同于生成页面后的ID，为了获得控件客户端ID，我们可以从生成的页面入手，取控件id修改方法：
document.getElementById("ctl00$编辑区ID$控件ID");
document.getElementById("ctl00_编辑区ID_控件ID");
document.getElementById("<%=控件名ID.ClientID %>");推荐
至于为什么，是自己还没有深刻理解其中的根源还是.NET机制问题呢？不知道VS2008会不会有这个问题呢？
在我们设计时往往就会出现一些莫名其妙的问题，我想我们遇到问题时，冷静思考，把握主次，从底层框架入手，纠其原因，相信最终会找到答案。
posted @ 2007-10-30 21:18 李永京 阅读(2570) 评论(36) 编辑 收藏 所属分类: ASP.NET
发表评论
回复 引用 查看
#1楼 2007-10-30 21:36 | 菌哥
地球人都知道！
回复 引用 查看
#2楼 2007-10-30 21:56 | 怪怪
其实模板页最后编程控件的一个子控件, 本身NamingContainer又会把自己的ID放到控件ID前作为前缀. 所有在客户端对ID的引用, 都应该用ClientID的方式才保险.
回复 引用 查看
#3楼 2007-10-30 21:58 | 怪怪
document.getElementById("ctl00$编辑区ID$控件ID");
document.getElementById("ctl00_编辑区ID_控件ID");
万万要不得..
回复 引用 查看
#4楼 2007-10-30 23:18 | funwun [未注册用户]
這個都可以寫一篇文章,強!!!!!!!!!!!1
回复 引用 查看
#5楼 2007-10-30 23:31 | watson hua
@怪怪
这倒不见得。
我举一个例子。
现在需要一个标签的dom id作为另一个标签的某个属性的值。
如果在服务器端控件标签的属性里，服务器端脚本是不会被解释执行的，更取不到clientId，只能冲到aspx.cs里去attributes.add，这又是破坏页面结构的。所以如果像"ctl00$编辑区ID$控件ID"这种id,维护的起的话，用用无妨。
当然我的意思是，平衡多种方案，选一个代价最小的，而"ctl00$编辑区ID$控件ID"，也可以作为一种方案。
没有什么是肯定的。
回复 引用 查看
#6楼 2007-10-30 23:49 | 怪怪
@watson hua
这个服务器控件属性中的代码解释问题，我自己写了ExpressionBuilder， 可以完美解决，其实这个ExpressionBuilder其实这个只需覆盖盖两个方法，每个方法里写一行话。
第二，如果你需要一个服务器端控件的dom id作为另一个runat="server"的标签的属性，除了上述做法，还可以自己继承需要接收这个参数的标签所对应的控件，定义一个属性来接收目标服务器控件的服务器端ID，然后在NamingContainer树中查找这个服务器控件ID，得到其ClientID，你可以看看微软自己的DataSourceID等用服务器端ID做参数，找到控件的方法(而现在咱们的目标是找到这个控件，得到其ClientID属性值).
为什么我说这个事情最好这么做, 而不能"ctl00$编辑区ID$控件ID"， 因为这个控件ID生成的方法是可以被子类覆盖的。所以控件的UniqueID和ClientID不见得一定是这种形式， 所以我说这种写法不可取。另外如果控件树发生变化，也会造成那些自动生成的ID部分比如ctl00发生变化， 这就很不可靠了。
没有什么是肯定的， 这是在哲学意义上来说，有些事情在某一个范围内确实有个对错之分...，你说呢 :)
回复 引用 查看
#7楼 2007-10-30 23:55 | Cat Chen
永远不要去假设客户端id属性，需要此属性就去ClientID取，这样才是正交的设计——不依赖于任何外部的控件，如果你把客户端id写死了，那么你就依赖于当前的INamingContainer的套叠情况，一旦控件树改变了，ClientID随之改变，你硬编码的id就不再正确，而这种错误是难以发现的。
回复 引用 查看
#8楼 2007-10-30 23:59 | Cat Chen
随之而来的，肯定有人说客户端执行时，无法取到ClientID。然而服务器端在客户端之前执行，如果你要把ClientID先保存到客户端，是肯定能做到的，因此总能在客户端代码执行之前先获得ClientID。
很多时候，大家觉得JavaScript反正是辅助性的，随便写也可以，然后函数也没有参数。例如隐藏某Label用的函数，就是function hideLabel()，之后你当然要在里面硬编码那个Label的id啊。事实上你应该把函数定义为function hideLabel(id)，在调用该函数的代码在服务器端生成，把ClientID嵌入进去。
回复 引用 查看
#9楼 2007-10-31 00:02 | Zhuang miao
走过
回复 引用 查看
#10楼 2007-10-31 08:38 | gm [未注册用户]
我还以为是什么大的发现呢，这个用了asp2.0的都应该知道的！！！
回复 引用 查看
#11楼 2007-10-31 08:44 | 随风飘扬 [未注册用户]
这些是常识了吧....
回复 引用 查看
#12楼 2007-10-31 08:55 | e2mars [未注册用户]
我就不知道，谢谢博主！
回复 引用 查看
#13楼 2007-10-31 09:00 | JerryChou
常识还能写出这么大一篇来，佩服。
回复 引用 查看
#14楼 2007-10-31 09:24 | 哑佬邓 [未注册用户]
大家都是新人走过来的，应该多多支持一下,虽然我知道,但是可以加深一下和鼓励一下别人，何乐而不为呢，
回复 引用 查看
#15楼 2007-10-31 10:24 | melodyyyyy [未注册用户]
汗。。。我也不知道有document.getElementById("<%=控件名ID.ClientID %>");这种取法。。。都是硬取的ID。。。受教了 谢谢。
回复 引用 查看
#16楼 2007-10-31 11:29 | 沙加
最好就是不要用服务器端的控件,我现在都用HTML控件了，实在不行再加一个runat=server就不结了.
回复 引用 查看
#17楼 2007-10-31 12:43 | （武眉博<活靶子Net> ） [未注册用户]
实现INamingContainer的都这样
回复 引用 查看
#18楼 [楼主]2007-10-31 12:54 | 李永京
大家都是新人走过来的！在此留下自己的足迹，何乐而不为呢？也给新手带来帮助。。。
回复 引用 查看
#19楼 2007-10-31 13:35 | 壁虎
共享自己的经验有错吗？
共享并不高深的经验错了吗？
你懂你可以一带而过，但是不懂却是可以学到东西。
我不认为简单的东西就不能共享。毕竟简单或者难，那是相对的。
回复 引用 查看
#20楼 2007-10-31 14:32 | Teracy_Joy
共享自己得经验,我支持,每个人工作开发得内容不同,接触得东西不同,各又所长,大家应该虚心学习,另外我还补充一点:在母板页还有在用户控件中得TextBox等等控件ID在应用到某各页面得时候控件ID都会发生改变得,所以在写js也是一样得,用你提到你得:document.getElementById("<%=控件名ID.ClientID %>");这样得方法,其实不管在什么地方用这个最保险了.
回复 引用 查看
#21楼 2007-10-31 14:41 | heng-xi [未注册用户]
及时的支援
回复 引用 查看
#22楼 2007-10-31 17:28 | Cat Chen
@沙加
只要有runat="server"，就是服务器端控件，<div id="myDiv" runat="server" />同样受INamingContainer影响，输出的ClientID仍然可能不等于ID。
回复 引用 查看
#23楼 2007-10-31 19:34 | Matrix
如果是母板再套母板再套webpart呢。
呵。
用ClientID直接搞定
回复 引用 查看
#24楼 2007-11-01 20:35 | 随心所欲
document.getElementById("ctl00$编辑区ID$控件ID");
这种方式真是要不得。切记。
回复 引用 查看
#25楼 [楼主]2007-11-01 21:46 | 李永京
@随心所欲
为什么啊?告诉我好吗?我想用document.getElementById("<%=控件名ID.ClientID %>");.这个document.getElementById("ctl00$编辑区ID$控件ID"); 是我开始想到的....谢谢
回复 引用 查看
#26楼 2007-11-02 12:42 | 随心所欲
因为"ctl00$编辑区ID$控件ID"是一个自动生成的Id，不保证正确。最好还是ClientID。
这是给你自己下绊子，给程序留下隐患。
回复 引用 查看
#27楼 [楼主]2007-11-02 14:05 | 李永京
@随心所欲
谢谢啊...吸取教训,不能只看表面现象.
回复 引用 查看
#28楼 2007-11-02 15:32 | 随心所欲
都有一个学习的过程。
我也遇到过这个问题，解决方法不大一样，你也可以借鉴一下。
http://www.cnblogs.com/dlwang2002/archive/2006/12/21/599107.html
回复 引用 查看
#29楼 2007-11-24 16:10 | 阙荣文 [未注册用户]
看到那么多对楼主不屑的回复,真是让人感慨. 都是些什么人啊.
我觉得楼主写得好, 从现象到本质到解决方案, 思路清晰条理明了. 支持.
那些所谓"常识" 就怎样怎样的人有没有想过,
难道你在娘胎里就知道这个"常识"
难道你一开始学ASP2.0就知道这个常识??
再退一步说,让你写一篇文章说这个问题你还不一定说得有楼主那么好.
你们这些人得瑟什么?
有什么资格得瑟?
楼主请无视这些垃圾, 我支持你!!
回复 引用 查看
#30楼 [楼主]2007-11-24 18:22 | 李永京
@阙荣文
他们都是高手啊，这些的确对于他们来说就是常识了，但是我考虑到像我这样新手很多，书上也没有相关介绍，只有在实际项目中总结出来，写写的......
回复 引用 查看
#31楼 2007-11-27 19:49 | 阙荣文 [未注册用户]
TO 楼主:
我上面说的话和技术无关, 只是我认为能把这点知识写出来,而且写得那么好就值得肯定.我鄙视的使那种用很不屑的语气在边上指手画脚的行为.
现在很多论坛的风气就很不好,发个帖子,写篇文章,总有人跳出来指手画脚说这个怎样怎样,那个又怎样怎样. 我觉得是态度问题,如果确实对这篇帖子(文章)有异议,可以讨论,可以补充. 凭空说一些大话,莫名其妙的话,有何意义?
当然, 我可能理会错某些评论的本意了,也许发表者并没有这个意思.那就算我借题发挥吧. 共勉.
回复 引用 查看
#32楼 2007-12-05 22:56 | 可乐虫 [未注册用户]
仁者见仁,智者见智
回复 引用 查看
#33楼 2007-12-14 11:33 | xiazhi33 [未注册用户]
其实 呵呵``` 还有种 好的办法就是 findcontrol 了`
不知道 大家使用过没的 `` 我反正经常使用的哈!
回复 引用 查看
#34楼 2008-01-09 10:26 | ColdDog
我这里的一篇翻译文第4点也提到这个问题，请参考：
http://www.cnblogs.com/lxinxuan/archive/2007/04/21/721980.html
回复 引用 查看
#35楼 [楼主]2008-01-09 12:37 | 李永京
@ColdDog
恩，去看看！
回复 引用 查看
#36楼 2008-04-09 13:02 | Must Studying [未注册用户]
你知道你怎么不提啊？？？博主提的不错，说你不好的都垃圾
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET 2.0 创建母版页引来的麻烦
- ASP.NET 2.0 创建母版页引来的麻烦
- [ASP.NET 2.0]创建母版页引来的麻烦
- ASP.NET 2.0创建母版页引来的麻烦
- ASP.NET 2.0 创建母版页引来的麻烦
- [ASP.NET 2.0]创建母版页引来的麻烦
- ASP.NET 2.0 创建母版页引来的麻烦
- ASP.NET 2.0创建母版页引来的麻烦
- ASP.NET 2.0 创建母版页导致js出现“ 'document.getElementById(...)' 为空或不是对象”错误
- ASP.NET 2.0 中的创建母版页
- ASP.NET 2.0 中的创建母版页
- ASP.NET 2.0 中的创建母版页
- 在ASP.NET 2.0中操作数据：创建母版页和站点导航
- 在ASP.NET 2.0中操作数据之三：创建母版页和站点导航
- ASP.NET 2.0 中的创建母版页
- ASP.NET 2.0 中的创建母版页
- ASP.NET 2.0 创建母版页导致js出现“ 'document.getElementById(...)' 为空或不是对象”错误
- ASP.NET 2.0 创建母版页导致js出现“ 'document.getElementById(...)' 为空或不是对象”错误《转》
- Scott Mitchell 的ASP.NET 2.0数据教程之一: 创建一个数据访问层
- ASP.NET 2.0数据教程之二: 创建一个业务逻辑层