·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> ASP.NETAJAX应用

ASP.NETAJAX应用

作者:佚名      ASP.NET网站开发编辑:admin      更新时间:2022-07-23

  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