zoukankan      html  css  js  c++  java
  • 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.支持最流行的和通用的浏览器,包括微软IEFirefoxSafari

        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脚本提供了跨常用浏览器的兼容性,这些浏览器包括微软的IEMozillaFirefox和苹果的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 AJAXASP.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控件。页面更新依赖于ScriptManagerEnablePartialRendering属性,如果把属性值设置为false,局部更新将失去作用。

      UpdatePanel的常用子标签

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

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

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

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

      UpdatePanel控件的主要属性:

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

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

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

      UpdatePanel控件的主要方法:

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

        2.OpenFileString):读取一个文件到文件流。

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

      UpdatePanel控件刷新的条件

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

        如果UpdateMode属性设置为ConditionalUpdatePanel控件的内容在下面任何一个为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.OnTickEventArges):触发Timer控件的Tick事件。

        4.RaisePostBackEventString):当一个页面被传送到服务器时使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
  • 相关阅读:
    SD卡测试
    测试人员可能会遇到的问题
    HDU 1024 Max Sum Plus Plus
    HDU 1176 免费馅饼
    HDU 1257 最少拦截系统
    HDU 1087 Super Jumping! Jumping! Jumping!
    poj 1328 Radar Installation
    poj 1753 Flip Game
    HDU 1003 Max Sum
    HDU 5592 ZYB's Premutation(BestCoder Round #65 C)
  • 原文地址:https://www.cnblogs.com/spilledlight/p/4913558.html
Copyright © 2011-2022 走看看