隨Asp.net Ajax 1.0發布的AjaxControlToolkit系列控制為開發人員帶來了許多便利,但其中許多控制項似乎並沒有我們想像的那麼完美。最近對這裡面的AutoComplete控制項用得較多,發現了它的幾個不足之處或錯誤之處:
1.在某些情況下會出現「two components with the same id」的錯誤;
2.容易導致在IE中出現「無法開啟Internet站點,…,已終止操作」的問題;
3.即使使用者輸入了很多的字符,即使已經沒有相匹配的結果,它仍然會調用服務端方法,試圖獲取相匹配的值,白白增加了伺服器的負擔;
4.自動完成清單的樣式不太好看;
5.服務端方法的簽章必須是:string[] GetCompletionList(string prefixText, int count),無法從客戶端取得其它所需要的資料。這一點在一個頁面中有多個需要從不同資料來源取得資料的AutoComplete控制項時尤其致命。
要解決這些問題,首先需要知道怎樣來修改相應的程式碼並使之在自己的應用中生效。值得慶幸的是,AjaxControlToolkit系列控制項是開源的,所以我們可以根據自己的需求來盡情修改。用VS2005開啟AjaxControlToolkit解決方案,開啟AutoComplete資料夾中的AutoCompleteBehavior.js文件,修改並重新編譯後,將產生的AjaxControlToolkit.dll檔案更新到自己的專案參考中,即可應用我們最佳化和增強後控制項的AutoCompletete了。
那麼,具體需要修改哪些程式碼呢?
針對第一個問題,需要在AjaxControlToolkit.AutoCompleteBehavior.callBaseMethod(this, 'dispose');這一行之前加上:
if (this._popupBehavior) {
this._popupBehavior.dispose();
this._popupBehavior = null;
}
第二個問題,要將document.body.appendChild(this._completionListElement);這一行修改為 element.parentNode.appendChild(this._completionListElement);
第三個問題,需要在_onTimerTick方法中,為if (text. trim().length < this._minimumPrefixLength) 這個判斷增加一個條件,變成:if (text.trim().length < this._minimumPrefixLength || text.trim().length > 10) ,這就使得,當當使用者的輸入超過10個字元時,就不必向服務端呼叫讀取匹配值的方法了。
第四個問題,要調整自動完成清單的樣式,可以直接修改initializeCompletionList方法中的以下程式碼:
completionListStyle.backgroundColor = this._textBackground;
completionListStyle.color = this._textColor;
completionListStyle.border = 'solid 1px buttonshadow';
completionListStyle.cursor = 'default';
completionListStyle.unselectable = 'unselectable';
completionListStyle.overflow = 'hidden';
,或刪除這幾行,並加上:element.className = "completionList";然後在頁面上新增樣式類別「completionList」的定義即可;
要解決最後一個問題,應該在{ prefixText : this._currentPrefix, count: this._completionSetCount}這一行增加一個發給伺服器的參數,變成:
{ prefixText : this._currentPrefix, count: this._completionSetCount , srcId: this.get_element().getAttribute("srcid") }
從而,服務端的讀取自動完成清單項目的方法簽章就可以寫成:string[] GetCompletionList(string prefixText, int count ,string srcId)。這意味著,我們可以為需要應用自動完成功能的文字方塊預先設定一個用於標識其資料來源的識別字串,C#程式碼如:tb.Attributes.Add("srcid", "xxx"); 然後,在GetCompletionList方法中就可以根據客戶端傳過來的這個參數值來有針對性地讀取資料了。