新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件（ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer）

ASP.NET AJAX就5个控件，分别是ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer。先简单地过一下。

​​[索引页]​​

​​[源码下载]​​

新瓶旧酒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"。

    ·ScriptManager的 AllowCustomErrorsRedirect="true"的时候，出现异常就会转到web.config里customErrors中defaultRedirect所指的地址。

2、 UpdatePanel

    ·UpdatePanel内放置需要被刷新的控件，如果是其内部控件事件导致其刷新，则不用另外做什么设置，因为UpdatePanel默认ChildrenAsTriggers="true"。

    ·如果是UpdatePanel外部控件导致其刷新的话，则应设置 Triggers。

    ·在Triggers内，如果AsyncPostBackTrigger未设置EventName，则为其指定控件的默认事件。

    ·UpdatePanel默认UpdateMode="Always"，需要的话应设置UpdateMode="Conditional"。

    ·RenderMode="Block"对应div；RenderMode="Inline"对应span

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。

5、其它

    ·要在UpdatePanel中使用Validator的话，请参看​​http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx​​

    ·内容页获取母版页的ScriptManager：ScriptManager.GetCurrent(Page)

    ·后置代码处对UpdatePanel编程，例： ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.Button1); ScriptManager.GetCurrent (this).RegisterPostBackControl(this.Button2); this.UpdatePanel1.Update();

    ·​​Internet Explorer Developer Toolbar下载​​

    ·​​Fiddler下载​​

    ·​​Web Development Helper下载​​

示例

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>

                   & nbsp;<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>在Triggers内，如果AsyncPostBackTrigger 未设置EventName，则为其指定控件的默认事件。</li>

        <li>UpdatePanel默认UpdateMode="Always"，需要的话应设置UpdateMode="Conditional"。</li>

        <li>RenderMode="Block"对应div； RenderMode="Inline"对应span</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>

        &nbsp;</p>

    <fieldset>

        <legend>我在UpdatePanel外</legend>

        <asp:Button ID="Button1" runat="server" Text="按钮" OnClick="Button1_Click" />

    </fieldset>

    <p>

        &nbsp;</p>

    <%--嵌套UpdatePanel-- %>

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

        <contenttemplate>

            <fieldset>

                <legend>外围UpdatePanel</legend>

                <asp:Label ID="Label2" runat="server" Text="我是 Label"></asp:Label>

                <asp:Button ID="Button2" runat="server" Text="按钮" OnClick="Button2_Click" />

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

                   & nbsp;<ContentTemplate>

                   & nbsp;    <fieldset>

                   & nbsp;        <legend>嵌套UpdatePanel</legend>

                   & nbsp;        <asp:Label ID="Label3" runat="server" Text="我是Label"></asp:Label>

                   & nbsp;        <asp:Button ID="Button3" runat="server" Text="按钮" OnClick="Button3_Click" />

                   & nbsp;    </fieldset>

                   & nbsp;</ContentTemplate>

                </asp:UpdatePanel>

            </fieldset>

        </contenttemplate>

    </asp:UpdatePanel>

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

        <li>默认情况下，例如有2个异步回发，如果第1 个还没有执行完毕就执行第2个的话，则会先取消第1个异步回发。</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>

        &nbsp;</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>

        &nbsp;</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>

                   & nbsp;内部Timer

                   & nbsp;<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1000">

                   & nbsp;</asp:Timer>

                </p>

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

            </fieldset>

        </ContentTemplate>

    </asp:UpdatePanel>

</asp:Content>

注：以上示例涉及到后置代码的，其作用都是用来刷新相关的Label的，所以略掉了。

OK

​​[源码下载]​​