使用 Google AJAXSLT 的类型预测建议文本框服务器控件

• 下载源文件 - 35.5 Kb
• 下载演示项目 - 52.9 Kb

引言

有相当多的 AJAX 库/框架设计用于在 .NET 框架上运行。典型的例子是 Microsoft Atlas。作为 AJAX 的初学者，我希望深入了解这些技术。因此，我花了一些时间先创建一些更简化的内容，这些内容也可以用于我的 Web 应用程序项目中。

在许多 Web 应用程序中，我们需要放置一个查找文本框或组合框（下拉列表）以使用户能够从主表中选择一个记录（产品、客户、员工、仓位位置等）。有时，主表包含数千条记录，将所有记录绑定到组合框效率很低，并且可能导致页面加载缓慢。

我受到 Google Suggest 和 Gmail 电子邮件地址字段的启发，这些字段大量使用了 AJAX 技术。我还了解到 Google 提供了一个开源项目，Google AJAXSLT，它是一组 JavaScript，旨在通过 XSLT 和 XPATH 在客户端（Web 浏览器）将 XML 转换为 HTML。这项举措旨在促进更多用户友好型胖客户端的开发，因为它大大减轻了服务器的负担。

我决定花一些时间探索 ASP.NET 和 AJAXSLT 的协同作用。因此，我尝试创建一个类型前缀建议文本框，该文本框会在用户输入文本时向服务器发送异步请求。与输入字符串最匹配的结果将异步返回到文本框下方的下拉区域。

背景

我创建了一个自定义服务器控件，其中包含一个 TextBox 和一个 div 对象。“keyUp”事件会触发对服务器的请求，并期望服务器以 XML 格式将前 10 条记录（从表中选择前 10 个字段，字段类似“keyword%”）获取到浏览器。

在客户端（即 Web 浏览器）上，我使用了三个 AJAXSLT 函数：“xmlParse()”、“xsltProcess()”和“el”。“el()”只是“document.getElementById()”的快捷方式。但是“xmlParse”和“xsltProcess”旨在解析 XML、XSLT，并将其转换为 HTML。

HTML 输出将被注入到 div 对象中，该对象是用于记录选择的下拉区域。

可下载的演示项目需要 SQL Server 的“Northwind”数据库才能运行，并且同时使用了“Products”和“Customer”表。

使用代码

使用此控件的方法非常简单。

1. 将可下载源文件（typeahead_src.zip）中的所有五个 JavaScript 文件复制到您的 Web 文件夹中。这些文件是“dom.js”、“misc.js”、“xpath.js”、“xslt.js”（来自 Google AJAXST）和“ws.js”（引用这里），并在 Web 页面的头部进行如下引用：

   <script src="js/misc.js" type="text/javascript"></script>
   <script src="js/dom.js" type="text/javascript"></script>
   <script src="js/xpath.js" type="text/javascript"></script>
   <script src="js/xslt.js" type="text/javascript"></script>
   <script src="js/ws.js" type="text/javascript"></script>

2. 通过从源文件中选择“aspnetcs_TypeAhead.dll”在新工具箱中添加一个新服务器控件。
3. 将“TypeAhead”控件拖放到您的 Web 页面中。
4. 由于我的 Web 应用程序主要使用 SQL Server，因此 TypeAhead 文本框目前仅支持 SQL Server。因此，您需要 SQL Server 作为后端数据库。在您能够进行测试之前，有三个关键属性需要进行设置。它们是：
   • ConnectionString
   • TableName
   • DataField

   private void Page_Load(object sender, System.EventArgs e)
   { 
     TypeAhead1.ConnectionString="server=localhost;" + 
                "database=Northwind;integrated security=SSPI";
     TypeAhead1.TableName="Products";
     TypeAhead1.DataField="ProductName";
   }

5. 就是这样！您不需要创建另一个 aspx 页面来响应来自 Web 浏览器的请求。

未来改进领域

1. 支持通用数据源。
2. 允许用户使用键盘（目前仅支持鼠标）进行记录选择。
3. 引入更智能的逻辑以减少服务器请求的频率。
4. 能够显示更丰富的信息性结果，而不仅仅是下拉区域中的选定字段。
5. 下拉区域的字体应可配置。