使用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
>
所以这时候使用客户端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元素了。比如:










使用如下JScript代码:


















不过这种方式也还是有些不足,因为有时我们会发现FindChildElement相对于FindParentElement不是那么容易确定,一个起点元素的parent肯定是唯一的,而它的child显然可能是很多个。不过在我觉得在控件开发中注意一下HTML元素的Hierarchy比管理它们ID要容易得多,而且也不会对Script产生太大的影响。
欢迎您的讨论和建议~~
附一、FindChildElement(element, tagName)源代码(先深遍历):


附二、FindParentElement(element, tagName)源代码:



本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。