ASP.NET AJAX能够快速地创建具有丰富的用户体验的页面,而且这些页面由可靠和熟悉的用户接口元素组成,包括一个能快速响应的用户体验和熟悉的用户元素。

使用ASP.NET  AJAX,可以改善Web程序的用户体验和提高应用程序执行效率。

使用ASP.NET  AJAX的优势:

    1.提高浏览器中Web页面的执行效率。

    2.通过调用Web服务整和不同的数据源数据。

    3.部分页面刷新,只刷新已被更新的页面。

    4.简化了服务器控件的定制以包括客户端功能。

    5.熟悉的UI元素。

    6.实现客户端与ASP.NET应用服务的集成以进行表单认证和用户配置。

    7.支持最流行的和通用的浏览器,包括微软IE、Firefox和Safari。

    8.具有可视化的开发界面。

ASP.NET AJAX服务器框架

  ASP.NET AJAX服务器框架包括ASP.NET控件和组件,ASP.NET Web服务。

  ASP.NET AJAX服务器控件包括服务器和客户编码。常用的ASP.NET AJAX服务器控件如下:

    1.ScriptManager:管理客户端组件的脚本资源、局部页面的绘制、本地化和全局文件,并且可以定制用户脚本。ScriptManager控件是实现ASP.NET AJAX程序的基础,要实现ASP.NET AJAX程序必须在页面中包含此控件。

    2.UpdatePanel:通过异步调用来刷新部分页面而不是刷新整个页面。

    3.Updateprogress:提供UpdatePanel控件中部分页面更新的状态信息。

    4.Timer:定义执行回调的时间区间。可以使用Timer控件来发送整个页面,也可以在一个时间区间内把它和UpdatePanel控件一起使用,以执行局部页面刷新。

ASP.NET AJAX客户端框架

  ASP.NET AJAX客户端脚本库包括以下各层内容:

    1.一个浏览器兼容层。这个层为ASP.NET AJAX脚本提供了跨常用浏览器的兼容性,这些浏览器包括微软的IE、Mozilla的Firefox和苹果的Safari等。

    2.ASP.NET AJAX核心服务,这个核心服务扩展了JavaScript,例如把类、命名空间、事件句柄、继承、数据类型、对象序列化扩展到JavaScript中。

    3.一个ASP.NET AJAX的基础类库,这个类库包括组件,例如字符串创建器和扩展错误处理。

    4.一个网络层,该层用来处理基于Web的服务和应用程序的通信,以及管理异步远程方法调用。

  创建ASP.NET AJAX程序

    新建项目,添加页面WebForm1.aspx,向页面中添加ASP.NET AJAX服务器控件ScriptManager控件和UpdatePanel控件,修改后的代码如下:

 1     <div>
 2         <asp:ScriptManager ID="ScriptManager1" runat="server">
 3         </asp:ScriptManager>
 4         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 5             <ContentTemplate>
 6                 <fieldset>
 7                     <legend>当前时间:</legend>
 8                     <%=DateTime.Now.ToString () %>
 9                                     <br />
10                 <asp:Button ID="Button1" Text="刷新" runat="server" />
11                 </fieldset>
12             </ContentTemplate>
13         </asp:UpdatePanel>
14     </div>

View Code

ScriptManager控件

  脚本控制器(ScriptManager),用来处理页面上所有组件以及页面局部更新,生成相关客户端代理脚本以能够使用客户端脚本来调用Web服务。

在支持ASP.NET AJAX的ASP.NET页面中,有且只能有一个ScriptManager控件来管理ASP.NET AJAX相关的控件和脚本。可以在该控件中指定需要的脚本库,也可以通过注册JavaScript脚本来调用Web服务等。

  ScriptManager子标签的含义:

    1.AuthenticationService:用来表示提供验证服务的路径。

    2.ProfileService:表示提供个性化服务的路径,指定profile服务。

    3.Scripts:对脚本的调用,可以嵌套多个ScriptReference模版以实现对多个脚本文件的调用。

    4.Services:对Web服务的调用,可以嵌套多个ScriptReference模版以实现对多个脚本文件的调用。

  当页面中包含一个或多个UpdatePanel控件时,ScriptManager控件管理浏览器中的部分页面刷新,在页面生命周期内,更新位于UpdatePanel控件里面的页面。

