如何在一个分层列表中使用 Ajax

• 下载源代码 - 8Kb

引言

在本教程中，我将展示如何在 ASP.NET 2.0 中使用 Ajax 的简便方法。我将使用 SQL Server 2005 Northwind 数据库（但您也可以使用 SQL Server 2000 甚至 Access）。

Microsoft AJAX 的最终版本（以前称为“Atlas”）将于 2007 年 1 月发布，但您可以在 此处获取最新的 CTP 版本。

由于此 CTP 与最终版本之间不会有太多更改，因此您可以将其应用到您的项目中，之后只需更新一些 DLL 即可。

本教程需要以下软件：

1. Windows 2000 / XP Home 或 Pro / 2003 / Vista
2. Visual Studio Express 2005 或更高版本
3. SQL Server 2000 或 2005 或 Access 数据库

请注意，在本教程中使用的所有工具都可以免费获得（Visual Studio Express 2005、SQL Server Express 2005）。

本教程献给新手开发者，因为我将一步步解释所有必要的步骤以达到最终结果。如果您是经验丰富的用户，那么这个故事的寓意是：每当您需要处理 GridView、DropDownList、ListBoxes 或类似控件时，请务必使用 Update Panel 来承载您的控件。您可以在本文的顶部下载代码示例。

安装 Microsoft AJAX 后，您应该创建一个新的“ASP.NET Ajax-Enabled Web Site”，如下图所示：

这里我们将选择 C#，但这无关紧要，因为在此示例中我们不会编写一行代码。

通过点击页面的“设计”模式，您将看到如下内容：

我们将使用 Northwind 数据库，该数据库可以从 Microsoft 网站下载。我们感兴趣的两个表是上面的。Categories（类别），它是父表，将由一个列表框表示；Products（产品），由另一个列表框表示。因此，每当用户点击类别列表框时，将显示属于该类别的产品。这是数据库架构：

现在我们将做一些有趣的事情，先用 Ajax，然后不用 Ajax，看看区别。在最终版本中，我将把两个示例并排放置，以更好地说明差异……

首先，我们将添加一个列表框控件（或下拉列表，这无关紧要）：

之后，我们将配置我们的数据库源。如何配置？点击数据源箭头，然后选择“选择数据源”。

然后将出现如下对话框：

选择“选择数据源”。

新建数据源...

选择数据库，并将我们的数据源命名为“dtsCategories”。

现在选择“新建连接”。

然后将出现一个类似这样的屏幕：

点击“更改”，因为我们想要一个 SQL Server 数据库。

选择 SQL Server。

然后选择服务器名称（提示：本地服务器请输入“.”），并选择 Northwind 数据库。

现在我们有了连接。现在只需点击“下一步”。

下一篇

现在我们选择 Categories 表，选择“CategoryID”和“CategoryName”字段，这些是我们感兴趣的字段。下一步。

在这里我们可以测试我们的查询。最后选择“完成”。

配置好我们的数据源后，就可以在我们的默认页面上设置一个列表框了，我们将它命名为“lstCategories”。

然后，我们将像为前一个控件一样，点击列表框的箭头，添加一个数据源。

所以现在我们选择“CategoryName”（要显示的文本），而“CategoryID”是列表框的值。

然后我们将第二个列表框拖到我们的表单上，“ListBox2”，可以将其重命名为“lstProducts”。

再次点击“lstProducts”的箭头，然后在“选择数据源”中，输入“dtsProducts”。

然后您将无需包含连接字符串，因为它已被保存……

现在请注意：您需要键入一个带有来自类别列表框的参数的 SQL 查询，因此您需要遵循以下步骤：

选择此选项。

Visual Studio 足够智能，能够识别您输入的带有“@”的字段，它会在向导中询问此参数的来源，在本例中，它是来自列表框 lstCategories 的类别 ID。

选择“下一步”。

现在您的页面看起来如上图所示。

我们的页面要正常工作，只有一个细节：将类别控件的“autopostback”属性定义为 true。因为控件需要刷新到服务器以刷新产品。现在是测试我们的页面的时候了。您会注意到，当您点击一个类别时，页面需要一些时间才能刷新。有了 Ajax，这种情况将改变。现在的问题是：我们如何在页面上实现 Ajax？答案是：放置一个 UpdatePanel。UpdatePanel 是一个组件，当您安装 Microsoft Ajax 时，它会出现在工具箱中。所以您只需要将其拖到页面上，然后将我们的控件放入其中。提示：为了以最少的努力做到这一点，请用鼠标选择两个列表框（按住 Shift 键并单击），然后按 Ctrl+X，然后将光标移到 UpdatePanel 内部，然后按 Ctrl+V。

按 F5 执行我们的项目，我们会注意到，在点击类别列表框时，我们的产品组合框将 **不刷新** 而被填充。

我们从上面的图片中注意到，我们无需编写任何一行代码来完成我们的示例，因为我们所做的一切都在 HTML 页面的代码中。如果您好奇，可以仔细看看。例如，代码由服务器执行，当服务器执行时，这些标签将消失。

Visual Studio 的可视化工具为开发者节省了很多时间，这才是关键！

结论

我已经手动在一些网站上实现了 Ajax，但要做到这一点，您需要进行大量的 JavaScript 编码，在脚本中发出 XMLHTTP 请求，这并非易事，您还需要编写处理程序文件（.ashx）。