AJAX.NET框架构建Lookup服务器控件

四、 查找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技术实现。

查看本文来源