<a href="http://webabcd.blog.51cto.com/1787395/344663" target="_blank">[索引頁]</a>
<a href="http://down.51cto.com/data/100916" target="_blank">[源碼下載下傳]</a>
新瓶舊酒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"。
·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、其它
·内容頁擷取母版頁的ScriptManager:ScriptManager.GetCurrent(Page)
·後置代碼處對UpdatePanel程式設計,例: ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.Button1); ScriptManager.GetCurrent (this).RegisterPostBackControl(this.Button2); this.UpdatePanel1.Update();
示例
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" />
</UpdateParameters>
<InsertParameters>
</InsertParameters>
</asp:SqlDataSource>
</asp:Content>
2、UpdatePanel
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="UpdatePanel.aspx.cs"
Inherits="Overview_UpdatePanel" Title="UpdatePanel" %>
<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>
<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>
<p>
</p>
<fieldset>
<legend>我在UpdatePanel外</legend>
<asp:Button ID="Button1" runat="server" Text="按鈕" OnClick="Button1_Click" />
</fieldset>
<%--嵌套UpdatePanel-- %>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<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>
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="UpdateProgress.aspx.cs"
Inherits="Overview_UpdateProgress" Title="UpdateProgress" %>
<li>預設,任何回發,當有延遲的時候則顯示 UpdateProgress裡的ProgressTemplate。</li>
<li>要與某UpdatePanel關聯則設定 AssociatedUpdatePanelID屬性。</li>
<li>DynamicLayout為true則用“display:none; ”隐藏;DynamicLayout為false則用“visibility:hidden;”隐藏。</li>
<li>預設情況下,例如有2個異步回發,如果第1 個還沒有執行完畢就執行第2個的話,則會先取消第1個異步回發。</li>
<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" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
DynamicLayout="false">
<ProgressTemplate>
<p>
UpdatePanel1更新中
</p>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<legend>UpdatePanel2</legend>
<asp:Label ID="Label2" runat="server" Text="Label2"></asp:Label>
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"
DynamicLayout="true">
UpdatePanel2更新中
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<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" />
<asp:UpdateProgress ID="UpdateProgress3" runat="server">
有延遲我就更新
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Timer.aspx.cs"
Inherits="Overview_Timer" Title="Timer" %>
<li>Interval:間隔時間,機關(毫秒);每一個間隔時間後将觸發Tick事件 </li>
<li>Timer要放在其所重新整理的UpdatePanel内部;放外面的話要設定UpdatePanel的Triggers。</li>
<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>
注:以上示例涉及到後置代碼的,其作用都是用來重新整理相關的Label的,是以略掉了。
OK
本文轉自webabcd 51CTO部落格,原文連結:http://blog.51cto.com/webabcd/344667,如需轉載請自行聯系原作者