ScriptManager控件的属性EnablePartialRendering决定页面是否执行部分页面刷新,默认值为true。属性EnablePartialRendering的设置只能在页面初始化之前,否则会出错。

  在部分页面刷新过程中,可按照以下方法处理出现的错误:

    1.设置属性AllowCustomErrorsRedirect,该属性决定当部分页面刷新过程中出现异常时如何定制Web.config文件中的错误节。

    2.设置属性AsyncPostBackErrorMessage,该属性包含发送到浏览器的错误信息。

    3.处理ScriptManager控件的AsyncPostBackError事件,该事件在部分页面刷新过程中出现异常时被触发。

UpdatePanel控件

  UpdatePanel控件能够刷新指定的页面区域,而不是刷新整个页面。UpdatePanel可以用来创建丰富的局部更新Web应用程序,其强大之处在于不用编写任何客户端脚本就可以自动实现局部更新。

  当使用UpdatePanel控件时,页面上的行为具有浏览器独立性,并且能够潜在地减少客户端和服务器之间数据量的传输。

  使用UpdatePanel控件实现局部页面更新,需要在页面中添加一个ScriptManager控件。页面更新依赖于ScriptManager的EnablePartialRendering属性,如果把属性值设置为false,局部更新将失去作用。

  UpdatePanel的常用子标签

    1. ContentTemplate子标签:在UpdatePanel控件的ContentTemplate标签中,开发人员能够放置任何ASP.NET控件,这些控件在ContentTemplate标签中,就能够实现页面无刷新的更新操作。使用ContentTemplateContainer属性,可以以编程方式添加内容。

    2. Triggers子标签:局部更新的触发器,包括两种触发器:

      (1)AsyncPostBackTrigger异步回传触发器,可以实现异步更新。

      (2)PostBackTrigger不使用异步回传,仍然是传统的整页全部更新。

  UpdatePanel控件的主要属性:

    1.ChildrenAsTrigers:当属性UpdateMOde为Condition时,UpdatePanel中的子控件的异步传送是否引发UpdatePanel控件的更新。

    2.RenderMode:表示UpdatePanel控件最终呈现的HTML元素。其中,Block表示<div>,Inline表示<span.

    3.UpdateMode:表示UpdatePanel控件的更新模式。其中,Always表示无论有没有Trigger,其他控件都将更新该UpdatePanel控件;Conditional表示只有当前     UpdatePanel控件的Trigger或ChildrenTriggers属性为true时,才会引发异步回送或整页回送,或是服务器端调用Update()方法才引发更新该UpdatePanel控件。

  UpdatePanel控件的主要方法:

    1.Update():对UpdatePanel控件的内容进行更新。

    2.OpenFile(String):读取一个文件到文件流。

    3.DataBind():绑定一个数据源。

  UpdatePanel控件刷新的条件

    如果UpdateMode属性设置为Always,UpdatePanel控件的内容在页面上的每次回送发生时都被更新,包括在其他UpdatePanel控件里的控件和不在UpdatePanel控件里的的控件的异步回送。

    如果UpdateMode属性设置为Conditional,UpdatePanel控件的内容在下面任何一个为true时都会被更新:

      1.回送是由UpdatePanel控件的触发器引用的。

      2.明确的调用UpdatePanel控件的Update()方法。

      3.UpdatePanel控件被放在另一个UpdatePanel控件内且父控件进行更新时。

      4.ChildrenAsTriggers属性被设置为true,而且UpdatePanel控件的任何子控件引起一个回送。UpdatePanel控件的子控件不能引发外面的UpdatePanel控件的更新,除非它们被明确地定义为父面板的触发器。

    ChildrenAsTiggers属性只能在UpdateMode属性为Conditional时才可以使用。

  指定UpdatePanel触发器

    添加页面WebForm1.aspx,在页面中添加如下代码:

 1     <div>
 2         <asp:Button ID="Button1" runat="server" Text="刷新" />
 3         <asp:ScriptManager ID="ScriptManager1" runat="server" />
 4         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 5             <Triggers>
 6                 <asp:AsyncPostBackTrigger ControlID="Button1" />
 7             </Triggers>
 8             <ContentTemplate>
 9                 <fieldset>
