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。代码如下：
- 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%>"); //推荐
在我们设计时往往就会出现一些莫名其妙的问题，我想我们遇到问题时，冷静思考，把握主次，从底层框架入手，纠其原因，相信最终会找到答案。
Asp.Net 之 母版页中对控件ID的处理的更多相关文章
- [转]ASP.NET母版页中对控件ID的处理
一.问题提出 由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页.但是出现了一个错误……在我的Blog中记录一下,方便 ...
- 041. asp.net中内容页访问母版页中的控件
母版页运行机制: 用户通过输入内容也的URL来请求某个页面, 获取该页面后, 读取@Page指令, 如果该指令引用了一个母版页, 则也读取该母版页, 如果也是第一次请求这两个页面, 则母版页和被请求的 ...
- 母版页中ContentPlaceHolder 控件的作用
文章转自 http://wenku.baidu.com/link?url=7sLN0ihgZQ1XfX47b_y8qbpIVjS5T75Q1xvaoyIQ6OiKIgvzyVyRccnU9e9fqo ...
- 母版页改变被嵌套的页面中的控件ID的解决方法
使用过模板页的朋友都会很纳闷,怎么页面的用js通过getElementById(“id”):找不到对象.查看了页面源代码才发现,原来控件的ID变了,这是母版页导致的.因为母版页怕母版页本身页面中的控件 ...
- asp.net js获取控件ID
ClientID是由ASP.Net生成的服务器控件得客户端标识符,当这个控件生成到客户端页面的时候,在客户端代码访问该控件时就需要通过ClientID来访问. 以文本框为例: 一.未使用母版页 js可 ...
- Asp.net 恢复页面内用户控件内的控件ClientID
众所周知在Asp.net中如果一个页面添加了一个用户控件(或母版页),那么用户控件内的控件的 ClientID号会被自动添加页面中用户控件的ClientID 即页面中的控件内的控件ClientID ...
- [转载]ASP.NET中TextBox控件设立ReadOnly="true"后台取不到值
原文地址:http://www.cnblogs.com/yxyht/archive/2013/03/02/2939883.html ASP.NET中TextBox控件设置ReadOnly=" ...
- asp.net中验证控件的使用方法
用于检查是否有输入值 :RequiredFieldValidator(必须字段验证) 按设定比较两个输入 :CompareValidator(比较验证) 输入是否在指定范围 :RangeValidat ...
- asp.net中Repeater控件用法笔记
大家可能都对datagrid比较熟悉,但是如果在数据量大的时候,我们就得考虑使用 repeater作为我们的数据绑定控件了.Repeater控件与DataGrid (以及DataList)控件的主要区 ...
随机推荐
- SQL2008 SQL Server 代理服务提供的凭据无效
工作中遇到的问题记录: 安装到服务器配置时出的错误:为 SQL Server 代理服务提供的凭据无效.若要继续操作,请为 SQL Server 代理服务提供有效的帐户和密码. 解决方法:直接在所有的“ ...
- CentOS安装配置VSFTP服务器
{:toc} 前言 本文用最简单的方式创建FTP服务,即创建一个大家都可以访问的目录,没有涉及到各种权限限制. 创建目录 在安装配置ftp之前,首先创建一个目录,用来做ftp根目录.我创建的是/hom ...
- Qt实现应用程序单实例运行--LocalServer方式
使Qt应用程序能够单实例运行的典型实现方法是使用共享内存实现.该方法实现简单,代码简洁. 但有一个致命缺陷:共享内存(QSharedMemory)实现的单程序运行,当运行环境是UNIX时,并且程序不幸 ...
- 转载php在IIS中运行
在IIS中配置PHP运行环境简单步骤 安装 IIS 7.0 打开 Control Panel\Programs\Programs and Features\Turn Windows features ...
- 引用 1.9.1.min.js dom对象 没有live 绑定事件方法， 引用 1.7.js 就有live 绑定事件方法
问题:相同环境,引用 1.9.1.min.js $('div[data-role="page"]').live('pagehide', function (event, ui) { ...
- [转载]SQL Server内核架构剖析
原文链接:http://www.sqlserver.com.cn 我们做管理软件的,主要核心就在数据存储管理上.所以数据库设计是我们的重中之重.为了让我们的管理软件能够稳定.可扩展.性能优秀.可跟踪排 ...
- vs2008 release下调试状态设置[转]
这是一个老生常谈的话题,但还是有时候会漏洞一些设置.总结一些,总共需要三个地方设置, 分别是1)c\c++-> General->Debug Information Format. 2) ...
- 4.接口隔离原则（Interface Segregation Principle）
1.定义 客户端不应该依赖它不需要的接口: 一个类对另一个类的依赖应该建立在最小的接口上. 2.定义解读 定义包含三层含义: 一个类对另一个类的依赖应该建立在最小的接口上: 一个接口代表一个角色,不应 ...
- XHTML编码规范
1.所有的标记都要有结束标记. 2.所有标记的名称和属性名称都必须使用小写 3.所有的的标记必须合理嵌套 4.属性值必须用引号包含起来 5.需要设置的属性都要给一个值 XHTML 规定所有属性都必须有 ...
- xx.exe 中的 0x7c92e4df 处最可能的异常: 0xC0000008: An invalid handle was specified
今天遇到个超级奇怪的问题,昨天还好端端的程序,今天用VS打开后,在关闭主窗口的时候居然弹出错误提示:xx.exe 中的 0x7c92e4df 处最可能的异常: "0xC0000008: An ...