• 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
  • 相关阅读:
    解决做好一个机器学习项目的3个问题
    VMwareworkstations14 安装arch
    python3学习笔记——数字、字符串、列表、字典、元组
    python2和python3编码
    重定向和伪静态的原理、语法、实践
    HTTP中的重定向和请求转发的区别
    linux+Apache开启伪静态配置
    Centos7下Yum安装PHP5.5,5.6,7.0
    windows10图形化连接CentOS7
    python学习笔记--类(一)
  • 原文地址:https://www.cnblogs.com/spilledlight/p/4913558.html
Copyright © 2020-2023  润新知