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

.net架構|ajax|伺服器|架構|控制項 一、 簡介

　　今天，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鍵來進行列表導航，而使用斷行符號鍵實現完成。

[1] [2]  下一頁