65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 AJAX 的自动完成文本框 (使用 Atlas)

rperetz
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.63/5 (32投票s)

2006年7月24日

CPOL

7分钟阅读

viewsIcon

262297

downloadIcon

1638

在 ASP.NET 2.0 中拥有自己的自动完成文本框是多么简单。

引言

在本文中，我将展示如何从 ASP.NET TextBox 控件构建一个自动完成文本框。借助 Atlas，可以非常轻松地为页面添加 AJAX 功能。这是最终产品的屏幕截图

背景：什么是 Atlas

“Atlas”是一个免费框架，用于构建新一代更丰富、更具交互性、高度个性化的跨浏览器 Web 应用程序。这项来自微软的新 Web 开发技术将跨浏览器客户端脚本库与 ASP.NET 2.0 的服务器端开发框架相结合。此外，“Atlas”为客户端网页提供了与 ASP.NET 为服务器端页面提供的相同的开发平台。由于“Atlas”是 ASP.NET 的扩展，因此它与服务器端服务完全集成。“Atlas”使得可以轻松利用 Web 上的 AJAX 技术，并使您能够创建具有丰富、响应式 UI 和服务器通信的 ASP.NET 页面。但是，“Atlas”不仅仅适用于 ASP.NET。您可以利用丰富的客户端框架轻松构建与任何后端数据提供程序集成并在大多数现代浏览器上运行的以客户端为中心的 Web 应用程序。

步骤 1 - 为您的新网站做好 Atlas 的准备

系统要求

  • 支持的操作系统：Windows Server 2003；Windows XP。

所需软件

  • Microsoft .NET Framework 2.0 版
  • IE 5.01 或更高版本：对于所有 .NET Framework 的安装，您还必须运行 Microsoft Internet Explorer 5.01 或更高版本。

可选软件

  • Visual Studio 2005 或 Visual Web Developer Express Edition（免费下载）。

安装“Atlas”安装程序 - June CTP。此安装程序将在您的计算机上安装核心“Atlas”文件，并安装一个 Visual Studio 2005 网站模板，用于从空白的“Atlas”Web 项目创建您自己的“Atlas”应用程序。如果您安装了 IIS，安装程序可以配置它以识别“Atlas”使用的文件扩展名。您可以在 http://atlas.asp.net/default.aspx?tabid=47&subtabid=471 找到最新的 Atlas 框架。在此处 查看分步安装说明。安装 Atlas 后，您就可以开始使用了！

步骤 2 - 创建新的“Atlas”Web 站点

  • 启动 Visual Studio。
  • 在“文件”菜单上，单击“新建 Web 站点”（或者，单击“新建”，然后单击“Web 站点”）。
  • 在“我的模板”下，选择“ASP.NET ‘Atlas’ Web 站点”。
  • 选择您的安装位置，选择您要用于 Web 站点的语言，然后输入或浏览到您要创建 Web 站点的本地路径：单击“确定”。

创建新的“Atlas”Web 站点时，Visual Studio 会将“Atlas”运行时程序集从其安装位置复制到 Web 站点的 Bin 文件夹。Visual Studio 还会生成一个 Web.config 文件，其中预先配置了运行“Atlas”应用程序所需的设置。

步骤 3 - 来点 AJAX 吧！

首先，我们从一个非常简单的 ASP.NET HTML 页面开始

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
         "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>

如您所见，这段代码没有什么特别需要了解的。这里只有一个简单的服务器端 ASP.NET TextBox。现在，目标是让这个文本框具备 AJAX 功能，并使其成为一个自动完成文本框。为此，我需要添加一个 ScriptManager Atlas 控件。

<atlas:ScriptManager ID="ScriptManager1" runat="server" />

ScriptManager 控件是“Atlas”的核心。它管理页面中的所有“Atlas”组件，处理部分页面更新，并呈现客户端脚本，使您能够通过代理对象从 JavaScript 访问 Web 服务方法。接下来，我们要在 TextBox 控件下方添加来自 Atlas 的 AutoCompleteExtender 控件

<atlas:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server">

<atlas:AutoCompleteProperties Enabled="true"
  MinimumPrefixLength="1"
  TargetControlID="TextBox1"
  ServicePath="~/Services/ProductService.asmx"
  ServiceMethod="FindProducts" />
</atlas:AutoCompleteExtender>

什么是 AutoCompleteExtender？

AutoCompleteBehavior 组件为文本框控件增加了自动完成功能，它将用户输入的文本发送到 Web 服务方法以获取完成文本的建议列表。结果显示在文本框下方的下拉面板中。用户可以使用鼠标或键盘选择建议的字符串之一。

要为文本框添加自动完成功能，请创建一个 Web 服务，其中包含一个具有以下签名的函数

public string[] GetSuggestions(string prefixText, int count);

