系统地学习ASP.NET AJAX(1) - 简单地过一下每个控件（ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer）

介绍
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 >
         &nbsp; </ 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 >
         &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 >
                    内部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
[源码下载]