次の方法で共有

複数の UpdatePanel コントロールを使用した単純な ASP.NET ページの作成

  • [アーティクル]

更新 : 2007 年 11 月

このチュートリアルでは、ページで複数の UpdatePanel コントロールを操作します。ページで複数の UpdatePanel コントロールを使用することで、ページの領域を個別に、またはまとめてインクリメント方式で更新できます。部分ページ更新の詳細については、「部分ページ レンダリングの概要」および「UpdatePanel コントロールの概要」を参照してください。

前提条件

独自の開発環境でこの手順を実装するための要件は次のとおりです。

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

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

個別に更新する 2 つの領域を持つページを作成するには

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

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

    UpdatePanel のチュートリアル

  3. ツールボックスの UpdatePanel コントロールを 2 回ダブルクリックして、2 つの UpdatePanel コントロールをページに追加します。

  4. [プロパティ] ウィンドウで、両方の UpdatePanel() コントロールの UpdateMode プロパティを Conditional に設定します。

    UpdatePanel のチュートリアル

  5. 一方の UpdatePanel コントロールで、Label コントロールを追加し、その Text プロパティを "Panel Created" に設定します。

  6. 同じ UpdatePanel コントロールで、Button コントロールを追加し、その Text プロパティを "Refresh Panel" に設定します。

  7. もう一方の UpdatePanel コントロールで、Calendar コントロールを追加します。

    UpdatePanel のチュートリアル

  8. [Refresh Panel] ボタンをダブルクリックして、その Click イベントのイベント ハンドラを追加します。

  9. 次のコードをハンドラに追加します。これにより、Label コントロールが現在の時刻に設定されます。

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

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

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

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

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

  12. カレンダーの別の月に移動します。

    もう一方のパネルの時刻は変更されません。2 つのパネルの内容は個別に更新されます。

    例では、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 = "Panel 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, #UpdatePanel2 { 
      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>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </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 = "Panel 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, #UpdatePanel2 { 
      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>UpdatePanel1</legend>
                <asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

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

UpdatePanel コントロールの入れ子

場合によっては、UpdatePanel コントロールを入れ子にすることで、それ以外の方法では提供が難しい UI 機能を提供できます。入れ子になったパネルは、ページの特定の領域を個別に更新できるようにする場合や、複数の領域を同時に更新できるようにする場合に便利です。これを行うには、外側のコントロールと入れ子になったコントロール両方の UpdateMode プロパティを Conditional に設定します。これにより、内側のパネルだけが更新される場合、外側のパネルのページ領域は更新されません。ただし、外側のパネルが更新されると、入れ子になったパネルも更新されます。

この考えを簡略化して表した例を次に示します。

UpdatePanel コントロールを入れ子にするには

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

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

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

    UpdatePanel のチュートリアル

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

  5. ボタンの Text プロパティを "Refresh Outer Panel" に設定します。

    UpdatePanel のチュートリアル

  6. [プロパティ] ウィンドウで、UpdatePanel() コントロールの UpdateMode プロパティを Conditional に設定します。

    UpdatePanel のチュートリアル

  7. ソース ビューに切り替えて、<asp:UpdatePanel> 要素の <ContentTemplate> 要素内に次のコードを追加します。

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Last refresh <%=DateTime.Now.ToString() %> <br />

    このコードは、マークアップが最後にレンダリングされた時刻を示すために使用されます。

  8. デザイン ビューに切り替え、UpdatePanel コントロールの内部をクリックし、最初のコントロール内に 2 番目の UpdatePanel コントロールを追加します。

  9. [プロパティ] ウィンドウで、入れ子になった UpdatePanel() コントロールの UpdateMode プロパティを Conditional に設定します。

    UpdatePanel のチュートリアル

  10. 入れ子になった UpdatePanel コントロール内に Calendar コントロールを追加します。

    UpdatePanel のチュートリアル

  11. ソース ビューに切り替えて、入れ子になった <asp:UpdatePanel> 要素の <ContentTemplate> 要素内に次のコードを追加します。

    Last refresh <%=DateTime.Now.ToString() %> <br />

    Last refresh <%=DateTime.Now.ToString() %> <br />

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

    入れ子になった UpdatePanel コントロールのカレンダーで前または次の月に移動しても、内容が再描画されないため、外側のパネルの時刻は変更されません。一方、外側のパネルのボタンをクリックすると、内側のパネルの時刻が更新されます。既定では、Calendar コントロールの EnableViewState プロパティは true であるため、カレンダーは変更されません。

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

    <%@ Page Language="VB" %>

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


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </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">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
    Bb398867.alert_note(ja-jp,VS.90).gifメモ :

    Calendar コントロールは更新されていないように見えます。既定では、カレンダーを表示すると、現在の月と日付に設定されます。ただし、この手順では、ボタンをクリックすると、以前に選択した月と日付がカレンダーに表示されます。ページは認識されない形で、Calendar コントロールのビュー ステートを使用して、選択した月と日付でカレンダーを表示します。これは、非同期ポストバックの後、ページが予測された状態を維持するために、UpdatePanel コントロールが適切なロジックを実行することを示します。これをテストするには、Calendar コントロールの EnableViewState プロパティを false に設定し、これらの手順を再度実行します。その場合、移動する月に関係なく、ボタンをクリックすると、カレンダーは現在の月の表示に戻ります。

レビュー

このチュートリアルでは、ページで複数の UpdatePanel コントロールを使用する場合の概念について説明しました。UpdatePanel コントロールが入れ子になっていない場合は、UpdateMode プロパティを Conditional に設定することで、各パネルを個別に更新できます (UpdateMode プロパティの既定値は Always です。これにより、非同期ポストバックに応答してパネルが更新されます)。

パネルが入れ子になっている場合、動作は若干異なります。外側のコントロールと入れ子のコントロール両方の UpdateMode プロパティを Conditional に設定すると、内側のパネルが更新され、外側のパネルは更新されません。ただし、外側の更新パネルが更新されると、内側の更新パネルも更新されます。

参照

処理手順

UpdatePanel コントロールの概要

概念

ASP.NET UpdatePanel コントロールとデータ バインド コントロールの使用