prefixText 参数包含用户到目前为止输入的内容。count 参数指定要返回给客户端的可能值的最大数量。该函数返回一个字符串数组，这些字符串将在一行中显示在下拉面板中。如果结果为空或 Web 服务根本没有返回结果，则不会显示下拉面板。函数名由 ServiceMethod 属性确定，可以是任何有效的 C# 标识符。参数名称必须与上面函数签名中使用的名称匹配。一旦有了检索建议列表的 Web 服务，就可以将 AutoCompleteBehavior 组件添加到 TextBox 控件的 behaviors 元素中。至少，您必须设置 serviceURL 和 serviceMethod 属性，以指定用于获取建议的 Web 服务。还有其他几个属性，用于微调自动完成列表的行为，包括 completionInterval（指定建议更新的频率）、completionSetCount（限制返回的建议数量）以及 minimumPrefixLength（设置在显示任何建议之前用户必须输入的最小字符数）。添加这两个 Atlas 控件后，我们的 UI 页面应该如下所示

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
              "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<div>
</div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<atlas:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server">
<atlas:AutoCompleteProperties Enabled="true"
    MinimumPrefixLength="1"
    TargetControlID="TextBox1"
    ServicePath="~/Services/ProductService.asmx"
    ServiceMethod="FindProducts" />
</atlas:AutoCompleteExtender> 
</form>
</body>
</html>

步骤 3 - 编写数据层

借助 Microsoft Data Access Application Block for .NET，我创建了一个非常简单而实用的数据层（http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnpag2/html/daab.asp）。注意：我在下载的示例中包含了所有代码。我有两个类

  • sqlHelper - Microsoft Application Block for ADO.NET。
  • SqlProductProvider - 我们的数据提供程序，它有一个返回 SqlDataReader 的方法。

这是 SqlProductProvider 类中的函数

public static SqlDataReader GetProductLists(String owner)
{
    SqlDataReader reader = SqlHelper.ExecuteReader(ConnectionString, 
                               "GetProjectLists", owner);
    return reader;
}

我们的 Web 服务将调用此函数，以获取所有以给定字符串（您在文本框中键入的字符串）开头的记录。我知道此函数将在用户按下每个键时调用，因此我决定调用一个存储过程。我们的存储过程非常简单；它只接受一个参数，并执行一个 SQL Select，返回所有以该参数开头的产品名称

SELECT
    ProductName
FROM
    Products
WHERE
    ProductName like @pProductName +'%'

步骤 4 - 编写 Web 服务

让我们看看代码

[WebMethod]
public String[] FindProducts(String prefixText, int count)
{
    //return all records whose Title starts with the prefix input string
    List<STRING> titleArList = new List<STRING>();

    SqlDataReader drProducts = sqlProductProvider.GetProductLists(prefixText);

    while (drProducts.Read())
    {
        String strTemp = Convert.ToString(drProducts["ProductName"]);
        titleArList.Add(strTemp);
    }
    return titleArList.ToArray();
}

FindProducts WebMethod 将在用户每次在文本框中输入时被调用，并传递两个值

  • prefixText - 输入的文本
  • count - 字符数（例如，对于“IV”是 2 个字符）

在此函数中，我循环我的 dataReader 并将结果添加到数组中。最后，我返回数组，就是这样。这是显示自动完成文本框在您输入字母“c”时运行的屏幕截图。

摘要

让我们回顾一下所有这些是如何工作的：我们添加了一个名为 AutoCompleteExtender 的 Atlas 控件。此控件与一个 Web 服务通信，该服务包含一个具有以下签名的函数

public string[] GetSuggestions(string prefixText, int count);

每次用户在文本框中键入时，都会触发此函数，并传递用户键入的字符串和字符数。下一步是编写一个查询，该查询使用给定的字符串运行并返回字符串数组

SqlDataReader drProducts = sqlProductProvider.GetProductLists(prefixText);

while (drProducts.Read())
{
    String strTemp = Convert.ToString(drProducts["ProductName"]);
    titleArList.Add(strTemp);
}
return titleArList.ToArray();

现在 AutoCompleteExtender 控件会做其余的工作；它会生成用于 AJAX 的 JavaScript 代码，并链接到我们想要实现自动完成的文本框。这一切的妙处在于我的文本框仍然是一个 ASP 服务器控件，因此我在代码隐藏中仍然拥有所有功能，可以对丰富的 UI 进行任何操作。

尝试我的代码

以下是运行我的代码的步骤

  1. 下载 zip 文件。
  2. 将“AtlasTextBoxAutoComplete”文件夹复制到您的网站文件夹（C:\Documents and Settings\[your name]\My Documents\Visual Studio 2005\WebSites）。
  3. 打开 VS2005 并创建一个名为“AtlasTextBoxAutoComplete”的新 C# 网站（无需选择 Atlas 模板，因为我的网站已经包含所有 Atlas DLL），并将站点指向您保存文件夹的位置（C:\Documents and Settings\[your name]\My Documents\Visual Studio 2005\WebSites\AtlasTextBoxAutoComplete）。
  4. VS2005 会显示一个消息说“网站已存在”。现在，选择“打开现有网站”，然后按“确定”。
  5. 单击 default.aspx（使其成为您的启动页）并运行。
  6. 输入字母“c”并等待 3 秒……然后见证奇迹。（查找基于 Product 表中的 Product Name。）

反馈

欢迎对本文留下任何反馈；这是我的第一篇文章，所以请对我宽容点。

© . All rights reserved.