ASP.NET - Ajax 控件

AJAX 代表异步 JavaScript 和 XML。 这是一种跨平台技术，可以加快响应时间。 AJAX服务器控制向页面添加脚本，由浏览器执行和处理。

但是，与其他 ASP.NET 服务器控件一样，这些 AJAX 服务器控件也可以具有与其关联的方法和事件处理程序，这些方法和事件处理程序在服务器端进行处理。

Visual Studio IDE 中的控件工具箱包含一组称为"AJAX 扩展"的控件

ScriptManager 控件

ScriptManager 控件是最重要的控件，必须出现在页面上，其他控件才能工作。

它具有基本语法:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

如果您创建"支持 Ajax 的站点"或从"添加项目"对话框添加"AJAX Web 表单"，则 Web 表单会自动包含脚本管理器控件。 ScriptManager 控件负责处理所有服务器端控件的客户端脚本。

UpdatePanel 控件

UpdatePanel 控件是一个容器控件，派生自 Control 类。 它充当其中子控件的容器，并且没有自己的界面。 当其中的控件触发回发时，UpdatePanel 会进行干预以异步启动发布并仅更新页面的该部分。

例如，如果UpdatePanel内的按钮控件被单击，则只有UpdatePanel内的控件会受到影响，页面其他部分的控件不会受到影响。 这称为部分回发或异步回发。

示例

在您的应用程序中添加 AJAX Web 表单。 它默认包含脚本管理器控件。 插入UpdatePanel。 将按钮控件与标签控件一起放置在UpdatePanel控件中。 在面板外部放置另一组按钮和标签。

设计视图如下所示:

源文件如下:

<form id="form1" runat="server">
   <div>
      <asp:ScriptManager ID="ScriptManager1" runat="server" />
   </div>
   
   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
         <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/>
         <br />
         <br />
         <asp:Label ID="lblpartial" runat="server"></asp:Label>
      </ContentTemplate>
   </asp:UpdatePanel>
   
   <p> </p>
   <p>Outside the Update Panel</p>
   <p>
      <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" />
   </p>
   
   <asp:Label ID="lbltotal" runat="server"></asp:Label>
</form>

两个按钮控件具有相同的事件处理程序代码:

string time = DateTime.Now.ToLongTimeString();
lblpartial.Text = "Showing time from panel" + time;
lbltotal.Text = "Showing time from outside" + time;

请注意，当页面执行时，如果单击全部回发按钮，则会更新两个标签中的时间，但如果单击部分回发按钮，则只会更新UpdatePanel中的标签。

一个页面可以包含多个UpdatePanel，每个面板包含其他控件（例如网格）并显示数据的不同部分。

当发生总回发时，UpdatePanel内容默认更新。 可以通过更改控件的 UpdateMode 属性来更改此默认模式。 让我们看看UpdatePanel的其他属性。

UpdatePanel 控件的属性

下表显示了UpdatePanel控件的属性:

UpdatePanel控件的方法

下表显示了UpdatePanel控件的方法:

UpdatePanel的行为取决于 UpdateMode 属性和 ChildrenAsTriggers 属性的值。

UpdateProgress 控件

当更新一个或多个UpdatePanel控件时，UpdateProgress 控件会在浏览器上提供一种反馈。 例如，当用户在执行某些面向数据库的作业时登录或等待服务器响应时。

它提供了诸如"正在加载页面..."之类的视觉确认，表明工作正在进行中。

UpdateProgress 控件的语法是:

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" >

   <ProgressTemplate>
      Loading...
   </ProgressTemplate>
   
</asp:UpdateProgress>

上面的代码片段显示了 ProgressTemplate 标记内的一条简单消息。 但是，它可以是图像或其他相关控件。 每次异步回发都会显示 UpdateProgress 控件，除非使用 AssociatedUpdatePanelID 属性将其分配给单个UpdatePanel。

UpdateProgress 控件的属性

下表显示了更新进度控件的属性:

UpdateProgress 控件的方法

下表显示了UpdateProgress控件的方法:

Timer 定时器控件

Timer 定时器控件用于自动启动回发。 这可以通过两种方式完成:

(1)设置UpdatePanel控件的Triggers属性:

<Triggers> 
   <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" />
</Triggers>

(2) 将 Timer 计时器控件直接放置在 UpdatePanel 内以充当子控件触发器。 单个计时器可以触发多个 UpdatePanel。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

   <ContentTemplate>
      <asp:Timer ID="Timer1" runat="server" Interval="1000">
         </asp:Timer>
         
      <asp:Label ID="Label1" runat="server" Height="101px" style="width:304px" >
         </asp:Label>
   </ContentTemplate>
   
</asp:UpdatePanel>