ASP.NET - 演練:對多個 UpdatePanel 控件使用 ASP.NET Timer 控件

      在本演練中,將使用一個 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 控件。兩個面板都會顯示更新的時間。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章