系统地学习ASP.NET AJAX(1) - 简单地过一下每个控件（ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer）
Posted on 2007-06-01 09:55 yinix 阅读(377) 评论(0) 编辑 收藏 举报
转自：http://www.cnblogs.com/webabcd/archive/2007/05/20/753223.html
[源码下载]
作者：webabcd
介绍
ASP.NET AJAX就5个控件，分别是ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer。先简单地过一下。
关键
1、ScriptManager和ScriptManagerProxy
一个页只能有一个ScriptManager（包含了所有脚本资源），要放到任何用到AJAX的控件的前面。
如果把它放到母板页，而内容页需要与其不同的配置的话，则应在内容页使用ScriptManagerProxy。
ScriptManager默认EnablePartialRendering="true"。
2、UpdatePanel
UpdatePanel内放置需要被刷新的控件，如果是其内部控件事件导致其刷新，则不用另外做什么设置，因为UpdatePanel默认ChildrenAsTriggers="true"。
如果是UpdatePanel外部控件导致其刷新的话，则应设置Triggers。
在Triggers内，如果AsyncPostBackTrigger未设置EventName，则为其指定控件的默认事件。
注意：UpdatePanel默认UpdateMode="Always"，需要的话则设置UpdateMode="Conditional"。
3、UpdateProgress
默认，任何回发，当有延迟的时候则显示UpdateProgress里的ProgressTemplate。
要与某UpdatePanel关联则设置AssociatedUpdatePanelID属性。
DynamicLayout为true则用“display:none;”隐藏；DynamicLayout为false则用“visibility:hidden;”隐藏。
默认情况下，例如有2个异步回发，如果第1个还没有执行完毕就执行第2个的话，则会先取消第1个异步回发。
4、Timer
Interval：间隔时间，单位（毫秒）；每一个间隔时间后将触发Tick事件。
Timer要放在其所刷新的UpdatePanel内部；放外面的话要设置UpdatePanel的Triggers。
示例
1、最简单的示例
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Sample.aspx.cs"
Inherits="Overview_Sample" Title="最简单的示例" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<ul>
<li>之前要有ScriptManager（包含了所有脚本资源），我把它放到母板页了。内容页如需不同配置则应使用ScriptManagerProxy。</li>
<li>最简单的示例，拖个UpdatePanel进来。在UpdatePanel内拖个GridView，并设置其数据源即可。 </li>
</ul>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
DataSourceID="SqlDataSource1">
<Columns>
<asp:CommandField ShowEditButton="True" ShowSelectButton="True" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:connstr %>"
DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID" InsertCommand="INSERT INTO [Products] ([ProductName], [QuantityPerUnit], [UnitPrice], [Discontinued]) VALUES (@ProductName, @QuantityPerUnit, @UnitPrice, @Discontinued)"
SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [Discontinued] FROM [Products]"
UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID">
<DeleteParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="QuantityPerUnit" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Decimal" />
<asp:Parameter Name="Discontinued" Type="Boolean" />
<asp:Parameter Name="ProductID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="QuantityPerUnit" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Decimal" />
<asp:Parameter Name="Discontinued" Type="Boolean" />
</InsertParameters>
</asp:SqlDataSource>
</asp:Content>
2、UpdatePanel
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="UpdatePanel.aspx.cs"
Inherits="Overview_UpdatePanel" Title="UpdatePanel" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<ul>
<li>UpdatePanel内放置需要被刷新的控件，如果是其内部控件事件导致其刷新，则不用另外做什么设置，因为UpdatePanel默认ChildrenAsTriggers="true"。
</li>
<li>如果是UpdatePanel外部控件导致其刷新的话，则应设置Triggers。 </li>
<li>注：UpdatePanel默认UpdateMode="Always"，需要的话则设置UpdateMode="Conditional"。</li>
</ul>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<legend>我在UpdatePanel里</legend>
<asp:Label ID="Label1" runat="server" Text="我是Label"></asp:Label>
</fieldset>
</ContentTemplate>
<Triggers>
<%--如果没设置EventName，则取默认事件，Button的默认事件为Click--%>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<p>
</p>
<fieldset>
<legend>我在UpdatePanel外</legend>
<asp:Button ID="Button1" runat="server" Text="按钮" OnClick="Button1_Click" />
</fieldset>
</asp:Content>
3、UpdateProgress
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="UpdateProgress.aspx.cs"
Inherits="Overview_UpdateProgress" Title="UpdateProgress" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<ul>
<li>默认，任何回发，当有延迟的时候则显示UpdateProgress里的ProgressTemplate。</li>
<li>要与某UpdatePanel关联则设置AssociatedUpdatePanelID属性。</li>
<li>DynamicLayout为true则用“display:none;”隐藏；DynamicLayout为false则用“visibility:hidden;”隐藏</li>
</ul>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel1</legend>
<asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
DynamicLayout="false">
<ProgressTemplate>
<p>
UpdatePanel1更新中
</p>
</ProgressTemplate>
</asp:UpdateProgress>
<p>
</p>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel2</legend>
<asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
<br />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"
DynamicLayout="true">
<ProgressTemplate>
<p>
UpdatePanel2更新中
</p>
</ProgressTemplate>
</asp:UpdateProgress>
<p>
</p>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel3</legend>
<asp:Label ID="Label3" runat="server" Text="Label3"></asp:Label><br />
<asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress3" runat="server">
<ProgressTemplate>
有延迟我就更新
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
4、Timer
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Timer.aspx.cs"
Inherits="Overview_Timer" Title="Timer" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<ul>
<li>Interval：间隔时间，单位（毫秒）；每一个间隔时间后将触发Tick事件 </li>
<li>Timer要放在其所刷新的UpdatePanel内部；放外面的话要设置UpdatePanel的Triggers。</li>
</ul>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel1</legend>
<p>
内部Timer
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1000">
</asp:Timer>
</p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
注：以上示例涉及到后置代码的，其作用都是用来刷新相关的Label的，所以略掉了。
OK
[源码下载]
系统地学习ASP.NET AJAX(1) - 简单地过一下每个控件（ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer）
作者：webabcd
介绍
ASP.NET AJAX就5个控件，分别是ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer。先简单地过一下。
关键
1、ScriptManager和ScriptManagerProxy
一个页只能有一个ScriptManager（包含了所有脚本资源），要放到任何用到AJAX的控件的前面。
如果把它放到母板页，而内容页需要与其不同的配置的话，则应在内容页使用ScriptManagerProxy。
ScriptManager默认EnablePartialRendering="true"。
2、UpdatePanel
UpdatePanel内放置需要被刷新的控件，如果是其内部控件事件导致其刷新，则不用另外做什么设置，因为UpdatePanel默认ChildrenAsTriggers="true"。
如果是UpdatePanel外部控件导致其刷新的话，则应设置Triggers。
在Triggers内，如果AsyncPostBackTrigger未设置EventName，则为其指定控件的默认事件。
注意：UpdatePanel默认UpdateMode="Always"，需要的话则设置UpdateMode="Conditional"。
3、UpdateProgress
默认，任何回发，当有延迟的时候则显示UpdateProgress里的ProgressTemplate。
要与某UpdatePanel关联则设置AssociatedUpdatePanelID属性。
DynamicLayout为true则用“display:none;”隐藏；DynamicLayout为false则用“visibility:hidden;”隐藏。
默认情况下，例如有2个异步回发，如果第1个还没有执行完毕就执行第2个的话，则会先取消第1个异步回发。
4、Timer
Interval：间隔时间，单位（毫秒）；每一个间隔时间后将触发Tick事件。
Timer要放在其所刷新的UpdatePanel内部；放外面的话要设置UpdatePanel的Triggers。
示例
1、最简单的示例
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Sample.aspx.cs"
Inherits="Overview_Sample" Title="最简单的示例" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <ul> <li>之前要有ScriptManager（包含了所有脚本资源），我把它放到母板页了。内容页如需不同配置则应使用ScriptManagerProxy。</li> <li>最简单的示例，拖个UpdatePanel进来。在UpdatePanel内拖个GridView，并设置其数据源即可。 </li> </ul> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" DataSourceID="SqlDataSource1"> <Columns> <asp:CommandField ShowEditButton="True" ShowSelectButton="True" /> </Columns> </asp:GridView> </ContentTemplate> </asp:UpdatePanel> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:connstr %>" DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID" InsertCommand="INSERT INTO [Products] ([ProductName], [QuantityPerUnit], [UnitPrice], [Discontinued]) VALUES (@ProductName, @QuantityPerUnit, @UnitPrice, @Discontinued)" SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [Discontinued] FROM [Products]" UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID"> <DeleteParameters> <asp:Parameter Name="ProductID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="QuantityPerUnit" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> <asp:Parameter Name="ProductID" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="ProductName" Type="String" /> <asp:Parameter Name="QuantityPerUnit" Type="String" /> <asp:Parameter Name="UnitPrice" Type="Decimal" /> <asp:Parameter Name="Discontinued" Type="Boolean" /> </InsertParameters> </asp:SqlDataSource></asp:Content>2、UpdatePanel
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="UpdatePanel.aspx.cs" Inherits="Overview_UpdatePanel" Title="UpdatePanel" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <ul> <li>UpdatePanel内放置需要被刷新的控件，如果是其内部控件事件导致其刷新，则不用另外做什么设置，因为UpdatePanel默认ChildrenAsTriggers="true"。 </li> <li>如果是UpdatePanel外部控件导致其刷新的话，则应设置Triggers。 </li> <li>注：UpdatePanel默认UpdateMode="Always"，需要的话则设置UpdateMode="Conditional"。</li> </ul> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <fieldset> <legend>我在UpdatePanel里</legend> <asp:Label ID="Label1" runat="server" Text="我是Label"></asp:Label> </fieldset> </ContentTemplate> <Triggers> <%--如果没设置EventName，则取默认事件，Button的默认事件为Click--%> <asp:AsyncPostBackTrigger ControlID="Button1" /> </Triggers> </asp:UpdatePanel> <p> </p> <fieldset> <legend>我在UpdatePanel外</legend> <asp:Button ID="Button1" runat="server" Text="按钮" OnClick="Button1_Click" /> </fieldset></asp:Content>3、UpdateProgress
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="UpdateProgress.aspx.cs" Inherits="Overview_UpdateProgress" Title="UpdateProgress" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <ul> <li>默认，任何回发，当有延迟的时候则显示UpdateProgress里的ProgressTemplate。</li> <li>要与某UpdatePanel关联则设置AssociatedUpdatePanelID属性。</li> <li>DynamicLayout为true则用“display:none;”隐藏；DynamicLayout为false则用“visibility:hidden;”隐藏</li> </ul> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <fieldset> <legend>UpdatePanel1</legend> <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label> <br /> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </fieldset> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false"> <ProgressTemplate> <p> UpdatePanel1更新中 </p> </ProgressTemplate> </asp:UpdateProgress> <p> </p> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <fieldset> <legend>UpdatePanel2</legend> <asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label> <br /> <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" /> </fieldset> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2" DynamicLayout="true"> <ProgressTemplate> <p> UpdatePanel2更新中 </p> </ProgressTemplate> </asp:UpdateProgress> <p> </p> <asp:UpdatePanel ID="UpdatePanel3" runat="server"> <ContentTemplate> <fieldset> <legend>UpdatePanel3</legend> <asp:Label ID="Label3" runat="server" Text="Label3"></asp:Label><br /> <asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" /> </fieldset> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress3" runat="server"> <ProgressTemplate> 有延迟我就更新 </ProgressTemplate> </asp:UpdateProgress></asp:Content>4、Timer
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Timer.aspx.cs" Inherits="Overview_Timer" Title="Timer" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <ul> <li>Interval：间隔时间，单位（毫秒）；每一个间隔时间后将触发Tick事件 </li> <li>Timer要放在其所刷新的UpdatePanel内部；放外面的话要设置UpdatePanel的Triggers。</li> </ul> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <fieldset> <legend>UpdatePanel1</legend> <p> 内部Timer <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1000"> </asp:Timer> </p> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </fieldset> </ContentTemplate> </asp:UpdatePanel></asp:Content>注：以上示例涉及到后置代码的，其作用都是用来刷新相关的Label的，所以略掉了。
OK
[源码下载]
