Asp.net 简明教程

ASP.NET - Ajax Control

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

然而,与其他 ASP.NET 服务器控件一样,这些 AJAX 服务器控件也可能具有与之关联的方法和事件处理程序,它们在服务器端处理。

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

ajax extensions

The ScriptManager Control

ScriptManager 控件是最重要的控件,必须在页面上存在才能使其他控件工作。

它具有基本语法:

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

如果从“添加项”对话框创建“启用 Ajax 的站点”或添加“AJAX Web 窗体”,则 Web 窗体自动包含脚本管理器控件。 ScriptManager 控件处理所有服务器端控件的客户端脚本。

The UpdatePanel Control

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

例如,如果按钮控件在更新面板内并且被单击,则只会影响更新面板内的控件,页面其他部分的控件不会受到影响。这称为部分回发或异步回发。

Example

在应用程序中添加一个 AJAX Web 窗体。它默认包含脚本管理器控件。插入一个更新面板。在更新面板控件内放置一个按钮控件和一个标签控件。在面板外放置另一组按钮和标签。

设计视图如下所示:

scriptmanager

源文件如下:

<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;

注意,当执行页面时,如果单击总回发按钮,它将同时更新两个标签中的时间,但是如果单击部分回发按钮,它只会更新更新面板内的标签。

update panel

一个页面可以包含多个更新面板,每个面板都包含其他控件,如网格,并显示数据的不同部分。

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

Properties of the UpdatePanel Control

下表显示了更新面板控件的属性:

Properties

Description

ChildrenAsTriggers

此属性指示回发是否来自子控件,从而导致更新面板刷新。

ContentTemplate

它是内容模板,定义了呈现更新面板时在更新面板中显示的内容。

ContentTemplateContainer

检索动态创建的模板容器对象,并用于以编程方式添加子控件。

IsInPartialRendering

指示面板是否正在作为部分回发的一部分进行更新。

RenderMode

显示呈现模式。可用模式包括块和内联。

UpdateMode

通过确定某些条件来获取或设置呈现模式。

Triggers

定义集合触发对象,每个对象对应于一个事件,导致面板自动刷新。

Methods of the UpdatePanel Control

下表显示了更新面板控件的方法:

Methods

Description

CreateContentTemplateContainer

创建充当子控件容器的控件对象,这些控件定义了 UpdatePanel 控件的内容。

CreateControlCollection

返回 UpdatePanel 控件中包含的所有控件的集合。

Initialize

如果已启用局部页面呈现,则初始化 UpdatePanel 控件触发器集合。

Update

导致 UpdatePanel 控件的内容更新。

更新面板的行为取决于 UpdateMode 属性和 ChildrenAsTriggers 属性的值。

UpdateMode

ChildrenAsTriggers

Effect

Always

False

Illegal parameters.

Always

True

如果整个页面刷新或其子控件回发,则 UpdatePanel 将刷新。

Conditional

False

如果整个页面刷新或其外部的触发控件启动刷新,则 UpdatePanel 将刷新。

Conditional

True

如果整个页面刷新或其子控件回发,或其外部的触发控件启动刷新,则 UpdatePanel 将刷新。

The UpdateProgress Control

在更新一个或多个更新面板控件时,UpdateProgress 控件对浏览器提供了一种反馈。例如,当用户登录或在执行某些面向数据库的任务时等待服务器响应时。

它提供“正在加载页面…”之类的视觉确认,指示工作正在进行中。

UpdateProgress 控件的语法如下:

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

   <ProgressTemplate>
      Loading...
   </ProgressTemplate>

</asp:UpdateProgress>

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

Properties of the UpdateProgress Control

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

Properties

Description

AssociatedUpdatePanelID

获取并设置与此控件关联的更新面板的 ID。

Attributes

获取或设置 UpdateProgress 控件的层叠样式表 (CSS) 属性。

DisplayAfter

获取和设置在显示进度模板后以毫秒为单位的时间。默认值为 500。

DynamicLayout

指示是否动态呈现进度模板。

ProgressTemplate

指在异步回发中显示的模板,该回发的时间超过 DisplayAfter 时间。

Methods of the UpdateProgress Control

下表显示了更新进度控件的方法:

Methods

Description

GetScriptDescriptors

返回更新进度控件的客户端功能所需的组件、行为和客户端控件的列表。

GetScriptReferences

返回更新进度控件的客户端脚本库依赖项的列表。

The Timer Control

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

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

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

(2) 将计时器控件直接放在 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>