10                     <legend>系统时间:</legend>
11                     <%=DateTime.Now.ToString () %>
12                 </fieldset>
13             </ContentTemplate>
14         </asp:UpdatePanel>
15     </div>

View Code

  嵌套使用UpdatePanel控件

    添加页面WebForm2.aspx,在页面中添加如下代码:

 1         <div>
 2             <asp:ScriptManager ID="ScriptManager1" runat="server" />
 3             <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 4                 <ContentTemplate>
 5                     <fieldset>
 6                         <legend>当前时间:</legend>
 7                         <%=DateTime.Now.ToString () %>
 8                         <asp:Button ID="Button1" runat="server" Text="刷新" />
 9                         <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
10                             <ContentTemplate>
11                                 <fieldset>
12                                     <legend>当前时间:</legend>
13                                     <%=DateTime.Now.ToString () %>
14                                     <asp:Button ID="Button2" runat="server" Text="刷新" />
15                                 </fieldset>
16                             </ContentTemplate>
17                         </asp:UpdatePanel>
18                     </fieldset>
19                 </ContentTemplate>
20             </asp:UpdatePanel>
21         </div>

View Code

  以编程方式刷新UpdatePanel控件

    添加页面WebForm3.aspx,在页面中添加如下代码:

1         <div>
2             <asp:ScriptManager ID="ScriptManager1" runat="server" />
3         </div>

View Code

    WebForm3.aspx.cs中的代码如下:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7
 8 namespace WebApplication2
 9 {
10     public partial class WebForm3 : System.Web.UI.Page
11     {
12         protected void Page_Load(object sender, EventArgs e)
13         {
14             UpdatePanel updatePanel = new UpdatePanel();
15             updatePanel.ID = "UpdatePanel1";
16             updatePanel.UpdateMode = UpdatePanelUpdateMode.Conditional;
17             Button button = new Button();
18             button.ID = "Button1";
19             button.Text = "刷新";
20             button.Click += button_Click;
21             Label label = new Label();
22             label.ID = "Label1";
23             label.Text = DateTime.Now.ToString();
24             updatePanel.ContentTemplateContainer.Controls.Add(label);
25             updatePanel.ContentTemplateContainer.Controls.Add(button);
26             Page.Form.Controls.Add(updatePanel);
27         }
28
29         void button_Click(object sender, EventArgs e)
30         {
31             ((Label)Page.FindControl("Label1")).Text = "当前系统时间:" + DateTime.Now.ToString();
32         }
33     }
34 }

View Code

