ASP.NET - 示例 AJAX 应用程序
2009-12-22 21:55
253 查看
本教程创建使用 ASP.NET 的 AJAX 功能的基本示例应用程序。您可以了解到有关 ASP.NET 的 AJAX 功能的更多信息，将知道这些功能旨在解决哪些技术问题，以及以下介绍性文档将涉及哪些重要的 AJAX 组件：
·ASP.NET AJAX Overview
·添加 AJAX 和客户端功能
在本教程中，您将生成一个应用程序，该应用程序可显示 AdventureWorks 示例数据库中的员工数据页。该应用程序使用 UpdatePanel 控件仅刷新页面中发生更改的部分，而不会发生页面闪烁，页面闪烁是伴随回发发生的。这称为“部分页更新”。该示例应用程序还使用 UpdateProgress 控件，在进行部分页更新时显示状态消息。
一、创建 ASP.NET 网站
1、启动 Visual Studio。
2、在“文件”菜单中，单击“新建网站”。显示“新建网站”对话框。
3、在“Visual Studio 已安装的模板”之下选择“ASP.NET 网站”。
4、输入位置和语言，然后单击“确定”。
二、向 ASP.NET 网页添加 UpdatePanel 控件
创建一个 ASP.NET 网站之后，再创建一个包括 UpdatePanel 控件的 ASP.NET 网页。在将 UpdatePanel 控件添加到页面上之前，必须添加一个 ScriptManager 控件。UpdatePanel 控件依赖于 ScriptManager 控件来管理部分页更新。
1、在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。显示“添加新项”对话框。
2、在“Visual Studio 已安装的模板”下选择“Web 窗体”。
3、将新网页命名为“Employees.aspx”，然后清除“将代码放在单独的文件中”复选框。
4、选择要使用的语言。
5、单击“添加”。
6、切换到“设计”视图。
7、在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件以将其添加到页面中。
8、从工具箱拖动 UpdatePanel 控件，将其放置到 ScriptManager 控件下。
三、向 UpdatePanel 控件添加内容
UpdatePanel 控件执行部分页更新，并标识独立于页面其余部分进行更新的内容。在本部分教程中，您将要添加显示 AdventureWorks 数据库中的数据的数据绑定控件。
1、从工具箱的“数据”选项卡中，将一个 GridView 控件拖动到 UpdatePanel 控件的可编辑区域。
2、在“GridView 任务”菜单中单击“自动套用格式”。
3、在“自动套用格式”面板中的“选择方案”下，选择“Colorful”，然后单击“确定”。
4、在“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”。此时将显示“数据源配置”向导。
5、在“应用程序从哪里获取数据”下，选择“数据库”，然后单击“确定”。
6、在“配置数据源”向导中，对于“选择数据连接”步骤，配置到 AdventureWorks 数据库的连接，然后单击“下一步”。
7、对于“配置 Select 语句”步骤，选择“指定自定义 SQL 语句或存储过程”，然后单击“下一步”。
8、在“定义自定义语句或存储过程”步骤的“SELECT”选项卡中，输入下列 SQL 语句：
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
9、单击“下一步”。
10、单击“完成”。
11、在“GridView 任务”菜单中，选择“启用分页”复选框。
12、保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
注意，当选择不同的数据页时不会发生页面闪烁。原因是每次选择时，页都不执行回发和整页更新。
四、向页添加 UpdateProgress 控件
请求 UpdatePanel 控件的新内容时，UpdateProgress 控件会显示状态消息。
1、从工具箱的“AJAX Extensions”选项卡，将 UpdateProgress 控件拖到页面上，并将其放在 UpdatePanel 控件下。
2、选择 UpdateProgress 控件，并在“属性”窗口中将 AssociatedUpdatePanelID 属性设置为“UpdatePanel1”。这会将 UpdateProgress 控件和之前添加的 UpdatePanel 控件关联起来。
3、在 UpdateProgress 控件的可编辑区域中，键入“获取雇员...”.
4、保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
如果在该页运行 SQL 查询和返回数据时发生延迟，则 UpdateProgress 控件将显示您输入到 UpdateProgress 控件的消息。
五、向示例应用程序中添加延迟
如果应用程序快速更新每页数据，则您可能看不到页上的 UpdateProgress 控件的内容。UpdateProgress 控件支持 DisplayAfter 属性，您可利用该属性设置一个控件显示前延迟。这可阻止当更新过快时，浏览器中发生控件闪烁。默认情况下，延迟设置为 500 毫秒（0.5 秒），这意味着如果更新的时间少于半秒，则将不会显示 UpdateProgress 控件。
在开发环境中，可以向应用程序添加人为延迟，从而确保 UpdateProgress 控件按预期方式工作。这是一个可选步骤，且仅用于测试应用程序。
1、在 UpdatePanel 控件内部，选择 GridView 控件。
2、在“属性”窗口中，单击“事件”按钮。
3、双击 PageIndexChanged 事件以创建事件处理程序。
4、在 PageIndexChanged 事件处理程序中添加以下代码，人为地创建三秒钟的延迟：
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
5、保存更改，然后按 Ctrl+F5 在浏览器中查看页面。现在，由于您向新页数据中移入了一个三秒延迟，因此您将会看到 UpdateProgress 控件。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void GridView1_PageIndexChanged(object sender, EventArgs e)
{
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
}
</script>
<html >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Getting employees...
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
·ASP.NET AJAX Overview
·添加 AJAX 和客户端功能
在本教程中，您将生成一个应用程序，该应用程序可显示 AdventureWorks 示例数据库中的员工数据页。该应用程序使用 UpdatePanel 控件仅刷新页面中发生更改的部分，而不会发生页面闪烁，页面闪烁是伴随回发发生的。这称为“部分页更新”。该示例应用程序还使用 UpdateProgress 控件，在进行部分页更新时显示状态消息。
一、创建 ASP.NET 网站
1、启动 Visual Studio。
2、在“文件”菜单中，单击“新建网站”。显示“新建网站”对话框。
3、在“Visual Studio 已安装的模板”之下选择“ASP.NET 网站”。
4、输入位置和语言，然后单击“确定”。
二、向 ASP.NET 网页添加 UpdatePanel 控件
创建一个 ASP.NET 网站之后，再创建一个包括 UpdatePanel 控件的 ASP.NET 网页。在将 UpdatePanel 控件添加到页面上之前，必须添加一个 ScriptManager 控件。UpdatePanel 控件依赖于 ScriptManager 控件来管理部分页更新。
1、在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。显示“添加新项”对话框。
2、在“Visual Studio 已安装的模板”下选择“Web 窗体”。
3、将新网页命名为“Employees.aspx”，然后清除“将代码放在单独的文件中”复选框。
4、选择要使用的语言。
5、单击“添加”。
6、切换到“设计”视图。
7、在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件以将其添加到页面中。
8、从工具箱拖动 UpdatePanel 控件，将其放置到 ScriptManager 控件下。
三、向 UpdatePanel 控件添加内容
UpdatePanel 控件执行部分页更新，并标识独立于页面其余部分进行更新的内容。在本部分教程中，您将要添加显示 AdventureWorks 数据库中的数据的数据绑定控件。
1、从工具箱的“数据”选项卡中，将一个 GridView 控件拖动到 UpdatePanel 控件的可编辑区域。
2、在“GridView 任务”菜单中单击“自动套用格式”。
3、在“自动套用格式”面板中的“选择方案”下，选择“Colorful”，然后单击“确定”。
4、在“GridView 任务”菜单中，从“选择数据源”列表中选择“<新建数据源>”。此时将显示“数据源配置”向导。
5、在“应用程序从哪里获取数据”下，选择“数据库”，然后单击“确定”。
6、在“配置数据源”向导中，对于“选择数据连接”步骤，配置到 AdventureWorks 数据库的连接，然后单击“下一步”。
7、对于“配置 Select 语句”步骤，选择“指定自定义 SQL 语句或存储过程”，然后单击“下一步”。
8、在“定义自定义语句或存储过程”步骤的“SELECT”选项卡中，输入下列 SQL 语句：
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
9、单击“下一步”。
10、单击“完成”。
11、在“GridView 任务”菜单中，选择“启用分页”复选框。
12、保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
注意，当选择不同的数据页时不会发生页面闪烁。原因是每次选择时，页都不执行回发和整页更新。
四、向页添加 UpdateProgress 控件
请求 UpdatePanel 控件的新内容时，UpdateProgress 控件会显示状态消息。
1、从工具箱的“AJAX Extensions”选项卡，将 UpdateProgress 控件拖到页面上，并将其放在 UpdatePanel 控件下。
2、选择 UpdateProgress 控件，并在“属性”窗口中将 AssociatedUpdatePanelID 属性设置为“UpdatePanel1”。这会将 UpdateProgress 控件和之前添加的 UpdatePanel 控件关联起来。
3、在 UpdateProgress 控件的可编辑区域中，键入“获取雇员...”.
4、保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
如果在该页运行 SQL 查询和返回数据时发生延迟，则 UpdateProgress 控件将显示您输入到 UpdateProgress 控件的消息。
五、向示例应用程序中添加延迟
如果应用程序快速更新每页数据，则您可能看不到页上的 UpdateProgress 控件的内容。UpdateProgress 控件支持 DisplayAfter 属性，您可利用该属性设置一个控件显示前延迟。这可阻止当更新过快时，浏览器中发生控件闪烁。默认情况下，延迟设置为 500 毫秒（0.5 秒），这意味着如果更新的时间少于半秒，则将不会显示 UpdateProgress 控件。
在开发环境中，可以向应用程序添加人为延迟，从而确保 UpdateProgress 控件按预期方式工作。这是一个可选步骤，且仅用于测试应用程序。
1、在 UpdatePanel 控件内部，选择 GridView 控件。
2、在“属性”窗口中，单击“事件”按钮。
3、双击 PageIndexChanged 事件以创建事件处理程序。
4、在 PageIndexChanged 事件处理程序中添加以下代码，人为地创建三秒钟的延迟：
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
5、保存更改，然后按 Ctrl+F5 在浏览器中查看页面。现在，由于您向新页数据中移入了一个三秒延迟，因此您将会看到 UpdateProgress 控件。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void GridView1_PageIndexChanged(object sender, EventArgs e)
{
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
}
</script>
<html >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Getting employees...
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET AJAX文档－ASP.NET AJAX应用程序示例[翻译](3)
- 在ASP.NET AJAX中使用应用程序服务和本地化（2）：示例程序：实现用户登录和注销
- 在ASP.NET AJAX中使用应用程序服务和本地化（4）：示例程序：读取、修改并保存用户个性化信息
- AjaxPro.NET实现TextBox智能获取服务端数据功能(Asp.net 2.0)(示例代码下载)
- 了解 ASP.NET AJAX 验证和配置文件应用程序服务(三)
- 调试ASP.NET Ajax应用程序的方法
- ASP.NET 2.0 AJAX中Webservice调用方法示例
- LigerUi中，使用LG.ajax返回JSON提示信息的Asp.Net拼法（示例，应该能看明白吧）
- 在ASP.NET AJAX中使用应用程序服务和本地化（6）：创建支持多语言的ASP.NET AJAX站点、小结
- ASP.NET 2.0 AJAX中Webservice调用方法示例
- [导入]ASP.NET 2.0 AJAX中Webservice调用方法示例
- Ajax 实现在WebForm中拖动控件并即时在服务端保存状态数据 (Asp.net 2.0)(示例代码下载)
- MSDN杂志：ASP.NET AJAX 4.0数据驱动的 Web 应用程序的新 AJAX 支持
- ASP.NET Ajax调用WCF服务示例dudu
- Ajax 实现在WebForm中拖动控件并即时在服务端保存状态数据 (Asp.net 2.0)(示例代码下载)
- ASP.NET AJAX基础示例
- ASP.NET ScriptManager 帮助您实现 Web 应用程序的 AJAX 功能
- 《微软ASP.NET和AJAX：构建网络应用程序》
- Ajax 实现在WebForm中拖动控件并即时在服务端保存状态数据 (Asp.net 2.0)(示例代码下载)
- ASP.NET 添加 AJAX 和客户端功能_第一篇_将客户端脚本添加到 ASP.NET Web 应用程序中