AJAX.NET架構構建Lookup伺服器控制項

一、 簡介

　　今天，AJAX成為軟體界最流行的詞藻之一；然而，這種思想並不是新的，只是由於某種原因，在去年下半年，它才變得流行起來。隨著基於web的應用軟體的不斷髮展，使用者往往要求更豐富更快速的介面。而AJAX能極大地改進使用者的web應用程式體驗。

　　對於我來說，AJAX是全新的。在一段時間以前，由於缺乏可試用的工具和現成的可用庫，我讀了一些文章才得到一些思想。然而最近，我發現了Ajax.NET-一個相當有力的支援非同步回調的架構。

　　在本文中，我將描述基於Ajax.NET建立尋找控制項的經驗。為了構建一個尋找控制項，你需要具備：

　　1. 一個伺服器方法，它能夠返回一個匹配記錄的列表。

　　2. JavaScript程式，用以處理回寄並且顯示一個匹配記錄的列表。

　　3. 在ASPX/ASCX頁面中具有一個輸入欄位。

　　在此，我將不描述Ajax.NET的安裝，因為它很簡單，並且網上有很多的資源可供你參考。

　　二、 伺服器端部分

　　這部分比較簡單。我僅需要建立一個方法，它返回一個ArrayList的匹配記錄並在該方法所在的位置註冊一個類：

