在本演練中,將使用一個 Timer 控件來更新兩個 UpdatePanel 控件的內容。將 Timer 控件放置在兩個 UpdatePanel 控件之外,並將其配置爲這兩個面板的觸發器。
1、創建新頁並切換到“設計”視圖。
2、如果頁面尚未包含 ScriptManager 控件,請在工具箱的“AJAX Extensions”選項卡中雙擊 ScriptManager 控件以將其添加到頁面中。
3、在工具箱中雙擊 Timer 控件以將其添加到網頁上。
說明:
Timer 控件可在 UpdatePanel 控件的內部或外部用作一個觸發器。本示例演示如何在 UpdatePanel 控件外部使用 Timer 控件。
4、在工具箱中雙擊 UpdatePanel 控件以添加一個面板到頁面上,然後將該面板的 UpdateMode 屬性設置爲 Conditional。
5、再次雙擊 UpdatePanel 控件以添加另一個面板到頁面上,然後將該面板的 UpdateMode 屬性設置爲 Conditional。
6、單擊名爲 UpdatePanel1 的 UpdatePanel 控件內部,然後在工具箱的“標準”選項卡中雙擊 Label 控件,將其添加到 UpdatePanel1。
7、將該標籤的 Text 屬性設置爲“UpdatePanel1 尚未刷新”。
8、將 Label 控件添加到 UpdatePanel2。
9、將第二個標籤的 Text 屬性設置爲“UpdatePanel2 尚未刷新”。
10、將 Timer 的 Interval 屬性設置爲 10000。
Interval 屬性是以毫秒爲單位定義的,因此,若將 Interval 屬性設置爲 10,000 毫秒,則會每 10 秒刷新一次 UpdatePanel 控件。
說明: 在此示例中,計時器時間間隔設置爲 10 秒。這樣,在運行示例時,您無需等待很長時間就可以看到結果了。但是,每個計時器時間間隔都會導致向服務器回發,從而引起網絡通信。因此在成品應用程序中,應將此時間間隔設置爲在應用中可行的最長時間。
11、雙擊 Timer 控件以便爲 Tick 事件創建處理程序。
12、向創建的處理程序中添加代碼,以便將 Label1 和 Label2 控件的 Text 屬性設置爲當前時間。
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "UpdatePanel1 refreshed at: " +
DateTime.Now.ToLongTimeString();
Label2.Text = "UpdatePanel2 refreshed at: " +
DateTime.Now.ToLongTimeString();
}
}
13、通過將 AsyncPostBackTrigger 控件添加到兩個 UpdatePanel 控件中,將 Timer1 指定爲 UpdatePanel1 和 UpdatePanel2 的觸發器。這可以通過聲明的方式來實現,如以下代碼所示:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
下面的示例演示完整頁的標記。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">
</asp:Timer>
</div>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
14、保存更改,然後按 Ctrl+F5 在瀏覽器中查看頁面。
15、請等待至少 10 秒鐘,直到刷新 UpdatePanel 控件。兩個面板都會顯示更新的時間。