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< /P>

如下圖所示，當滑鼠焦點在父級列表框上時，如果你用的是IE或Safari，請嘗試著用滑鼠滾輪，或鍵 盤上下鍵來更換選項，這時就會發現每次父列表框選項的更改都使子列表框中的選項更新。這意味著，每 次更改都發送了一個WebService請求，去擷取子列表框中的清單項目集合！

然而在Firefox下，我們會發現，當我們嘗試用滑鼠滾輪，或鍵盤上下鍵來更換選項時，子列表框中的 選項並沒有更新，直至父列表框失去焦點。

可以想象一下，如果子列表選項集合比較龐大，CascadingDropDown在IE或Safari下的表現將會是一個 非常大的效能損耗。

原因：

我認為這個現象是由於<select>的onchange事件在IE或Safari和Firefox下的不同執行方式而引 起的。