masterpage是vs2005中的新功能,可以实现以前用模板页和框架页的效果,使页面的开发和维护据效率大大提高了,可是前天在做客户端验证时发现masterpage里面不能使用javascript,页面虽然可以显示,但是浏览器提示页面存在错误。
我们知道,masterpage不能独立运行,需要其他页面继承它才能运行。打开浏览器里面的HTML源文件发现服务器端的ASP控件(客户端被转化成HTML控件)元素的ID全变了,仔细一看就知道了原来masterpage里的元素ID前面全加上了“ctl00_”;但是JavaScript里面document.getElementById("ID")里面的ID没有变化!我们知道JavaScript是在客户端执行的脚本,这段JavaScript就出现错误,所以浏览器提示页面存在错误。
简单改进:
假设服务器定义asp控件
<asp:TextBox ID="name" runat="server" οnblur="sendquest();"></asp:TextBox>
<asp:Label ID="mes" runat="server"></asp:Label>
把JavaScript代码里面的引用ID的地方前面直接加上“ctl00_”
var str = document.getElementById("ctl00_name").value;
document.getElementById("ctl00_mes").innerText = "hehe";
再次运行,没有再出现上述问题。
分析知道,假如Default.aspx继承masterpage,设计页面的时候他们是分开的,所以他们可能存在ID相同的控件项。(就是可能都有一个ID为"Button1"的按钮),但是生成Default.aspx后,它在客户端显示的HTML代码是Default.aspx和masterpage的HTML代码混在一起,这时候,为了预防相同ID冲突,就把他们的ID重新处理。这可能就是名字改变的原因所在。
下面我们再看一下,Default.aspx里面控件的名字 - 就是ContentPlaceHolder里面的控件的名字 的变化。
<asp:Button ID="Button2" runat="server"/>
生成的源文件里面ID变成
id="ctl00_ContentPlaceHolder1_Button2"
ID变成了以ctl00 + 下划线 + 容器ID +下划线+ 自己ID
这是一个树形层次关系的描述命名。如果你使用JavaScript,也应该对ID做出相应的修改。
Default.aspx里面的例子。
<script language=javascript>
<!--
function CheckTextBox()
{
var txtAgenNumber=document.getElementById("ctl00$ContentPlaceHolder1$txtAgenNumber");
if(txtAgenNumber.value=="")
{
alert("代理账号不能为空!");
txtAgenNumber.focus();
return false;
}
}
-->
</script>