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控件,修改后的代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
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,在页面中添加如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
嵌套使用UpdatePanel控件
添加页面WebForm2.aspx,在页面中添加如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
以编程方式刷新UpdatePanel控件
添加页面WebForm3.aspx,在页面中添加如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <div> 2 <asp:ScriptManager ID="ScriptManager1" runat="server" /> 3 </div>
WebForm3.aspx.cs中的代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }
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,在页面中添加如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
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,在页面中添加如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
在UpdatePanel控件外部使用Timer控件
添加页面WebForm2.aspx,在页面中添加如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
WebForm2.aspx.cs中的代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }