快速业务通道

关于WebForms以及一些ASP.NET开发上的经验(3)

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-20

四、生成复杂的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 在客户端获得文本框(生成的<input />元素)。为了解决这个问题,服务器端的控件模型提供了 一个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>

此时,当控件被放到页面上之后,它在客户端生成的代码则会是:

<input name="DemoControl1$textBox" type="text" id="DemoControl1_textBox" />
<script language="javascript" type="text/javascript">
   document.getElementById("DemoControl1_textBox").value = "Hello World"!;
</script>

请注意<input />元素的name和id,它们都留下了NamingContainer的痕迹。由于我们在页面上 使用了<%= %>标记直接输出了服务器控件的ID,这样在客户端的JavaScript代码也就可以正确访问 到服务器端<asp:TextBox />对应的客户端<input />元素了。

这种在设计器很难预测的客户端ID,就是使用WebForms时所谓的“客户端ID污染”。

接下来我们不妨来看一个略为复杂点的例子:

<%@ Control Language="C#" AutoEventWireup="true" %>
<asp:TextBox runat="server" ID="textBox" />
<script language="javascript" type="text/javascript">
  var counter = 0;
  function increase()
  {
     document.ge

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号