UpdateProgress控件

  UpdateProgress控件能够设计一个更直观的用户界面,该界面用来显示一个页面中的一个或多个UpdatePanel控件实现部分页面刷新的过程信息,可以利用UpdateProgress控件提供更新过程的可视化的状态信息。

  UpdateProgress控件的常用属性如下:

    1.AssociatedUpdatePanelID:获取或设置UpdateProgress控件显示其状态的UpdatePanel控件的ID。

    2.DisplayAfter:获取或设置显示UpdateProgress控件之前所经过的时间值,以ms为单位。

    3.DynamicLayout:获取或设置一个值,该值可确定是否动态呈现进度模版。

    4.ProgressTemplate:获取或设置定义UpdateProgress控件内容的模版。

    5.Visible:获取或设置一个值,该值指示服务器控件是否作为UI呈现在页上。

    其中,属性AssociatedUpdatePanelID默认值为空字符串,即UpdateProgress控件不与特定的UpdatePanel控件关联,对于源于任何UpdatePanel控件的异步回送或来自充当面板触发器的控件的回送,都会导致UpdateProgress控件显示其ProgressTemplate内容。也可以将AssociatedUpdatePanelID属性设置为同一命名容器、父命名容器或页中的控件。

    属性DynamicLayout为布尔值,默认值为True。属性值为true时,在首次呈现页时不会为进度模版内容分配空间,在显示内容时,可进行更改,呈现标记中包含进度模版的div元素的style的属性值为none。如果属性值为false,在首次呈现页时为进度模版内容分配分配空间,UpdateProgress控件是页面布局的组成部分,包含进度模版的div元素的style的属性值为block,其可视性初始值为hidden。

  UpdateProgress控件的常用方法:

    1.GetScriptDescriptors:返回UpdateProgress控件的客户端功能所需要的组件、行为及客户端组件的列表。

    2.GetScriptReferences:返回UpdateProgress控件的客户端脚本库依赖项的列表。

    3.Render:通过使用提供的HtmlTextWriter对象,将UpdateProgress控件的呈现内容写入浏览器。

    4.OnPreRender:引发PreRender事件。

  UpdateProgress控件的显示规则:

    1.若不设置UpdateProgress控件的AssociatedUpdatePanelID属性,任何一个异步回送都会使UpdateProgress显示出来。

    2.若设置UpdateProgress控件的AssociatedUpdatePanelID属性值为某个UpdatePanel控件的ID,只有改空间内的控件引发的异步回送才会使相关联的UpdateProgress控件显示出来。

    3.全页面回送不会对UpdatePanel产生效果。

    4.如UpdatePanel控件以嵌套的方式存在,内部的UpdatePanel控件引发的回送会使外部的UpdatePanel控件相关联的UpdateProgress控件显示出来。

    5.若UpdatePanel控件的ChildrenAsTriggers属性值为false,该控件内的控件引发的异步回送会使相关联的UpdateProgress控件显示出来。

    6.位于UpdatePanel外的控件引发了异步回送,只能使用PageRequestManager对象的客户端代码让UpdateProgress控件与之相关联显示。

  使用UpdatePanel控件

    新建项目,添加页面Default.aspx,在页面中添加如下代码:

 1     <div>
 2         <asp:ScriptManager ID="ScriptManager1" runat="server" />
 3         <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 4             <ContentTemplate>
 5                 <%= DateTime.Now.ToString() %>
 6                 <asp:Button ID="Button1" runat="server" Text="刷新面板" OnClick="Button_Click" />
 7                 <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
 8                     <ProgressTemplate>
 9                         更新中。。。
10                     </ProgressTemplate>
11                 </asp:UpdateProgress>
12             </ContentTemplate>
13         </asp:UpdatePanel>
14         <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
15             <ContentTemplate>
16                 <%= DateTime.Now.ToString () %>
17                 <asp:Button ID="Button2" runat="server" Text="刷新面板" OnClick="Button_Click" />
18                 <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
19                     <ProgressTemplate>
20                         更新中。。。
21                     </ProgressTemplate>
22                 </asp:UpdateProgress>
23             </ContentTemplate>
24         </asp:UpdatePanel>
25     </div>

View Code

