鸟食轩

 Microsoft .NET[C#] MVP 2003
随笔 - 424, 文章 - 233, 评论 - 5417, 引用 - 344
数据加载中……

设计有复杂客户端Script的服务器控件

    使用ASP.NET的服务器控件，可以极大的提高我们Web开发中组件的复用性。不过由于ASP.NET默认的__doPostBack传输机制，对于我们在Web页上开发DHMTL特性的功能没有什么实质的帮助，因为我们不可能每次HTML属性修改都doPostBack，这样的效率和用户体验会死人的哦~~

    所以这时候使用客户端Script是一个很好的办法。那我们就用呗，可是问题就谁之而来了。使用Script来操作DHTML，需要获得被操作HTML元素对象的引用(废话，不然怎么操作?!)。我们最常用的方法是：使用HTML元素的ID来引用或者使用document对象的方法：getElementById、getElementsByName 和 getElementsByTagName。由于getElementsByName 和 getElementsByTagName获得的都是一个HTML元素对象集合，所以最常用的就是getElementById了。可是对于ASP.NET的服务器端控件，要在该控件PreRender的时候才能准确的获得其ClientID属性。而且就算我们取到了HTML元素的ID，我们还需要把这个ID hard-coding到被Register到页面的Script里去。这里的复杂程度就可大可小很难说了。

    这样一来每次修改Script都要很麻烦的到控件的RegisterClientScript方法里去修改Script，并处理好需要动态写入Script的参数。更麻烦的是如果页面允许多个这样的控件Render，还需要考虑会不会ID冲突等问题，虽然ASP.NET控件Render时候会自动保证控件和其子控件的ID是unique的，可是其它的HTML元素就比较的麻烦了。而且大量的ID使用，也会给Web的设计带来一些小麻烦，因为也存在需要避免ID重复的问题。

    所以在我管理有复杂客户端Script的服务器控件时，我都不给其中的HTML元素设置ID，并且也不在客户端脚本中使用任何和HTML元素ID有关的方法去引用它们。那么怎么引用呢？使用HTML元素在DHTML对象树中的Hierarchy来查找它们就行了。当我们在IE中操作这个"控件"(已经就是HTML元素了)时，在该控件最外层作为container的HTML元素里俘获event，然后使用其event.srcElement，就可以以它为起点来查找需要的HTML元素了。比如：
<table border="1" ondblclick="ShowOrHideSpan(this)" style="border-collapse: collapse;">
    <tr>
         <td name="title">
             Tilte</td>
    </tr>
    <tr>
         <td>
             <span>Content: asdf asdf asdf</span></td>
    </tr>
</table>
我们想实现double click表格中的Title来隐藏或显示Content，怎么弄呢？

    使用如下JScript代码：
<script language="javascript">
function ShowOrHideSpan(elmt)
{
    var srcElmt = event.srcElement;
    if ( srcElmt && srcElmt.tagName == 'TD' && srcElmt.name == 'title' )
    {
         var span = FindChildElement(elmt, 'SPAN');
         if ( span.style.display == 'none' )
         {
              span.style.display = 'inline';
         }
         else
         {
              span.style.display = 'none';
         }       
    }   
}
</script>
    这段Script中的FindChildElement(elmt, 'SPAN')就是在以elmt为起点遍历DHMTL对象树，一找出SPAN元素。当然这个示例只是一个demo，或许你会说，把事件监听放到第一个tr上多好，可那不是我们在这个demo中关心的东西。在实际的控件开发中可能会比这复杂的多，不过原理就是这样弄了，完全不依赖任何的ID。

    不过这种方式也还是有些不足，因为有时我们会发现FindChildElement相对于FindParentElement不是那么容易确定，一个起点元素的parent肯定是唯一的，而它的child显然可能是很多个。不过在我觉得在控件开发中注意一下HTML元素的Hierarchy比管理它们ID要容易得多，而且也不会对Script产生太大的影响。

    欢迎您的讨论和建议~~

    附一、FindChildElement(element, tagName)源代码(先深遍历)：
<script lanuage="JavaScript"></script>
    在某些时候我们可以不用这个遍历算法，而使用element.all.tags(tagName)来获取Child Element，这个依赖于该页面的HTML元素之间的Hierarchy。

    附二、FindParentElement(element, tagName)源代码：
<script lanuage="JavaScript"></script>

posted on 2005-02-20 11:02 birdshome 阅读(8963) 评论(24)  编辑 收藏 所属分类: Jscript&Dhtml开发 、Asp.net控件开发

评论

#1楼    回复  引用  查看    

服了，你的script造诣
2005-02-20 16:20 | 灵感之源：PSP团队Guru      

#2楼    回复  引用  查看    

问一下，你每篇文章的标题下面有个google tracker，怎么弄的？连研究一下都懒得去做了:)
2005-02-20 16:23 | 灵感之源：PSP团队Guru      

#3楼 [楼主]   回复  引用  查看    

在'用脚本为本blog增加了几项自定义功能'那片文章里有说怎么弄得
2005-02-20 19:30 | birdshome      

#4楼    回复  引用  查看    

