ASP.NET AJAX Advance Tips & Tricks (1) CascadingDropDown在IE和Safari中的一个缺陷和解决方法

前言:

ASP.NET AJAX Toolkit中的CascadingDropDown简单易用,但在IE和Safari中有一个比较明显的性能缺陷,当数据量大,并且用户使用鼠标滚轮或键盘上下键选取选项时,这个缺陷非常明显。本文介绍通过修改Toolkit源代码来解决这个问题。(这个问题应该会比较争议,也许很多人并不将其视为缺陷,视情况而定吧)

问题重现:

大家可以到ASP.NET AJAX Toolkit官方展示页面看看:http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

如下图所示,当鼠标焦点在父级列表框上时,如果你用的是IE或Safari,请尝试着用鼠标滚轮,或键盘上下键来更换选项,这时就会发现每次父列表框选项的更改都使子列表框中的选项更新。这意味着,每次更改都发送了一个WebService请求,去获取子列表框中的列表项集合!

 

然而在Firefox下,我们会发现,当我们尝试用鼠标滚轮,或键盘上下键来更换选项时,子列表框中的选项并没有更新,直至父列表框失去焦点。

可以想象一下,如果子列表选项集合比较庞大,CascadingDropDown在IE或Safari下的表现将会是一个非常大的性能损耗。

原因:

我认为这个现象是由于<select>的onchange事件在IE或Safari和Firefox下的不同执行方式而引起的。

我们可以分别在FF和IE下试验以下代码,将会发现与上面类似的问题

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>Untitled Page</title>
    
<style type="text/css">
        #Select1
        
{
            height
: 19px;
            width
: 155px;
        
}
    
</style>
    
<script type="text/javascript">
    
function call()
    {
        window.alert(
"change");
    }
    
</script>
</head>
<body>
    
<select id="Select1" name="D1" onchange="call();">
        
<option>aaaa</option>
        
<option>bbbb</option>
        
<option>cccc</option>
        
<option>dddd</option>
        
<option>eeee</option>
    
</select>
</body>
</html>

 

解决方案:

找到AjaxControlToolkit项目下的CascadingDropDownBehavior.js文件,将其中关于注册onchange事件的代码修改成onblur,如下所示,重新编译,即可在IE中实现在FF中的效果:

 

CascadingDropDownBehavior.js

 

posted @ 2008-10-20 10:50 LanceZhang 阅读(...) 评论(...) 编辑 收藏