Timer控件

  定时器控件Timer属于无人管理自动完成任务的一种特殊控件。Timer控件能够定时引发整个页面回送,当它与UpdatePanel控件搭配使用时,就可以定时引发异步回送并局部刷新UpdatePanel控件的内容。

  Timer控件可以用在下列场合:

    1.定期更新一个或多个UpdatePanel控件的内容,而且不需要刷新整个页面。

    2.每当Timer控件引发回送时就运行服务器的代码。

    3.定时同步地把整个页面发送到服务器。

  Timer控件的常用属性:

    1.Enabled:获取或设置一个值来指明Timer控件是否定时引发一个会送到服务器上,true表示定时引发一个回送,false表示不引发回送。

    2.Interval:获取或设置定时引发一个回送的时间间隔,单位ms。

    3.Visible:获取或设置一个值,该值指示服务器控件是否作为UI呈现在页面上。

  Timer控件的常用方法:

    1.GetDesignModeState():获取传送给浏览器中计时器组件的Timer对象的属性。

    2.GetScriptReference():获取Timer控件的客户端脚本。

    3.OnTick(EventArges):触发Timer控件的Tick事件。

    4.RaisePostBackEvent(String):当一个页面被传送到服务器时使Timer控件触发Tick事件。

  Timer 控件是一个将JavaScript组件绑定在Web页面中的服务器控件。可以在服务器上运行的代码中设置Timer控件的属性,这些属性都会被传送给JavaScript组件。

  当Timer控件启动一个回送时,Timer控件在服务器端触发Tick事件,可以为Tick事件创建一个处理程序来执行页面发送回服务器的请求。

  如果不同的UpdatePanel必须以不同的时间间隔更新,那么就可以在同一页面中包含多个Timer控件。或者设置单个Timer控件实例为同一页面中多个UpdatePanel控件的触发器。

  Timer控件可以放在UpdatePanel控件内部,也可以放在UpdatePanel控件外部。

  当Timer控件位于UpdatePanel控件内部时,则JavaScript计时器组件只有在每一次回送完成时才会重新建立,也就是说,直到页面回送之前,定时器间隔时间不会从头计算。

  当Timer控件位于UpdatePanel控件之外时,当回送正在处理时,JavaScript计时器组件仍然会持续计时。

  在UpdatePanel控件内部使用Timer控件

    新建项目,添加页面WebForm1.aspx,在页面中添加如下代码:

1         <div>
2             <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
3             <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
4                 <ContentTemplate>
5                     <%=DateTime.Now.ToString() %>
6                     <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick" />
7                 </ContentTemplate>
8             </asp:UpdatePanel>
9         </div>

View Code

  在UpdatePanel控件外部使用Timer控件

    添加页面WebForm2.aspx,在页面中添加如下代码:

 1         <div>
 2             <asp:ScriptManager ID="ScriptManager1" runat="server" />
 3             <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick" />
 4             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 5                 <Triggers>
 6                     <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
 7                 </Triggers>
 8                 <ContentTemplate>
 9                     <asp:Label ID="Label1" runat="server" />
10                 </ContentTemplate>
11             </asp:UpdatePanel>
12         </div>

View Code

    WebForm2.aspx.cs中的代码如下:

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7
 8 namespace WebApplication4
 9 {
10     public partial class WebForm1 : System.Web.UI.Page
11     {
12         protected void Page_Load(object sender, EventArgs e)
13         {
14             if (!Page.IsPostBack)
15                 this.Label1.Text = DateTime.Now.ToString();
16         }
17
18         protected void Button_Click(object sender, EventArgs e)
19         {
20             System.Threading.Thread.Sleep(3000);
21         }
22
23         protected void Timer1_Tick(object sender, EventArgs e)
24         {
25             this.Label1.Text = System.DateTime.Now.ToString();
26         }
27
28     }
29 }

View Code

转载于:https://www.cnblogs.com/spilledlight/p/4913558.html

