四、生成复杂的ID难以使用JavaScript操作
我在上一篇文章的最后提到了，虽然使用WebForms我们能够对于页面上的HTML属性和样式等进行自由的定制和控制，但是有一点是毋庸置疑的，我们没有办法（正常的办法吧！Hack不算）让服务器端控件在客户端生成一个简单的ID。例如，一个TextBox控件，在服务器端的ID是txtUserName，但是最终在客户端生成的ID可能是LoginForm_txtUserName，因为它被放在一个ID为LoginForm的NamingContainer中。
有了组件模型，就出现了大量控件。控件最主要的目的之一就是复用，而复用的一个特点就是应该高度内聚，而不依赖于外部环境。因此，为了使组件内部的服务器控件最终生成的客户端ID能够在页面上唯一，WebForms引入了NamingContainer这个概念。在NamingContainer中的服务器端控件最终在客户端生成的ID，会使用NamingContainer的“客户端ID”作为前缀。如此“递归”的做法保证了服务器控件在客户端的ID唯一。
Web 2.0在业界风卷残云般的势头至今还未停歇，与其有密切相关的AJAX技术也被广泛使用。AJAX技术从根本上讲，是一种在浏览器中使用JavaScript实现的技术，因此使用JavaScript操作DOM元素的情况非常多见。在非WebForms的页面中我们可以编写如下的代码：
<input type="text" id="textBox" />
<script language="javascript" type="text/javascript">
document.getElementById("textBox").value = "Hello World!";
</script> |
但是由于NamingContainer的缘故，我们在使用WebForms的服务器端的控件时就可能无法通过textBox在客户端获得文本框（生成的元素）。为了解决这个问题，服务器端的控件模型提供了一个ClientID属性，通过这个属性，我们就可以在服务器端得到控件最终在客户端的ID。例如，如果上面的代码放在一个用户控件里的话，就一定必须写成如下形式：
<%@ Control Language="C#" AutoEventWireup="true" %>
<asp:TextBox runat="server" ID="textBox" />
<script language="javascript" type="text/javascript">
document.getElementById("<%= this.textBox.ClientID %>").value = "Hello World!";
</script> |
<%@ Control Language="C#" AutoEventWireup="true" %>
此时，当控件被放到页面上之后，它在客户端生成的代码则会是：
<input name="DemoControl1$textBox" type="text" id="DemoControl1_textBox" />
<script language="javascript" type="text/javascript">
document.getElementById("DemoControl1_textBox").value = "Hello World"!;
</script> |
请注意元素的name和id，它们都留下了NamingContainer的痕迹。由于我们在页面上使用了<%= %>标记直接输出了服务器控件的ID，这样在客户端的JavaScript代码也就可以正确访问到服务器端
对应的客户端元素了。
这种在设计器很难预测的客户端ID，就是使用WebForms时所谓的“客户端ID污染”。
接下来我们不妨来看一个略为复杂点的例子：
<%@ Control Language="C#" AutoEventWireup="true" %>
<%@ Control Language="C#" AutoEventWireup="true" %>
<asp:TextBox runat="server" ID="textBox" />
<script language="javascript" type="text/javascript">
var counter = 0;
function increase()
{
document.getElementById("<%= this.textBox.ClientID %>").value = (counter++);
window.setTimeout(increase, 500);
}
increase();
</script> |
上面这段JavaScript代码的作用是每500为一个计数器加1，并且显示在文本框上。随着项目的发展，页面上复杂的JavaScript代码会越来越多，于是我们就会想办法将其转移到js文件中并且在页面上引用它们。使用js文件的好处很多，便于进行代码管理是一方面，但是最重要的好处之一还是对于性能的提高。如果JavaScript代码完全写在页面上，这样每次加载页面都需要下载这些JavaScript代码，而js文件可以缓存，这样客户端只需要在第一次加载时下载这个文件就可以了。减少了客户端与服务器之间数据通信的大小，也就加快页面加载的速度，提高了性能。
不过问题就此出来了：为了能够正确引用到页面上的某个服务器控件生成的DOM元素，我们就必须在页面中使用<%= %>标记来输出控件的ClientID，但是<%= %>无法写在js文件中，这可怎么办？于是很多人着急了起来，我也不时会收到此类问题，似乎很难找到合适的解决办法。于是“客户端ID污染”似乎也就成了一个使用WebForms时非常严重的问题。
频道热门
