Ajax Extensions核心控件介绍-CSDN博客

今天把Ajax的核心组件的相关用法写一下,并做了一个简单的无刷新示例!
Ajax的核心组件包括ScriptManager、ScriptManagerProxy、UpdatePanel、Timer、UpdateProgress，其相关属性如下：
updatePanel控件

UpdatePanel主要属性
UpdateMode	内容模板的更新模式，有Always和Conditional两种模式，默认情况下为Always 区别：Always即一旦有任何事件可触发updatePanel更新即开始更新内容模板，而Conditional则是有条件的更新，一般为设置了Trigger属性后由Trigger引发的更新
ChildrenAsTriggers	内容模板内的子控件的回发是否更新本模板,值为True或False
RenderMode	局部更新控件的呈现形式，当模式为Block时局部更新控件在客户端以div的形式展现，当模式为Inline时以span形式展现
UpdatePanel主要子元素
ContentTemplate	局部更新控件的内容模权，可以其内添加任何控件
Triggers	局部内容更新触发器，内似于数据库中的Trigger 触发器分为异步回发（AsyncPostBackTrigger）和类似于普通页面的回发机制（PostBackTrigger），前者实现局部更新，后者会引起整个页面的全部更新

Timers控件

属性Interval：控制需要等待的时间，默认单位为毫秒，即1000即为1秒

事件Tick：Timer唯一的独立事件，该事件用于设计要完成的任务

UpdateProgress控件

updateProgress实际上是一个div，通过代码控制div的显示或隐藏来实现更新提示，使用UpdateProgress可以设计良好的等待界面，达到与用户友好交互的目的。

主要属性和模板：

1、AssociateUpdatePanelID：关联的UpdatePanel，此时UpdateProgress需放置于UpdatePanel外；

2、DisplayAfter：表示多长时间后显示进度提示，默认值为500毫秒

3、ProgressTemplate：用于设计等待时的界面，可在其内加入图形、文字等

脚本控制器ScriptManager

5个主要属性及其4个子元素：

EnablePartialRendering	用于标识此页内是否允许局部刷新，默认值为True
AllowCustomErrorsRedirect	表示当Ajax调用发生错误后，是否导航到Web.Config中定义的错误配置，如果值为false，则使用AsyncPostBackErrorMessage和OnAsyncPostBackError两个属性实现错误提示
AsyncPostBackErrorMessage	异步调用发生错误时的提示信息
OnAsyncPostBackError	异步调用发生错误时的事件
AsyncPostBackTimeOut	表示异步调用的有效时间，默认值为90秒
AuthenticationService	用来表示提供验证服务的路径
ProfileService	表示提供个性化服务的路径
Scripts	对脚本的调用，其中可以嵌套多个ScriptReference模板以实现对多个脚本文件的调用
Service	对服务的调用，通常指Web Service服务，可以嵌套多个ServiceReference模板以实现多个服务的引用

至于 ScriptManagerProxy ，用法和 ScriptManager 差不多，值得一提的是一个页面只能有一个 ScriptManager 。而 ScriptManagerProxy 则是当母版页和内容页需要引用不同的服务或者脚本时，在内容页中用 ScriptManagerProxy 代理 ScriptManager 的职能。

实例：
下面给出一个无刷新实例，此例中加入了四个UpdatePanel

页面部局如下：

UodatePanel1代码如下：

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

updatePanel1

Timer

<asp:Label ID="Label1" runat="server" Text="Label1" ForeColor="Blue"></asp:Label>

(拖放一个Timer到此，设其Interval为1000，即１秒刷新一次)

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="Timer1" />

</Triggers>

</asp:UpdatePanel>

<asp:Timer ID="Timer1" runat="server" Interval="1000">

</asp:Timer>

UodatePanel2代码如下：

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">

updatePanel2

updateProgress

<asp:Label ID="Label2" runat="server" Text="Label2" ForeColor="Blue"></asp:Label>

<asp:Button ID="btnProgress" runat="server" Text="刷新updatePanel2,出现updateProgress内容" OnClick="btnProgress_Click" />

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="btnProgress" />

</Triggers>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">

updatePanel2正在更新中......

</ProgressTemplate>

</asp:UpdateProgress>

UodatePanel3代码如下：

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">

updatePanel3

局部刷新(1)

<asp:Label ID="Label3" runat="server" Text="Label3" ForeColor="Blue"></asp:Label>

<asp:Button ID="Button1" runat="server" Text="刷新updatePanel3" />

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="Button2" />

</Triggers>

</asp:UpdatePanel>

UodatePanel4代码如下：

<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">

updatePanel4

局部刷新(2)

<asp:Label ID="Label4" runat="server" Text="Label4" ForeColor="Blue"></asp:Label>

<asp:Button ID="Button2" runat="server" Text="刷新updatePanel3和updatePanel4" />

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="Button2" />

</Triggers>

</asp:UpdatePanel>

Page_Load事件里面代码如下：

protected void Page_Load(object sender, EventArgs e)

{

this.Label1.Text = DateTime.Now.ToString();

this.Label2.Text = DateTime.Now.ToString();

this.Label3.Text = DateTime.Now.ToString();

this.Label4.Text = DateTime.Now.ToString();

}

UpdatePanel2中btnProgress的Click事件代码如下：

protected void btnProgress_Click(object sender, EventArgs e)

{

//如果刷新速度太快则不会看到updateProgress中的内容

//此时可以令程序延迟一段时间再执行

System.Threading.Thread.Sleep(5000);//5秒

Label2.Text = DateTime.Now.ToString();

}

页面最终效果图

示例程序下载

转载于:https://www.cnblogs.com/remember515/archive/2007/06/28/799030.html