Share via

UpdatePanel コントロールの概要

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、ScriptManager コントロールと UpdatePanel コントロールの 2 つの ASP.NET AJAX サーバー コントロールを使用して、部分ページ更新のサポートを Web ページに追加します。これらのコントロールを使用すると、ポストバックのたびにページ全体を更新する必要がなくなり、ユーザー エクスペリエンスが向上します。部分ページ更新の詳細については、「部分ページ レンダリングの概要」を参照してください。

前提条件

この手順を各自の開発環境で実行するには、以下が必要です。

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

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

UpdatePanel コントロールを使用するには

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

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

    UpdatePanel のチュートリアル

  3. UpdatePanel コントロールをダブルクリックしてページに追加します。

    UpdatePanel のチュートリアル

  4. UpdatePanel コントロールの内部をクリックし、ツールボックスの [標準] タブで、Label コントロールと Button コントロールをダブルクリックして UpdatePanel コントロールに追加します。

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

    Label コントロールおよび Button コントロールは、UpdatePanel コントロールの内部に追加する必要があります。

  5. Label の Text プロパティを "Panel created" に設定します。

    UpdatePanel のチュートリアル

  6. Button コントロールをダブルクリックしてボタンの Click イベントのハンドラを追加します。

  7. 次のコードを Click ハンドラに追加します。これにより、パネルのラベルの値が現在の時刻に設定されます。

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

  8. 変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

  9. ボタンをクリックします。

    パネル内のテキストが変更され、パネルのコンテンツが最後に更新されたときの時刻が表示されることを確認します。このテキストはボタンの Click イベント ハンドラに設定されます。

    例では、UpdatePanel が表すページの領域がよくわかるようになっています。

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

    </div>
    </form>
</body>
</html>

    ボタンをクリックするたびにパネルのコンテンツが変更されますが、ページ全体は更新されません。既定では、UpdatePanel コントロールの ChildrenAsTriggers プロパティは true です。このプロパティを true に設定すると、パネル内のコントロールによりポストバックが発生したときに、パネル内のコントロールが部分ページ更新に参加します。

UpdatePanel コントロールの利点の理解

更新パネルに含まれないページにいくつかのコントロールを追加すると、UpdatePanel コントロールの利点をよく理解できます。この操作によって、更新パネル内のコントロールとの動作の違いを確認できます。

UpdatePanel コントロール使用の利点を確認するには

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

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

  3. UpdatePanel コントロールをダブルクリックしてページに追加します。

    UpdatePanel のチュートリアル

  4. UpdatePanel コントロールの内部をクリックし、ツールボックスの [標準] タブで、Calendar コントロールをダブルクリックして UpdatePanel コントロールに追加します。

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

    この Calendar コントロールは、UpdatePanel コントロールの内側に追加する必要があります。

    UpdatePanel のチュートリアル

  5. UpdatePanel コントロールの外部をクリックして、ページに 2 番目の Calendar コントロールを追加します。

    このコントロールは UpdatePanel コントロールの一部にはなりません。

    UpdatePanel のチュートリアル

  6. 変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

  7. UpdatePanel コントロール内のカレンダーで翌月または前月に移動します。

    ページ全体を更新せずに、表示された月が変更されます。

  8. UpdatePanel コントロール外のカレンダーで翌月または前月に移動します。

    ページ全体が更新されます。

    例では、UpdatePanel が表すページの領域がよくわかるようになっています。

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>    
    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>    
    </div>
    </form>
</body>
</html>

外部ボタンによる UpdatePanel コントロールの更新

既定では、UpdatePanel コントロール内部のポストバック コントロール (ボタンなど) が部分ページ更新を発生させます。これまでの内容で説明したように、既定では、UpdatePanel コントロールの外部にあるボタンまたはその他のコントロールはページ全体の更新を発生させます。

更新パネルの外部のコントロールは、更新パネルのみを更新するトリガとして構成することもできます。

外部ボタンを使って UpdatePanel コントロールを更新するには

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

  2. ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールと UpdatePanel コントロールをダブルクリックして各コントロールをページに追加します。

    UpdatePanel のチュートリアル

  3. UpdatePanel コントロールの内部をクリックし、ツールボックスの [標準] タブで、Label コントロールをダブルクリックして UpdatePanel コントロールに追加します。

  4. ラベルの Text プロパティを "Panel created" に設定します。

    UpdatePanel のチュートリアル

  5. UpdatePanel コントロールの外部をクリックして、Button コントロールを追加します。

    UpdatePanel のチュートリアル

  6. Button コントロールをダブルクリックしてボタンの Click イベントのハンドラを追加します。

  7. 次のコードを Click ハンドラに追加します。これにより、パネルのラベルの値が現在の時刻に設定されます。

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

  8. デザイン ビューに切り替え、UpdatePanel を選択して [プロパティ] ウィンドウを表示します。

    UpdatePanel のチュートリアル

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

    [プロパティ] ウィンドウが表示されない場合は、F4 キーを押します。

  9. [トリガ] フィールドで、省略記号ボタン (…) をダブルクリックします。

    [UpdatePanelTrigger コレクション エディタ] ダイアログ ボックスが表示されます。

    UpdatePanel のチュートリアル

  10. [追加] をクリックし、新しいトリガを追加します。

  11. トリガのプロパティの [コントロール ID] フィールドで、ドロップダウン リストを使用して [Button1] を選択します。

    UpdatePanel のチュートリアル

    この例では、トリガの EventName プロパティが指定されていません。そのため、ボタンの既定のイベント (Click イベント) が UpdatePanel コントロールの更新をトリガします。

  12. コレクション エディタで [OK] をクリックします。

  13. 変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

  14. ボタンをクリックします。

    パネル内のテキストが変更され、パネルのコンテンツが最後に更新されたときの時刻が表示されます。

  15. ボタンをさらに数回クリックします。

    時刻が変更されますが、ページ全体は更新されません。

    UpdatePanel 外部のボタンをクリックすると、パネルのコンテンツが更新されます。これは、このボタンを UpdatePanel コントロールのトリガとして構成したためです。トリガであるボタンをクリックすると、非同期ポストバックが実行され、関連付けられた更新パネルの更新が行われます。この動作は、このチュートリアルの最初の例である、UpdatePanel 内部にボタンがある場合の動作と同様になります。

    例では、UpdatePanel が表すページの領域がよくわかるようになっています。

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

レビュー

このチュートリアルでは、UpdatePanel コントロールを使用して部分ページ更新を有効にすることに関する基本概念を説明しました。必ず ScriptManager コントロールを追加した後に、UpdatePanel コントロールを追加する必要があります。既定では、パネル内部のコントロールは、ポストバックの実行時にそのパネルの更新を発生させます。外部コントロールが UpdatePanel の更新を発生させることができるのは、そのパネルのトリガとして構成されている場合です。

次の手順では、ページに複数の UpdatePanel コントロールを追加する方法について説明します。詳細については、「複数の UpdatePanel コントロールを使用した単純な ASP.NET ページの作成」を参照してください。

参照

概念

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

参照

UpdatePanel

ScriptManager