1 / 22

第 12 章 使用 ASP.NET AJAX

第 12 章 使用 ASP.NET AJAX. 本章内容： Ajax 和 ASP.NET AJAX ，使用 ASP.NET AJAX 基本控件（包括 ScriptManager 、 UpdatePanel 、 UpdateProgress 和 Timer 控件）， ASP.NET AJAX 控件工具包（ ASP.NET AJAX Control Toolkit ）。 本章重点： Ajax 和 ASP.NET AJAX ， ASP.NET AJAX 基本控件的常用属性和方法， ASP.NET AJAX 控件工具包中常用的扩展控件及使用方法。.

lev-stuart
Download Presentation

第 12 章 使用 ASP.NET AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第12章 使用ASP.NET AJAX 本章内容：Ajax和ASP.NET AJAX，使用ASP.NET AJAX基本控件（包括ScriptManager、UpdatePanel、UpdateProgress和Timer控件），ASP.NET AJAX控件工具包（ASP.NET AJAX Control Toolkit）。 本章重点：Ajax和ASP.NET AJAX，ASP.NET AJAX基本控件的常用属性和方法，ASP.NET AJAX控件工具包中常用的扩展控件及使用方法。

  2. 12.1 Ajax和ASP.NET AJAX • 12.1.1 Ajax概述 • 1．Ajax的主要内容 • Ajax主要包括以下内容。 • ① 使用XHTML + CSS来表示信息。 • ② 使用JavaScript操作DOM（Document Object Model，文档对象模型）。 • ③ 使用XML和XSLT（EXtensible Stylesheet Language Transformations，扩展样式表转换）进行数据交换及相关操作。 • ④ 使用XmlHttpRequest对象与Web服务器进行异步数据交换。 • ⑤ 使用JavaScript将各部分内容绑定在一起。 • 2．Ajax的实现原理 • 3．Ajax的主要优点

  3. 12.2 ScriptManager控件 • 12.2.1 ScriptManager的主要属性和方法

  4. 12.2.2 注册客户端脚本 • 1．使用RegisterClientScriptBlock方法 • RegisterClientScriptBlock方法是一个静态方法，用于动态地向网页中添加客户端脚本块。该方法的重载形式有以下两种： • public static void ScriptManager. RegisterClientScriptBlock(Control control, Type type, • string key, string script, bool addScriptTags) • 或者 • public static void ScriptManager. RegisterClientScriptBlock(Page page, Type type, • string key, string script, bool addScriptTags)

  5. 2．使用RegisterStartupScript方法 • RegisterStartupScript方法用于在UpdatePanel控件中注册启动时立即执行的JavaScript脚本块，是一种AutoRun类型的自启动脚本，类似于常用的<body onload="f()">中的f()函数。该方法的重载方式有如下两种： • public static void ScriptManager. RegisterStartupScript(Control control, Type type, • string key, string script, bool addScriptTags) • 或者 • public static void ScriptManager. RegisterStartupScript(Page page, Type type, • string key, string script, bool addScriptTags)

  6. 12.3 UpdatePanel控件 • 12.3.1 UpdatePanel控件的常用属性 • UpdatePanel控件常用的属性主要有以下4个。 • 1．Triggers属性 • 2．ChildrenAsTrigger属性 • 3．UpdateMode属性 • 4．ContentTemplate属性

  7. 例如，下列在“源”视图中书写的代码，可将一个按钮控件Button1和一个标签控件Label1放置在UpdatePanel1控件中：例如，下列在“源”视图中书写的代码，可将一个按钮控件Button1和一个标签控件Label1放置在UpdatePanel1控件中： • … • <aps:UpdatePanel ID="UpdatePanel1" runat="server"> • <ContentTemplate> • <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="确 定" /> • <asp:Label ID="Label1" runat="server Text="Label" /> • </ContentTemplate> • …

  8. 12.3.2 实现页面局部更新 • 1．局部更新 • 【例12-1】设计一个实现页面局部更新的简单程序。要求使用两个标签控件表示网页中的不同区域，执行更新时，只有指定的标签内容发生变化，在更新区域外的标签内容不变（没有进行更新）。

  9. ① 设计Web页面 • 新建一个ASP.NET网站，向页面中添加一个ScriptManager控件ScriptManager1，一个UpdatePanel控件UpdatePanel1，向UpdatePanel1控件中添加一个按钮控件Button1和一个标签控件Label1。在UpdatePanel控件的外面再添加一个标签控件Label2。 • 注意，Label1控件一定要添加到UpdatePanel1中，Button1放在任何位置都可以。在页面的源视图中应当看到如下所示的代码结构，标签Label1的声明语句必须包含在UpdatePanel控件的<ContentTemplate>和</ContentTemplate>标记对中。 • <asp:UpdatePanel ID="UpdatePanel1" runat="server"> • <ContentTemplate> • <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> • <asp:Button ID="Button1" runat="server" Text="Button" /> • </ContentTemplate> • </asp:UpdatePanel> • <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

  10. ② 编写事件代码 • 页面装入时执行的事件代码如下： • protected void Page_Load(object sender, EventArgs e) • { • this.Title = "使用AJAX技术局部更新页面"; • Button1.Text = "开始更新"; • Label1.Text = "页面加载时间：" + DateTime.Now; • Label2.Text = "页面加载时间：" + DateTime.Now; • } • Button1被单击时执行的事件代码如下： • protected void Button1_Click(object sender, EventArgs e) • { • Label1.Text = "更新时间：" + DateTime.Now; • Label2.Text = "更新时间：" + DateTime.Now; • }

  11. 2．有条件更新 • 【例12-2】UpdatePanel控件的Trigger属性使用示例。 • 3．使用多个UpdatePanel控件 • 【例12-3】在多个UpdatePanel控件中实现局部更新。本例中将页面划分为两个不同的UpdatePanel更新区域，减少了每次需要更新的数据量。

  12. 12.4 UpdateProgress控件 • 12.4.1 UpdateProgress控件的常用属性 • 1．AssociatedUpdatePanel属性 • 2．DisplayAfter属性 • 3．DynamicLayout属性 • 4．ProgressTemplate属性

  13. 12.4.2 使用UpdateProgress控件 • 【例12-4】使用UpdateProgress控件在页面更新时显示提示信息。程序运行时，首先显示如图12-9所示的页面。当用户单击“更换图片”按钮时，屏幕上将显示如图12-10所示的提示信息。比较一下图片，可以看到，提示信息并没有固定的页面位置，而是采用了动态显示的方法。

  14. （3）编写事件代码 • 在所有事件过程之外声明静态整型变量： • static int i; • 页面装入时执行的事件代码如下： • protected void Page_Load(object sender, EventArgs e) • { • if (!IsPostBack) • { • Explain.Text = "UpdateProgress控件使用示例"; • Replace.Text = "更换图片"; • i = 1; • } • } • “更换图片”按钮被单击时执行的事件代码如下： • protected void Replace_Click(object sender, EventArgs e) • { • if (i == 1) • { • i = 2; • } • else • { • i = 1; • } • System.Threading.Thread.Sleep(2000); //为了清楚地看到提示信息，使运行暂停2秒 • ImageButton1.ImageUrl = "images/" + i.ToString() + ".jpg"; //轮换显示1.jpg和2.jpg • }

  15. 12.5 Timer控件 • 12.5.1 Timer控件的常用属性和事件 • 1．Interval属性 • 2．Enable属性 • 3．Tick事件

  16. 12.5.2 使用Timer控件 • 【例12-5】使用Timer控件实现图片自动播放。页面打开后，在图片框中每2秒自动切换显示的图片，程序运行效果如图12-11和图12-12所示。 • 程序设置步骤如下。

  17. 12.6 ASP.NET AJAX控件工具包 • 12.6.1 安装ASP.NET AJAX 控件工具包 • 12.6.2 使用ConfirmButtonExtender控件弹出确认对话框 • 1．ConfirmButtonExtender控件的常用属性 • 2．ConfirmButtonExtender控件使用示例

  18. 12.6.3 使用FilteredTextExtender实现输入字符过滤

  19. 12.6.4 使用SlideShowExtender制作图片播放器 • 1．SlideShowExtender控件的常用属性

  20. 2．使用SlideShowExtender控件 • 【例12-8】使用SlideShowExtender控件制作一个具有自动播放、手动播放功能的图片播放器。

  21. 12.7 实训 • 实训目的 • 1）掌握ASP.NET AJAX基本控件的属性设置及使用方法，进一步理解页面局部更新的重要性，了解ASP.NET AJAX扩展控件的使用方法。 • 2）掌握Timer控件的主要属性、方法和事件，能设计出具有定时功能的应用程序。 • 实训内容

More Related