记性越来越差了，以前看过的～～～麻烦你了，呵呵
2005-02-20 21:11 | 灵感之源：PSP团队Guru      

#5楼    回复  引用  查看    

佩服
2005-02-21 20:44 | 辣妹子      

#6楼    回复  引用  查看    

如果一个页面中存在两个datagrid的服务器控件，而这两个datagrid都含有一列是checkbox（header栏也有checkbox--全选的作用），那这时候用你的方法不能起到一选择某个datagrid中的header栏里的checkbox就能实现全选或者全部不选！
2005-03-01 09:28 | ocean      

#7楼 [楼主]   回复  引用  查看    

怎么不能呢？header里checkbox的onclick='SynchCheck(this)';
function SynchCheck(chkb)
{
    var tbl = FindParentElement(chkb, 'TABLE')
    var checks = tbl.all.tags('INPUT');
    for ( var i=0 ; i < checks.length ; ++i )
    {
        var check = checks[i];
        if ( check.type == 'checkbox' )
        {
            check.checked = chkb.checked;
        }
    }
}
2005-03-01 10:46 | birdshome      

#8楼    回复  引用    

如果层次结构变了,或者节点类型变了(都是有可能的需求),相应代码就会变动,对吧？
而使用ClientID则不存在这个问题,而且每个需要在Client端操作的DOM对象的ID完全可以使用既定的规则生成(比如统一的前缀 + 本元素类型 + 本元素用途作为名字).
对于DOM对象的控制既可以使用ID管理的方法，也可以用对象树遍历的方法管理,各有千秋.

另:国内开发WebControl的程序员还真不多,很幸运能看到你的Blog。
2005-03-07 16:03 | lonelywhisper@gmail.com [未注册用户]

#9楼 [楼主]   回复  引用  查看    

如果做页面相关较强的组件，我比较赞同使用ClientID的方式，那样简单，直接，不怕元素的层次变动。不过既然做成了控件，对于使用的人来说改动就少了(基本没有)，如果实在要改，就是对控件本身不足的提高，重新整理元素层次和代码是不可避免的。

BTW: 也非常希望能听到你的经验之谈:)
2005-03-07 16:10 | birdshome      

#10楼    回复  引用    

能不能提供一个完整控件操作例子,小人看不明白啊
2005-03-18 22:48 | cqhydz [未注册用户]

#11楼    回复  引用  查看    

使用srcElement就不能浏览器兼容了，还是使用dom来定位好些，不过要麻烦点
2005-04-27 16:16 | ttyp      

#12楼    回复  引用    

dom是规范嘛！
2005-05-11 22:00 | edison1024 [未注册用户]

#13楼    回复  引用    

其实在ASP.Net控件中继承 INamingContainer 这个接口，子控件的ID就不会出现重复了
2005-05-20 09:42 | 风格 [未注册用户]

#14楼 [楼主]   回复  引用  查看    

@风格
     你未免太信任M$了，即使ASP.NET的控件都实现了INamingContainer interface，Framework解析ASP.NET页面还是有控件id重名的bug存在。
     我在上文中所说的避免ID重名，主要还考虑了手工输入的ID和非ASP.NET控件产生的ID这些混合情况，我的一个观点是，尽量减少ID在同一页面中的数量，是避免潜在ID重名的一个可行方法。
2005-05-21 00:32 | birdshome      

#15楼    回复  引用  查看    

看看学学！
2005-07-19 19:26 | 轩辕剑      

#16楼    回复  引用    

好，顶
2005-08-11 11:08 | todi [未注册用户]

#17楼    回复  引用    

我一直都用elment.getElementsByTagName()来实现那个FindChildrenElement的方法。
2006-02-16 10:18 | putor [未注册用户]

#18楼 [楼主]   回复  引用  查看    

@putor
还可以用element.all.tags('TagName')，不过我不能确认这样拿到的数组的第一个元素是不是child hierarchy中的第一个我想要找的那个元素。
2006-02-16 10:33 | birdshome      

#19楼    回复  引用  查看    

微软不太厚道，把JS藏在system.web.dll中了，叫WebForm.js，用WebResource可以访问得到
WebForm_GetParentByTagName(element, tagName)
WebForm_GetElementsByTagName(element, tagName)
2006-04-04 16:40 | 251      

#20楼    回复  引用    

比较不错!
2006-10-09 15:01 | yadang001 [未注册用户]

#21楼    回复  引用    

不错, 试一下
2006-12-12 11:06 | jexica [未注册用户]

#22楼    回复  引用    

用微软的 event.srcElement;对其他浏览器不支持
2007-05-25 16:58 | skyey [未注册用户]

#23楼    回复  引用    

GOOD
2008-03-29 10:34 | aa5987 [未注册用户]

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2005-07-04 17:39 编辑过


相关链接:

最新IT新闻:
Google股价跌破329美元 61%员工期权价值归零
十年祭:昔日明星软件今何在?
六大可能出售IT企业名单：SUN领头或被猎走
Linux内核2.6.27正式到来
《星际争霸2》一分为三 各种族依次登场