你的位置:首页 > ASP.net教程

[ASP.net教程]ASP.NET AJAX应用


  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.Page11   {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.Page11   {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