チュートリアル : 複数の UpdatePanel コントロールとの ASP.NET Timer コントロールの使用

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、Timer コントロールを使用して、2 つの UpdatePanel コントロールの内容を更新します。Timer コントロールは 2 つの UpdatePanel コントロールの外側に配置され、両方のパネルのトリガとして構成されます。

前提条件

このチュートリアルの手順を実装するための要件は次のとおりです。

  • Microsoft Visual Studio 2005 または Microsoft Visual Web Developer Express Edition。

  • AJAX 対応の ASP.NET Web サイト。

指定された間隔で UpdatePanel コントロールを更新するには

  1. 新しいページを作成し、デザイン ビューに切り替えます。

  2. ページに ScriptManager コントロールが含まれていない場合は、ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールをダブルクリックしてページに追加します。

    タイマ コントロールのチュートリアル手順 1.

  3. ツールボックスで、Timer コントロールをダブルクリックして Web ページに追加します。

    タイマ コントロールのチュートリアル手順 2.

    Bb386404.alert_note(ja-jp,VS.90).gifメモ :

    Timer コントロールは、UpdatePanel コントロールの中または外のどちらでもトリガとして機能します。この例では、UpdatePanel コントロールの外側で Timer コントロールを使用する方法を示します。UpdatePanel コントロールの内側で Timer コントロールを使用する例については、「チュートリアル : Timer コントロールの概要」を参照してください。

  4. ツールボックスで、UpdatePanel コントロールをダブルクリックしてページにパネルを追加し、UpdateMode プロパティを Conditional に設定します。

    タイマ コントロールのチュートリアル手順 3.

  5. UpdatePanel コントロールをもう一度ダブルクリックしてページに 2 番目のパネルを追加し、UpdateMode プロパティを Conditional に設定します。

    タイマ コントロールのチュートリアル手順 4.

  6. UpdatePanel1 という名前の UpdatePanel コントロールの中をクリックし、ツールボックスの [標準] タブで、Label コントロールをダブルクリックして UpdatePanel1 に追加します。

  7. ラベルの Text プロパティを "UpdatePanel1 not refreshed yet" に設定します。

    タイマ コントロールのチュートリアル手順 5.

  8. Label コントロールを UpdatePanel2 に追加します。

  9. ラベルの Text プロパティを "UpdatePanel2 not refreshed yet" に設定します。

    タイマ コントロールのチュートリアル手順 6.

  10. Timer の Interval プロパティを 10000 に設定します。

    Interval プロパティはミリ秒単位で定義されるため、Interval プロパティを 10,000 ミリ秒に設定すると、UpdatePanel コントロールが 10 秒ごとに更新されます。

    Bb386404.alert_note(ja-jp,VS.90).gifメモ :

    この例では、タイマ間隔は 10 秒に設定されます。これにより、例を実行するときに、結果を確認するために長い時間待機する必要がありません。ただし、各タイマ間隔により、サーバーへのポストバックとネットワーク トラフィックが発生します。したがって、実際のアプリケーションでは、そのアプリケーションにおいて実用的な最長時間を設定する必要があります。

  11. Timer コントロールをダブルクリックして、Tick イベントのハンドラを作成します。

  12. Label1 コントロールと Label2 コントロールの Text プロパティを現在の時刻に設定するハンドラにコードを追加します。

    Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Label1.Text = "UpdatePanel1 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
        Label2.Text = "UpdatePanel2 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
    End Sub
End Class

    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. 両方の UpdatePanel コントロールに AsyncPostBackTrigger コントロールを追加することで、UpdatePanel1 と UpdatePanel2 のトリガとして Timer1 を指定します。次のコードに示すように、これは宣言によって実行できます。

    <Triggers>
  <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>

    完全なページのマークアップを次の例に示します。

    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>

    <%@ 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 xmlns="http://www.w3.org/1999/xhtml">
<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. UpdatePanel コントロールが更新されるまで、10 秒以上待機します。

    両方のパネルに更新された時刻が表示されます。

レビュー

このチュートリアルでは、Timer コントロールを複数の UpdatePanel コントロールと一緒に使用して、ページを部分的に更新する方法について説明しました。ScriptManager コントロールを追加した後、UpdatePanel コントロールを追加する必要があります。Timer コントロールは、ユーザーがパネルのトリガとして構成した場合、パネルの内容を更新します。

UpdatePanel コントロールの内側で Timer コントロールを使用する方法の詳細については、「チュートリアル : Timer コントロールの概要」を参照してください。

参照

概念

Timer コントロールの概要

部分ページ レンダリングの概要

参照

Timer

UpdatePanel

ScriptManager