处理 INamingContainer 的项目框架

引言

本文将介绍我开发的一个框架，旨在简化在较旧的 ASP.NET 渲染框架中使用大量 JavaScript 客户端脚本和服务器端 INamingContainer 时的操作。

背景

当服务器控件在实现 INamingContainer 的容器内渲染到客户端时，这将修改控件的 ID。一个 ID 为 'txtUsername' 的文本框通常最终会得到一个 ID，该 ID 是控件在页面层次结构中的 $ 符号表示。例如，ctl_001$ctl_content1$txtUsername。

获取此 ID 需要使用服务器端包含来从服务器请求它。这会施加限制，例如阻止嵌入脚本。

使用以下代码，这不再是一个问题。

Using the Code

以下是项目框架代码

var ctlHolder = function(id, ctl) {
  this.ID = id;
  this.Ctl = ctl;
}
var ctlDef = function() {
  this.Items = new Array();
  this.Add = function(item) { this.Items[this.Items.length] = item; };
  this.Get = function(id) {
    for (var obj in this.Items)
      if (this.Items[obj].ID == id)
        return this.Items[obj].Ctl;
    return null;
  }
  this.EndID = function(id) {
    var index = id.lastIndexOf('$');
    if (index == -1)
      index = id.lastIndexOf('_');
    if (index == -1)
      return id;
    else
      return id.substring(index + 1);
  }
}

var ctl = new ctlDef();

function catalogItems(items) {
  if (items == null) items = document.getElementsByTagName('html');
  for (var obj in items) {
    var item = items[obj];
    if (item.id)
      ctl.Add(new ctlHolder(ctl.EndID(item.id), item));
    if (item.childNodes)
      catalogItems(item.childNodes);
  }
}

要使用此框架，在页面加载时，需要调用 "catalogItems" 函数。可以通过将以下属性添加到 HTML 文档的 body 节点来实现。

onload="catalogItems(null);"

编目完成后，您现在可以将较长的 document.getElementById 调用替换为

Old:    document.getElementById('ctl_001$ctl_content1$txtUsername')
New:    ctl.Get('txtUsername')

关注点

我发现此脚本非常快。我当前项目中的一个大型页面加载量为 300K+，此方法循环遍历所有节点并在 0.1 秒内编目完成。

在最新的框架（如 MVC）中，不再强制执行 $ 符号命名约定。