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  阅读(2490)  评论(0)  编辑  收藏  举报