ASP.NET AJAX应用相关推荐

  1. MSDN Webcast“深入浅出ASP.NET AJAX系列”

    课程: ASP.NET AJAX深入浅出系列课程(1):ASP.NET AJAX 概述(3月13日):对于ASP.NET AJAX的大致功能进行概述和演示,通过简单的演示让听众了解到ASP.NET A ...

  2. SharePoint 2010中的客户端AJAX应用——ASP.NET AJAX模板

    WCF Data Services是SharePoint 2010中一个极具吸引力的新特性.然而,因为它的强大,直接对其进行编程仍然会有点痛苦.幸运的是,一个新的相关技术 -- ASP.Net AJA ...

  3. 探讨ASP.NET AJAX客户端开发技术

    一. 简介     在ASP.NET AJAX组件开发中,存在许多环节有待我们深入挖掘.如何让ASP.NET AJAX服务端控件更有效地利用客户端脚本来为控件添加强大的客户端功能?如何更为方便地访问控 ...

  4. Custom Client Side Drag and Drop Behavior in ASP.NET AJAX

    这是我的一篇在http://aspalliance.com/上的英文文章,限于版权协议中的排他性条款,这里只能给出一部分摘要引用.有兴趣的朋友可以到这里看到完整的全文:<Custom Clien ...

  5. ASP.NET AJAX环境的简单构建(ZT)

    1 概述 Microsoft ASP.NET AJAX 是 Microsoft 公司对 Ajax 技术的完美封装.它能使你已快速的创建包含丰富用户体验的用户界面的 Web 页面,提供加入了跨浏览器的 ...

  6. ASP.NET Ajax替代品AjaxWidgets

    Porting your ASP.NET 2.x Application to Linux 向社区推荐了100% 兼容Mono的ajax控件,Gaia Ajax Widget同样会作为一个GPL Aj ...

  7. ASP.NET之父谈ASP.NET AJAX

    ASP.NET之父SCOTT GUTHRIE强烈推荐的ASP.NET AJAX著作 世界各地数百万专业开发人员每天都在使用ASP.NET.全世界最成功的一些网站和应用都以它为后盾,每天还有成千上万的新 ...

  8. ASP.NET AJAX入门系列(1):概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

  9. ASP.NET AJAX 1.0 发布

    ASP.NET AJAX在今天正式发布了,同时发布的还包括它的源码以及ASP.NET AJAX控件工具包. 值得一提的是ASP.NET AJAX控件工具包中包含有30多个免费的ASP.NET AJAX ...

  10. ASP.NET AJAX Client Library: 更繁?更简?

    这两周周末终于决定忙里偷闲,利用业余时间好好学习ASP.NET AJAX,虽然服务器端控件比如UpdatePanel.Timer等很好用,不过总感觉雾里看花,没法看到ASP.NET AJAX的原貌,所 ...

最新文章

  1. springAop @AfterReturning注解 获取返回值
  2. 【必懂C++】C++可真是个“固执”的小可爱 02
  3. 源码安装mysql数据库_Linux下源码安装mysql数据库
  4. 中山大学提出新型行人重识别方法和史上最大评测基准
  5. Python爬虫项目--爱拍视频批量下载
  6. 深度学习TensorFlow生产环境部署(环境准备篇)
  7. Linux入门: grep与egrep 知识总结
  8. JavaStuNote 5
  9. bin文件如何编辑_如何将PS中图片模糊文字(位图)转换为AI的高清矢量图和CDR文件相关编辑?...
  10. 地图坐标拾取【获取指定地点经纬度】
  11. 决策树算法(ID3算法详解)
  12. OEM、ODM、OBM分别是什么?
  13. 卡内基梅隆大学计算机专业系,卡内基梅隆大学
  14. ICPCCamp 2016 Day 6 - Spb SU and Spb AU Contest(Colored path-dp)
  15. [luogu4315] 月下“毛景树”
  16. RSA加解密的OAEP MGF1 填充解析
  17. 学校计算机房的布线注意要点,学校机房布线要点探析
  18. E-puck2机器人系列教程-8.切换WIFI模式ESP32固件烧录
  19. DELL电脑开机自检提示please run setup program
  20. Python第七次作业

热门文章

  1. mysql数据库表格导出为excel表格
  2. mysql cluster 子查询速度很慢
  3. k8s Deployment
  4. Opengl es2.0 学习笔记(十)VBO、IBO和FBO
  5. bzoj 1861 treap
  6. Webpack笔记(三)——一款破产版脚手架的开发
  7. .net EventHandler 事件处理
  8. python-整理--连接MSSQL
  9. [记录] web icon 字体
  10. [leetcode] Nim Game