AJAX-enabled ASP.NET 网站

bfinnerty

3.05/5 (14投票s)

2006年11月28日

CPOL

3分钟阅读

81333

1110

使用 ScriptManager 和 UpdatePanel 控件来启用 AJAX 式部分页面更新。

下载解决方案文件 - 6 KB

解决 InnerWorkings 的 ASP.NET AJAX 编码挑战

目标：使用 ScriptManager 和 UpdatePanel 控件来启用 AJAX 式部分页面更新。

场景描述：本任务使用 Microsoft ASP.NET AJAX 扩展，演示了如何将现有的 ASP.NET 网页转换为具有异步 JavaScript 和 XML (AJAX) 功能的网页。它利用 Microsoft ASP.NET AJAX 扩展的 ScriptManager 和 UpdatePanel 控件的功能，允许页面的某些部分执行部分页面呈现。

在此示例应用程序中，Default.aspx 为一个 bug 跟踪网站提供了一个 Web 表单，用户可以在其中查看在分页的 GridView 控件中显示的 bug 列表。用户还可以将测试人员的姓名输入“报告者”文本框中，然后单击“搜索”按钮，仅显示由该测试人员报告的 bug。

目前，每当用户单击“搜索”按钮或切换到 GridView 控件的另一页时，都会发生完整的页面回发，并在每次请求后呈现整个页面。但是，完成后，当用户单击“搜索”按钮或导航到 GridView 控件的另一页时，应用程序必须仅刷新 GridView 控件。

为此，您需要添加一个 ScriptManager 控件，该控件支持部分页面呈现。您必须将 GridView 控件和一个 Label 控件放在一个新的 UpdatePanel 控件中，并确保在单击“搜索”按钮的 Click 事件或用户导航到 GridView 控件的另一页时，应用程序仅刷新此 UpdatePanel 控件。

问题陈述：要完成此任务，您应该修改示例应用程序以满足以下要求。

修改网站项目以确保以下几点

网站项目引用了 Microsoft ASP.NET AJAX 扩展附带的 Microsoft.Web.Extensions.dll。

修改 Default.aspx 页面以确保以下几点

Default.aspx 页面包含一个允许部分页面呈现的 ScriptManager 控件。
Default.aspx 页面中的 BugView GridView 控件和 PanelUpdateTimeLabel Label 控件封装在一个名为 BugListUpdatePanel 的 UpdatePanel 控件中。
Default.aspx 页面中的 BugListUpdatePanel UpdatePanel 控件定义了一个触发器，当 SearchButton 按钮控件的 Click 事件触发时，该触发器会异步刷新此 UpdatePanel 控件的内容。

您应该构建并运行该应用程序。要测试您的应用程序，请在“报告者”文本框中输入用户名，然后单击“搜索”按钮。确保在应用程序更新 GridView 控件中的详细信息时，页面不会因完整的页面刷新而闪烁。另外，请确保浏览器进度条不会出现。确保通过 GridView 分页具有相同的效果，并监视显示 UpdatePanel 和页面最后刷新时间的标签。

提示：要将 ASP.NET AJAX 扩展控件添加到 Visual Studio 2005 工具箱，请右键单击现有的工具箱选项卡，从弹出菜单中选择“添加选项卡”，然后为该选项卡命名（例如，“AJAX 扩展”）。右键单击新选项卡，然后从弹出菜单中选择“选择项”。在打开的“选择工具箱项”对话框中，单击“浏览”按钮，然后导航到计算机上 Microsoft.Web.Extensions.dll 文件的位置（该文件通常位于 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025）。单击“确定”按钮关闭“选择工具箱项”对话框，并将控件添加到新选项卡。

当您尝试为 Microsoft.Web.Extensions.dll 添加引用时，“添加引用”对话框的“.NET”选项卡可能不会显示该程序集。如果发生这种情况，请单击“浏览”选项卡，导航到前面描述的正确位置，然后手动添加程序集。

其他阅读：以下链接包含与完成此任务相关的信息

注意：以上所有代码示例和学习材料均由 InnerWorkings 提供。