ASP.NET里masterpage的javascript问题

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" onblur="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>