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键来进行列表导航，而使用回车键实现完成。