posts - 615, comments - 10492, trackbacks - 594, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

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

Posted on 2007-05-20 15:43 webabcd 阅读(...) 评论(...) 编辑 收藏
[索引页]
[源码下载]


新瓶旧酒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
[源码下载]