首页 > > 网页制作 > Javascript >

ASP.NET AJAX应用

2018-06-23 22:53:38来源：未知阅读 ()

　　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 }