チュートリアル : UpdatePanel コントロールを間隔として指定された時間が経過するごとに更新する方法

  • [アーティクル]

このチュートリアルでは、3 つの ASP.NET AJAX サーバー コントロール (ScriptManager、UpdatePanel、および Timer) を使用して、Web ページの一部を、指定した一定の間隔で更新する方法を説明します。これらのコントロールをページに追加すると、ポストバックごとにページ全体を更新する必要がなくなります。UpdatePanel コントロールの内容だけが更新されます。

すべての ASP.NET AJAX コントロールが正常に機能するためには、web.config ファイル内に特定の設定が必要です。これらのコントロールのいずれかを使用しようとしたときに、サイトに必要な web.config ファイルが存在しない場合、コントロールが表示されるはずのページの [デザイン] ビューにエラーが表示されます。[デザイン] ビューでその状態のコントロールをクリックすると、Microsoft Expression Web のオプションが表示されて、新しい web.config ファイルを作成するか、既存の web.config ファイルを更新するかの選択を求められます。

UpdatePanel コントロールを一定の間隔で更新するには

  1. [ファイル] メニューの [新規作成] をポイントし、[ASPX] をクリックします。

  2. ASPX ページの [デザイン] ビューにカーソルを置きます。

  3. [ツールボックス] パネルの [ASP.NET コントロール] の [AJAX] で ScriptManager コントロールをダブルクリックしてページに追加します。web.config ファイルを追加または更新して .NET Framework Version 3.5 をサポートするかどうかを確認するダイアログ ボックスが表示されたら、[はい] をクリックします。非ビジュアル コントロールの視覚補助をオンにするかどうかを確認するダイアログ ボックスが表示されたら、[はい] をクリックします。

  4. [ツールボックス] パネルの [ASP.NET コントロール] の [AJAX] で UpdatePanel コントロールをダブルクリックしてページに追加します。

  5. [デザイン ] ビューの UpdatePanel コントロール内にカーソルを置きます。

  6. [ツールボックス] パネルの [ASP.NET コントロール] の [AJAX] カテゴリで Timer コントロールをダブルクリックして、ページ内の UpdatePanel コントロールに挿入します。

    Cc295400.6d8eaf6e-b015-4738-b33f-31bac4a9b0ef(ja-jp,Expression.40).png

    Noteメモ :

    Timer コントロールは UpdatePanel コントロールの内部または外部のトリガーとして使用できます。次に、UpdatePanel コントロールの内部で Timer コントロールを使用する例を示します。Timer コントロールを UpdatePanel コントロールの外部のトリガーとして使用する例については、MSDN ライブラリの「チュートリアル : 複数の UpdatePanel コントロールとの ASP.NET Timer コントロールの使用 Cc295400.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。このトピックは Microsoft Visual Web Developer を対象としていますが、いくつかの例外を除いて Microsoft Expression Web でも同様の方法を使用できます。

  7. ページ内で Timer コントロールを選択し、[タグのプロパティ] パネルで Interval プロパティを 10000 に設定します。Interval プロパティはミリ秒単位で定義するので、UpdatePanel コントロールが 10 秒間隔で更新されることになります。

    Noteメモ :

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

  8. [デザイン] ビューの UpdatePanel コントロール内にカーソルを置きます。

  9. [ツールボックス] パネルの [ASP.NET コントロール] の [標準] カテゴリで Label コントロールをダブルクリックして UpdatePanel コントロールに挿入します。

  10. ページ内で Label コントロールを選択し、[タグのプロパティ] パネルの Text ボックスに「未更新のパネル」と入力します。

  11. UpdatePanel コントロールの外部にカーソルを置きます。

  12. [ツールボックス] パネルの [ASP.NET コントロール] の [標準] カテゴリで Label コントロールをダブルクリックして、ページに 2 つ目のラベルを追加します。

    Noteメモ :

    2 つ目の Label コントロールは UpdatePanel コントロールの外部に追加します。

    Cc295400.e14384c1-a32c-4924-b012-dbbb44643f09(ja-jp,Expression.40).png

  13. ページの [コード] ビューで、そのページのページ言語に応じて </head> タグの前に次のいずれかのコード サンプルを追加します。

    <script runat="server" type="text/c#">
  protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
    }
</script>

    <script runat="server" type="text/vb">
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub 
</script>

  14. [コード] ビューで <asp:Timer runat="server" id="Timer1" Interval="10000"> タグを見つけて、OnTick="Timer1_Tick" を追加します。

  15. [ファイル] メニューの [上書き保存] をクリックします。

  16. F12 キーを押して、Web ブラウザーでページをプレビューします。UpdatePanel パネルが更新されるまで、10 秒ほど待ちます。パネル内部のテキストにはパネルのコンテンツが最後に更新された時刻が表示されますが、パネル外部のテキストは更新されません。

次の表に、最後のページ コードを示します。

Visual Basic 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/vb">
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub 
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>
C# 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/c#">
  protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>

このチュートリアルでは、Timer コントロールと UpdatePanel コントロールを使用してページを部分的に更新する方法についての基本概念を説明しました。ScriptManager コントロールは、UpdatePanel コントロールまたは Timer コントロールが含まれている任意のページに追加する必要があります。既定では、パネル内部の Timer コントロールは、非同期ポストバック時にパネルのみを更新します。Timer コントロールの外部のパネルは、パネルのトリガーとして構成されている場合に UpdatePanel を更新します。

関連項目

概念

Timer コントロール
UpdatePanel コントロール
ScriptManager コントロール
部分ページ レンダリングの概要