一、问题提出

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

二、 抽象模型

　　由于整个页面内容过多，所以我把这个页面中最为本质的问题抽象出来。原来单一页面，就是利用按钮触发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%>"); //推荐

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

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

  1. [转]ASP.NET母版页中对控件ID的处理

    一.问题提出 由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页.但是出现了一个错误……在我的Blog中记录一下,方便 ...

  2. 041. asp.net中内容页访问母版页中的控件

    母版页运行机制: 用户通过输入内容也的URL来请求某个页面, 获取该页面后, 读取@Page指令, 如果该指令引用了一个母版页, 则也读取该母版页, 如果也是第一次请求这两个页面, 则母版页和被请求的 ...

  3. 母版页中ContentPlaceHolder 控件的作用

    文章转自  http://wenku.baidu.com/link?url=7sLN0ihgZQ1XfX47b_y8qbpIVjS5T75Q1xvaoyIQ6OiKIgvzyVyRccnU9e9fqo ...

  4. 母版页改变被嵌套的页面中的控件ID的解决方法

    使用过模板页的朋友都会很纳闷,怎么页面的用js通过getElementById(“id”):找不到对象.查看了页面源代码才发现,原来控件的ID变了,这是母版页导致的.因为母版页怕母版页本身页面中的控件 ...

  5. asp.net js获取控件ID

    ClientID是由ASP.Net生成的服务器控件得客户端标识符,当这个控件生成到客户端页面的时候,在客户端代码访问该控件时就需要通过ClientID来访问. 以文本框为例: 一.未使用母版页 js可 ...

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

    众所周知在Asp.net中如果一个页面添加了一个用户控件(或母版页),那么用户控件内的控件的   ClientID号会被自动添加页面中用户控件的ClientID 即页面中的控件内的控件ClientID ...

  7. [转载]ASP.NET中TextBox控件设立ReadOnly="true"后台取不到值

    原文地址:http://www.cnblogs.com/yxyht/archive/2013/03/02/2939883.html ASP.NET中TextBox控件设置ReadOnly=" ...

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

    用于检查是否有输入值 :RequiredFieldValidator(必须字段验证) 按设定比较两个输入 :CompareValidator(比较验证) 输入是否在指定范围 :RangeValidat ...

  9. asp.net中Repeater控件用法笔记

    大家可能都对datagrid比较熟悉,但是如果在数据量大的时候,我们就得考虑使用 repeater作为我们的数据绑定控件了.Repeater控件与DataGrid (以及DataList)控件的主要区 ...

随机推荐

  1. MySQL 5.5 服务器变量详解二（转）

    add by zhj:在MySQL5.6中对一些参数有增删改,详见http://dev.mysql.com/doc/refman/5.6/en/server-system-variables.html ...

  2. RFID第二次作业

    1.简述智能卡的发展,以及射频电子标签在其中所处的位置. 智能卡(Smart Card)又称为集成电路卡(IC卡),内部带有微处理器和存储单元等部件. 射频电子标签是一种非接触式的IC卡,是后期发展起 ...

  3. HD1049Climbing Worm

    Problem Description An inch worm is at the bottom of a well n inches deep. It has enough energy to c ...

  4. HDU 2256 Problem of Precision (矩阵快速幂)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2256 最重要的是构建递推式,下面的图是盗来的.貌似这种叫共轭数. #include <iostr ...

  5. Add mappings to an Elasticsearch index in realtime

    Changing mapping on existing index is not an easy task. You may find the reason and possible solutio ...

  6. redis安装配置与测试

    phpredis: https://github.com/nicolasff/phpredis http://www.cnblogs.com/ikodota/archive/2012/03/05/ph ...

  7. 基于LDA对关注的微博用户进行聚类

    转自:http://www.datalab.sinaapp.com/?p=237 最近看了LDA以及文本聚类的一些方法,写在这里算是读书笔记.文章最后进行了一个小实验,通过爬取本人在微博上关注的人的微 ...

  8. Oracle Job相关

    Oracle JOB的建立,定时执行任务      begin            sys.dbms_job.submit(job => :job,                       ...

  9. 理解Web标准（网站标准）

    我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...

  10. Pgpool烂泥扶不上墙

    写这篇文章,是想好心地给打算使用Pgpool的人提个醒: Pgpool 真的不适合在企业范围使用. 我的主要理由是: 设计陈旧: 一旦后台任何节点Down掉,都会引发failover,它会杀掉所有子进 ...