public class Main : Page{ 　private void Page_Load(object sender， EventArgs e){ 　　Utility.RegisterTypeForAjax(typeof (Main)); 　} 　[AjaxMethod()] 　public ArrayList GetSearchItems(string query){ 　　ArrayList items = GetRecords(); 　　ArrayList matchItems = new ArrayList(); 　　foreach (string item in items){ 　　　if (item.ToLower().StartsWith(query.ToLower())) 　　　　matchItems.Add(item); 　　} 　　return matchItems; 　} 　private ArrayList GetRecords(){ 　　ArrayList items = new ArrayList(); 　　items.Add("Ted"); 　　items.Add("Teddy"); 　　items.Add("Mark"); 　　items.Add("Alfred"); 　　return items; 　} . . .

　　該GetSearchItems方法取得所有記錄（來自於任何源）的一個列表並且過濾那些用查詢參數開頭的記錄。該查詢是使用者在輸入欄位輸入的內容和過濾器。

　　三、 用戶端部分

　　首先，我決定寫一個很簡單的JavaScript-它將顯示一個DIV，並且找到的記錄正好位於查詢輸入欄位的下面。我認為這"接近"了目標，但是它要求選擇下面的項之一。最簡單的事情是把所有的項轉到超連結並用正確的點擊值來填充查詢域。請看下面的代碼：

＜INPUT id=search type=text name=search runat="server" autocomplete ="off"＞ ＜div id="list"＞＜/div＞ autocomplete="off"是必需的，用於告訴瀏覽器不要顯示該輸入欄位的可能的值。否則，我們的控制項將不工作。 function GetSearchItems_CallBack(response) { 　var div = document.getElementById("list"); 　div.innerHTML = ""; 　if (response.value != null && response.value.length ＞ 0) { 　　for (var i = 0; i ＜ response.value.length; ++i){ 　　　div.innerHTML += "＜a href=\"javascript:Fill('" + response.value[i] + "');\"＞" + response.value[i] + "＜/a＞＜br /＞"; 　　} 　}

　　JavaScript GetSearchItems_CallBack函數為onkeydown事件所調用。這可以在後台代碼中完成，或者在*.aspx頁面中實現。現在讓我們使用後台代碼方法。

private void Page_Load(object sender， EventArgs e){ 　search.Attributes.Add("onkeydown"，"javascript:Main.GetSearchItems(this.value，GetSearchItems_CallBack);"); 　Utility.RegisterTypeForAjax(typeof ( Main )); }

　　該結果看起來如所示：

　　儘管這種情形最簡單，但並不是很有用。在本例中，你只是簡單地輸入一些內容，然後點擊出現的列表中的一個連結。然而，如果改進這個樣本的話，它還需要實現一些較強的鍵盤支援；例如，應該能使用up/down鍵來進行列表導航，而使用斷行符號鍵實現完成。

四、 尋找JavaScript

　　我以前從來沒在JavaScript中處理過鍵盤問題（由我自己寫一個大而複雜的指令碼太複雜了）。我瞭解JavaScript，只是掌握得不如象C#一樣好，因此我的第一反應是"在網上尋找一些適合於我們的需要的東西"。應該說，沒有多少自由指令碼可用。我花了大約一個小時才找到一個好指令碼。其參考地址是：http://www.nsftools.com/tips/XmlHttpLookup.js。

　　該指令碼提供了一個函數來查詢服務器。我僅在mainLoop函數中作了一點修改即滿足了我的要求。

mainLoop = function() { 　val = escape(queryField.value); 　if(lastVal != val && searching == false){ 　　var response = Main.GetSearchItems(val); 　　showQueryDiv('smi'， response.value); lastVal = val; 　} 　setTimeout('mainLoop()'， 100); 　return true; };

　　該指令碼應該經由onload處理器啟用：

＜body onload="InitQueryCode('search')"＞

　　最後，我用了很少的時間就實現我所需要的功能。但遺憾的是，該方案無法重用；因此我決定建立一個簡單的伺服器控制項。

　　五、 伺服器控制項

　　該AJAX尋找伺服器控制項很簡單。原有解決方案的下列部分可進一步定製：

　　· 回呼函數的命名。

　　· JavaScript檔案的路徑。

　　· 匹配列表的背景和加亮，div padding，等等的顏色。

　　具體實現相當簡單。首先，我們可以從TextBox中派生我們的控制項。然後，我們僅需要設定一些變數並註冊一些JavaScript函數。

using System; using System.Web.UI; using System.Web.UI.WebControls; namespace play{ /// ＜summary＞ /// AjaxLookup.cs /// ＜/summary＞ public class AjaxLookup : TextBox{ 　private string scriptFile = ""; 　private string callBackFunction = ""; 　private string backgroundColor = "#EEE"; 　private string highlightColor = "#CCC"; 　private string font = "Verdana"; 　private string divPadding = "2px"; 　private string divBorder = "1px solid #CCC"; 　public string ScriptFile{ 　　get { return scriptFile; } 　　set { scriptFile = value; } 　} 　public string CallBackFunction{ 　　get { return callBackFunction; } 　　set { callBackFunction = value; } 　} 　public string BackgroundColor{ 　　get { return backgroundColor; } 　　set { backgroundColor = value; } 　} 　public string HighlightColor{ 　　get { return highlightColor; } 　　set { highlightColor = value; } 　} 　public string DivFont{ 　　get { return font; } 　　set { font = value; } 　} 　public string DivPadding{ 　　get { return divPadding; } 　　set { divPadding = value; } 　} 　public string DivBorder{ 　　get { return divBorder; } 　　set { divBorder = value; } 　} 　public AjaxLookup(){ 　　this.Attributes.Add("autocomplete"， "off"); 　} 　protected override void Render(HtmlTextWriter writer){ 　　base.Render(writer); 　　//綁定包含幾乎所有邏輯的指令碼 　　Page.RegisterStartupScript("LoadScript"， "＜script language='JavaScript' src='" + ScriptFile + "'＞" + "＜/script＞"); 　　// 包括UI設定 　　string styles = String.Format( @"＜script language='JavaScript'＞var DIV_BG_COLOR = '{0}'; 　　var DIV_HIGHLIGHT_COLOR = '{1}'; 　　var DIV_FONT = '{2}'; 　　var DIV_PADDING = '{3}'; 　　var DIV_BORDER = '{4}'; 　　＜/script＞"， 　　BackgroundColor， HighlightColor， DivFont， 　　DivPadding， DivBorder); 　　Page.RegisterStartupScript("LookupStyles"， styles); 　　// 初始化回寄處理 　　Page.RegisterStartupScript("RegisterScript"， "＜script language='JavaScript'＞" + "InitQueryCode('" + this.ClientID + "')＜/script＞"); 　　//設定正確的回呼函數 　　Page.RegisterStartupScript("RegisterCallBack"， @"＜script language='JavaScript'＞ mainLoop = function() { val = escape(queryField.value); 　　if(lastVal != val && searching == false){ 　　　var response = " + CallBackFunction + @"(val); 　　　showQueryDiv('smi'， response.value); lastVal = val; 　　} 　　setTimeout('mainLoop()'， 100); 　　return true;}; 　　＜/script＞"); 　} }

　　該控制項可以通過如下方式使用：

＜Ajax:AjaxLookup Runat="Server" id="search" BackgroundColor="#EEE" DivBorder="1px solid #CCC" DivPadding="2px" DivFont="Arial" HighlightColor="#C30" CallBackFunction="Main.GetSearchItems" ScriptFile="lookup.js" /＞

　　這裡是尋找控制項在運行結果中看上去的樣子：

　　我這裡的實現不很理想，但卻是一個好的開始。你可以通過添加另外一些參數加以改進。

　　六、 結論

　　其實，Ajax.NET還具有其它許多功能。作為學習，從一個最簡單的尋找控制項開始是比較合理的，但是我希望在未來工程的許多UI設計中都會基於AJAX技術實現。

from:http://dev.yesky.com/msdn/220/2402720_1.shtml