Asp.Net 之 母版页中对控件ID的处理

一、问题提出

  由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页。但是出现了一系列失效错误。

二、 抽象模型

  由于整个页面内容过多,所以我把这个页面中最为本质的问题抽象出来。原来单一页面,就是利用按钮触发JS事件,在文本域中插入“(_)”功能,其实现代码如下:

<head id="Head1" 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>

  上述页面可以正常使用。后来使用模板页后,其代码如下:

<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代码:单一页面:

<form name="form1" method="post" action="Default.aspx" id="form1">
<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="客户端插入(_)" />
</form>

看看套用母版页之后,生成的HTML代码:

<form name="aspnetForm" method="post" action="Default2.aspx" id="aspnetForm">
<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="客户端插入(_)" />
</form>

是不是看到问题了,源文件控件元素的ID和生成HTML文件的ID不一致。表单from的name属性和id属性变成了aspnetForm,控件的id属性被无缘无故了加上了ctl00_ContentPlaceHolder1_前缀,其name属性也加上了 ctl00$ContentPlaceHolder1$前缀。

这下知道了,难怪提示“‘document.getElementById(...)‘ 为空或不是对象”的错误了,原来生成页面后其ID都变了。那么我们如何解决它呢?既然他id变了,我们就把JS代码id改为生成后的id。代码如下:

  1. function insert() {
  2. document.getElementById("ctl00$ContentPlaceHolder1$txt").value =
  3. document.getElementById("ctl00$ContentPlaceHolder1$txt").value + "(__)";
  4. return;
  5. }
  6. //或者
  7. function insert() {
  8. document.getElementById("ctl00_ContentPlaceHolder1_txt").value =
  9. document.getElementById("ctl00_ContentPlaceHolder1_txt").value + "(__)";
  10. return;
  11. }

好了,问题解决了,不过想想有什么更好的办法呢?到底为什么呢?其实分析一下,它是后来生成的客户端id,我们可以用C#语句Control的 ClientID属性,像这样写:txt.ClientID; txt还是原来控件的id,后面的ClientID就是新生成的id。txt.ClientID是从程序里取到的后来生成新的id,这样不是更好吗。修改代码如下:

  1. function insert() {
  2. document.getElementById("<%=txt.ClientID %>").value =
  3. document.getElementById("<%=txt.ClientID %>").value + "(__)";
  4. return;
  5. }

还有在后台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修改方法:

  1. document.getElementById("ctl00$编辑区ID$控件ID");
  2. document.getElementById("ctl00_编辑区ID_控件ID");
  3. document.getElementById("<%=控件名ID.ClientID%>"); //推荐

在我们设计时往往就会出现一些莫名其妙的问题,我想我们遇到问题时,冷静思考,把握主次,从底层框架入手,纠其原因,相信最终会找到答案。

时间: 2024-10-13 13:36:18

Asp.Net 之 母版页中对控件ID的处理的相关文章

母版页中对控件ID的处理

注:此系列记录在我实际开发中遇到的问题和收藏一些技巧文章. 本篇技巧和诀窍记录的是:母版页中对控件ID的处理. 一.问题提出 由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页.但是出现了一个错误--在我的Blog中记录一下,方便大家参考. 二. 抽象模型 由于整个页面内容过多,所以我把这个页面中最为本质的问题抽象出来.原来单一页面,就是利用按钮触发JS事件,在文本域中插入"(_)"功能,其实现代码如下:

js获取页面容器中的控件id方法即遇到的问题

在实际开发过程中,我们会把一些控件放在容器中,这样生成出来的页面上容器中的控件id就会自动生成前缀+控件id,如果不注意就会导致js获取的时候出现错误. 通过网上查到的资料可以用document.getElementById("<%=btn.ClientID %>")来动态的获取容器中变动的控件id(btn是本来控件的id,btn.ClientID是变化之后的控件id). 但是如果把该代码放在<head runat="server">中执行,

Asp.net 恢复页面内用户控件内的控件ClientID

众所周知在Asp.net中如果一个页面添加了一个用户控件(或母版页),那么用户控件内的控件的   ClientID号会被自动添加页面中用户控件的ClientID 即页面中的控件内的控件ClientID=用户控件id号+"_"+用户控件内控件的id号 说的太绕了,还是看下例子吧 在一个asp.net页面index.aspx中添加了一个head.ascx用户控件id号为"head1" head.ascx控件中有一个input#hid_name控件 那么index.asp

asp.net js获取控件ID

以文本框为例: 一.未使用母版页 js可以使用document.getElementById('控件的ID')形式,也可以使用document.getElementById('<%=控件的ID.ClientID %>')的形式,代码如下: 1 <head runat="server"> 2 <title></title> 3 <script type="text/javascript"> 4 functio

ASP.NET在母版页或内容页上获取控件ID

原本想给一个button添加一个confirm,不同的分数提示不同的信息(大于80合格,小于80不合格,提示是否提交),最开始用了button.Atribute.Add();但是它每次获取到的是label控件在刷新前的值,后来在网上看到了ViewState[]的使用,但是还是不行,没办法,只能用js: <script> function myconfirm() { if(document.getElementById('lbl').value>=80) {return confirm('

轻松学习Asp.net中的控件

C/S 结构,即大家熟知的客户机和服务器结构.它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Client端和Server端来实现,降低了系统的通讯开销.目前大多数应用软件系统都是Client/Server形式的两层结构,由于现在的软件应用系统正在向分布式的Web应用发展,Web和Client/Server 应用都可以进行同样的业务处理,应用不同的模块共享逻辑组件:因此,内部的和外部的用户都可以访问新的和现有的应用系统,通过现有应用系统中的逻辑可以扩展出新的应用系统.

向asp.net项目中添加控件AspNetPager

1.打开项目,把.dll文件放入项目中: 2.在工具栏中添加一个自定义选项卡 3.右键选项卡,点击"选择项" 4.在打开的对话框中点击:"浏览" 5.找到要添加的控件文件AspNetPager.dll,确定,添加成功啦 向asp.net项目中添加控件AspNetPager

asp.net中验证控件的使用方法

用于检查是否有输入值 :RequiredFieldValidator(必须字段验证) 按设定比较两个输入 :CompareValidator(比较验证) 输入是否在指定范围 :RangeValidator(范围验证) 正则表达式验证控件 :RegularExpressionValidator(正则表达式验证) 自定义验证控件 :CustomValidator(自定义验证) 总结验证结果 :ValidationSummary(验证总结) 1.RequiredFieldValidator(必填字段验

ASP.NET中验证控件的使用

原文:ASP.NET中验证控件的使用 前言: 前几日,无奈用JS判断控件的有效性,发现的确是一件费力.费神的事情!特别是针对邮件格式.邮政编码等的关于正则表达式的JS验证(其中涉及正则表达式的比较等,较烦~).其实对于这些常用的控件有效性验证,在Asp.Net中有单独的验证控件可供使用.他们可以满足一般的,诸如非空,范围.比较等的验证. 验证控件: Asp.Net中内置的验证控件有:RequiredFieldValidation.RangeValidation.RegularExpressVal