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技术实现。

本文作者:

---

« 
» 

---