母版页中对控件ID的处理:aspnetForm的产生
来源:互联网 发布:小程序做淘宝客怎么样 编辑:程序博客网 时间:2024/06/06 19:43
本篇技巧和诀窍记录的是:母版页中对控件ID的处理。
一、问题提出
由于总体排版和设计的需要,我们往往创建母版页来实现整个网站的统一性,最近我由于统一性的需要,把原来整个项目单独的页面全部套用了母版页。但是出现了一个错误……在我的Blog中记录一下,方便大家参考。
二、 抽象模型
由于整个页面内容过多,所以我把这个页面中最为本质的问题抽象出来。原来单一页面,就是利用按钮触发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:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script language="javascript" type="text/javascript">
var menu = 1;
function openMenu()
{
document.buaa.ShowDiapoBar = menu;
document.buaa.ShowStandardToolBar = menu;
document.buaa.ShowTimeLineBar = menu;
document.buaa.ShowMain3DToolBar = menu;
document.buaa.ShowCollabToolBar = menu;
if(menu==1)
{menu=0;return;}
if(menu==0)
{menu=1;return;}
}
</script>
<div>
<input name="ctl00$ContentPlaceHolder1$toolbox"
id="ctl00_ContentPlaceHolder1_toolbox" onclick="openMenu();"
type="button" value="显示/隐藏工具栏" runat="server"/>
</div>
<div>
<object id="buaa"
name="buaa"
height="500" width="600"
codebase="3DVIAPlayerActiveX.cab#version=6,2,2,1359"
classid ="CLSID:410B702D-FCFC-46B7-A954-E876C84AE4C0">
<param name="_Version" value="65545"/>
<param name="_ExtentX" value="16060"/>
<param name="_ExtentY" value="13229"/>
<param name="_StockProps" value="0"/>
<param name="RenderGroundShadow" value="0"/>
<param name="RenderMode" value="2"/>
<param name="CameraPlayMode" value="1"/>
<param name="AntiAliasingOnIdle" value="0"/>
<param name="GroundGrid" value="0"/>
<param name="AutoPlay" value="0"/>
<param name="FileName" value="F523-70601-006.smg"/>
<param name="ShowViewBar" value="0" />
<param name="ShowMarkerBar" value="0" />
<param name="ShowStandardToolBar" value="0" />
<param name="ShowTimeLineBar" value="0" />
<param name="ShowMain3DToolBar" value="0" />
<param name="ShowCollabToolBar" value="0" />
<param name="UseGUID" value="1" />
</object>
</div>
</asp:Content>
- 母版页中对控件ID的处理:aspnetForm的产生
- 母版页中对控件ID的处理:aspnetForm的产生
- 母版页中对控件ID的处理
- 母版页中对控件ID的处理
- ASP.NET母版页中对控件ID的处理
- Tips/Tricks#0:母版页中对控件ID的处理
- C#+Regex正则批量替换母版页面下产生的name、id内容处理
- .net中使用母版页后获取服务器控件的ID
- 自定义控件中ViewSate在母版页中丢失的处理
- asp.net 对母版页的控件事件
- 母版页和母版页子页面中的jquery对服务器控件元素的操作
- js : 在使用母版页时,在前台js中得到子页面中的控件的id
- 一步步学习SPD2010--第十一章节--处理母版页(3)--母版页上使用的控件
- 取母版页上的ID
- 引用母版页中用户控件的服务器控件 普通页中控件母版页中的元素
- 使客户端的控件ID保持不变,不受母版页的影响
- 在内容页中修改母版页控件的属性
- 在母版页中使用验证控件存在的问题
- 中文路径
- ComBox和DataGrid显示Array数据
- 程序员和测试员
- Android自动登录的实现SharePreference
- vmstat显示参数说明
- 母版页中对控件ID的处理:aspnetForm的产生
- FMS简介
- Windows下Android开发环境搭建
- 一些常用Symbian开发例子
- Concise steps to Building and Installing the FIPS Object Module with OpenSSL (Unix/Linux)
- 最近写的各种Linq实例,to xml,to dataset,to object
- STL 简介
- 为什么类的成员变量是自身类型时只可以声明
- jsp 传参求高手解决!!!!