asp.net 自带 ajax,ASP.NET AJAX

ASP.NET AJAX

12/10/2009

本文内容

概述

ASP.NET AJAX 4.0 为 Web 应用程序引入了不同级别的功能，将进一步提高开发人员开发这些应用程序的效率。客户端模板提供了出众的应用程序灵活性和开发速度，可以轻松地将数据绑定到各种元素。全新的 DataView 控件允许您将模板扩展到整个数据列表。标记扩展允许您方便快捷地操作模板引擎的行为。自定义行为可用于处理复杂逻辑，而不用在过度复杂的条件属性中实现该逻辑。

目标

在本次动手实验中，您将学习如何：

•              利用全新的客户端模板将数据轻松绑定到您的用户界面。

•              使用 DataView 控件在客户端呈现数据。

•              通过创建自定义标记扩展，扩展模板引擎。

•              声明式地实例化行为和控件。

系统要求

您必须拥有以下工具才能完成本实验：

•              Microsoft Visual Studio 2008 或 2010。

•             ASP.NET  4.0 Preview 4AJAX

安装

您必须执行以下步骤来为本实验做好准备。主要包括下载和安装 ASP.NET AJAX 4.0 库。

2.            将下载的文件(Asp.Net_Ajax_Preview_4.zip)解压到机器上的已知位置。

练习

本动手实验室包括以下练习：

1.            使用客户端模板将数据绑定到用户界面 (UI)。

2.            使用 DataView 控件在客户端呈现数据。

3.            通过创建自定义标记扩展，扩展模板引擎。

4.            声明式地实例化行为。

注意：在本实验中，您将在已有代码的基础上进行更新或修改。本实验中的代码片段将会突出显示，帮助您准确理解需要修改的地方。

举例来说，以下代码片段将在已有 ASP 代码中添加一个 ScriptManager 元素。

完成本实验的估计时间：60 分钟。

初始材料

这次动手实验包括以下初始材料。

•              初始 AJAX 框架解决方案可以在第一个练习的 begin 文件夹中找到。

注意：本实验的示例文件包括一个 end 文件夹，其中包含完成练习后的最终解决方案。如果需要其他帮助来完成练习，您可以使用该解决方案作为指南。

下一步

练习 1：利用客户端模板

练习 1：利用客户端模板

在本练习中，您将使用全新的客户端模板引擎迅速将数据绑定到您的 UI 元素。

任务 1 - 向您的 ASP.NET 项目添加 ASP.NET AJAX 4.0

在本任务中，您将从框架 ASP.NET Web Application 入手，为它添加新的 ASP.NET AJAX 4.0 库。

1.            从 Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010 打开 Microsoft Visual Studio 2010。

2.            在 Visual Studio Start Page 中，单击 Open Project 按钮。

图 1

打开项目

3.       在  Open Project 对话框中，打开 WebApplication1.sln 解决方案文件。默认情况下，该文件位于以下文件夹：%TrainingKitInstallFolder%\Labs\AspNetAjax\Source\Ex01-ClientSideTemplates\begin\.

4.            此时，解决方案结构应如图 2 所示。

图 2

框架解决方案结构

5.            打开 Windows 资源管理器窗口并导航到存储 ASP.NET AJAX 4.0 文件的位置。

注意：ASP.NET AJAX 4.0 文件包含一系列 JavaScript 文件和一个 README 文件，您可以从在本实验的安装过程中下载和解压的 .zip 文件中找到它们。

6.            使用 Windows 资源管理器，将以下 ASP.NET AJAX 文件拖到 scripts 目录中。

◦              MicrosoftAjax.js

◦              MicrosoftAjax.debug.js

◦              MicrosoftAjaxTemplates.js

◦              MicrosoftAjaxTemplates.debug.js

添加了新文件之后，您的解决方案结构应如图 3 所示。

图 3

添加 ASP.NET AJAX 文件后的解决方案结构

注意：ASP.NET AJAX 4.0 版本包括一个发行版和一个调试版的 AJAX 4.0。调试版适合在开发时使用，因为它包括注释、格式等。发行版则删除了空格和注释以节省空间，因为更适合生产使用。

使用 ScriptManager 控件注册脚本之后，它会自动确定呈现调试版或发行版。有关其工作原理的详细信息，请阅读以下文章：http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.scriptmode.aspx

7.            在 Visual Studio 中，打开 Default.aspx 页面并在 form 标记内添加一个 ScriptManager 元素。

ASPX

…

注意： ScriptManager 类的 MicrosoftAjaxMode 属性指定如何将 Microsoft ASP.NET AJAX 客户端库的客户端脚本包括在客户端中。可能的值应包括：Enabled、 Disabled 和 Explicit.Explicit 选项指定您将包含对各个框架核心脚本文件的脚本引用，以及对每个脚本文件需要的依赖关系的引用。

8.            接下来，在 ScriptManager 元素中，为 SampleData.js、ASP.NET AJAX 脚本、jquery-1.2.3-min.js 和 CustomScripts.js 文件添加 ScriptReference 元素。注意，ScriptReference 元素包含在 Scripts 元素中。

ASPX

注意：只有 MicrosoftAjax.js 和 MicrosoftAjaxTemplates.js 文件是 ASP.NET AJAX 4.0 发行版的一部分。jQuery 文件将包含在 Visual Studio 2010 中，另外两个引用的文件用于保存静态示例数据，以及为本实验定义自定义 JavaScript 代码。

任务 2 –添加客户端模板

在此任务中，您将添加一个基本的客户端模板到页面中，并使用从模拟 AJAX 调用中检索的一些数据填充它。

我们首先将在页面底部添加一个新的客户端模板，然后使用 JavaScript 关联一些事件处理程序，以处理 UI 交互和填充模板。

1.            在 Default.asxp 文件中，添加一个客户端模板，用于显示关于 org-chart 中的特定员工的详细信息。在结束