.NETプログラミング研究 RSSを登録する

Microsoft .NET Frameworkプログラミング(主にVisual Basic .NET、C#)で役に立つTipsやFAQなどをサンプル満載で紹介します。「DOBON.NET」(http://dobon.net)発行。

最新号をメルマガでお届けします    
登録 解除

規約に同意して

登録した方には、まぐまぐの公式メルマガ（無料）をお届けします。
このメルマガをまぐまぐ大賞2008に推薦する
2007/12/21

.NETプログラミング研究 第81号

この記事を取り寄せる

┏第81号━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃　　　　　　　　　.NETプログラミング研究　　　　　　　　　┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

──＜メニュー＞───────────────────────
■.NET Tips
・Microsoft ASP.NET AJAXを使う2
 -複数のUpdatePanelがある時に特定のUpdatePanelだけが更新される
  ようにする
 -プログラムでUpdatePanelを更新する
 -UpdatePanel内のコントローラによってそのUpdatePanelが更新される
  のを防ぐ
 -入れ子になったUpdatePanel
 -UpdatePanelに関連付けられていないコントロールで非同期ポストバック
  を行う
───────────────────────────────

[URL].NETプログラミング研究 第81号 Web版
http://wiki.dobon.net/index.php?.NET%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0%B8%A6%B5%E6%2F81

───────────────────────────────
■.NET Tips
───────────────────────────────
●Microsoft ASP.NET AJAXを使う2

前回はUpdatePanelコントロールの基本的な使い方について説明しまし
たが、今回は一つのページにUpdatePanelを複数配置するケースに絞っ
てより詳しく説明します。

★複数のUpdatePanelがある時に特定のUpdatePanelだけが更新されるよ
うにする

まずは、一つのページにUpdatePanelを複数配置した時にどのようにな
るか確認してみましょう。そのために、UpdatePanelを2つ配置し、それ
ぞれのUpdatePanelの中にButtonとLabelコントロールを配置したページ
を作成します。具体的なコードは、以下のようにします。

‥‥▽VB.NET　ここから▽‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
<%@ 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 EventArgs)
        Label1.Text = DateTime.Now.ToString()
        Label2.Text = DateTime.Now.ToString()
    End Sub


    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs)
        Label1.Text = DateTime.Now.ToString()
        Label2.Text = DateTime.Now.ToString()
    End Sub
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanelテスト</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="更新1"
                    OnClick="Button1_Click" />
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button2" runat="server" Text="更新2"
                    OnClick="Button2_Click" />
                <asp:Label ID="Label2" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
‥‥△VB.NET　ここまで△‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥

‥‥▽C#　ここから▽‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
<%@ 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 = DateTime.Now.ToString();
        Label2.Text = DateTime.Now.ToString();
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
        Label2.Text = DateTime.Now.ToString();
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdatePanelテスト</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="更新1"
                    OnClick="Button1_Click" />
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button2" runat="server" Text="更新2"
                    OnClick="Button2_Click" />
                <asp:Label ID="Label2" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
‥‥△C#　ここまで△‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥

このサンプルでは、Button1をクリックしても、Button2をクリックして
も、UpdatePanel1とUpdatePanel2の両方が更新されます。このように一
つのページに複数のUpdatePanelと複数のトリガーを配置した時、デフ
ォルトでは、どのトリガーを使っても全てのUpdatePanelが更新されま
す。これは、デフォルトではUpdatePanelのUpdateModeプロパティが
Alwaysだからです。

しかし、あるトリガーでは、あるUpdatePanelしか更新しない（例えば上
記の例では、Button1をクリックした時はUpdatePanel2は更新せずに、
UpdatePanel1しか更新しないなど）というのが決まっているのであれば、
上記の例のようにすべてのUpdatePanelが更新されてしまうというのは、
無駄が多すぎます。更新しないUpdatePanelの情報（HTML）もサーバー
が送信しているのです。

関連付けられたトリガーだけがそのUpdatePanelを更新できるようにす
るには、UpdateModeプロパティをConditionalにします。例えば、上記
のサンプルでButton1をクリックした時だけUpdatePanel1が更新される
ようにするには、UpdatePanel1のUpdateModeプロパティをConditional
に変更します。

実際に上記のサンプルのUpdatePanel1のUpdateModeプロパティを
Conditionalに変更してみてください。このようにすると、Button1をク
リックした時はUpdatePanel1とUpdatePanel2の両方が更新されますが、
Button2をクリックした時はUpdatePanel1だけが更新されます。つまり、
UpdatePanel1はUpdateModeプロパティをConditionalにしたため、
Button2ボタンでは更新されず、Button1ボタンでのみ更新できます。
UpdatePanel2はUpdateModeプロパティがAlwaysのため、Button1ボタン
とButton2ボタンのどちらでも更新されてしまいます。

複数のUpdatePanelをページに配置した時は、UpdatePanelのUpdateMode
プロパティをConditionalにするというのが基本となるでしょう。

★プログラムでUpdatePanelを更新する

プログラムでUpdatePanelを更新するには、UpdatePanelのUpdateメソッ
ドを呼び出します。例えば、先ほどの最後の例のようにUpdatePanel1の
UpdateModeプロパティをConditionalにしたときに、Button2をクリック
してUpdatePanel2も更新されるようにするには、Button2のClickイベン
トハンドラでUpdatePanel1のUpdateメソッドを呼び出します。

‥‥▽VB.NET　ここから▽‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs)
    Label1.Text = DateTime.Now.ToString()
    Label2.Text = DateTime.Now.ToString()
    
    'UpdatePanel1を更新する
    UpdatePanel1.Update()
End Sub
‥‥△VB.NET　ここまで△‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥

‥‥▽C#　ここから▽‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
protected void Button2_Click(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToString();
    Label2.Text = DateTime.Now.ToString();

    //UpdatePanel1を更新する
    UpdatePanel1.Update();
}
‥‥△C#　ここまで△‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥

★UpdatePanel内のコントローラによってそのUpdatePanelが更新される
のを防ぐ

今で紹介してきた例では、UpdatePanel内にあるコントロールによって、
自分自身のUpdatePanelは否応なしに更新されていました。しかし、
UpdatePanelのChildrenAsTriggersプロパティをFalseにすることにより、
そのUpdatePanelの中にあるコントロールによってそのUpdatePanelが更
新されなくなります。

ChildrenAsTriggersプロパティをFalseにするならば、UpdateModeプロ
パティは必ずConditionalにしなければなりません。UpdateModeプロパ
ティがAlwaysの時にChildrenAsTriggersプロパティをFalseにすると例
外がスローされます。

ChildrenAsTriggersプロパティの動作について、具体例を見てみましょ
う。前の前の例で、UpdatePanel1のUpdateModeプロパティを
Conditionalに、ChildrenAsTriggersプロパティをFalseにしてみてくだ
さい。すると、Button1をクリックしてもUpdatePanel1は更新されなく
なり、UpdatePanel2だけが更新されるようになります。

ドキュメントによるとChildrenAsTriggersプロパティを使用するのは、
2つ以上のUpdatePanelがあり、あるUpdatePanelから他のUpdatePanelを
更新させたいが、自分自身は更新させたくないようなケースであるとい
うことです。

[URL]ChildrenAsTriggersプロパティ
http://asp.net/ajax/documentation/live/mref/P_System_Web_UI_UpdatePanel_ChildrenAsTriggers.aspx

★入れ子になったUpdatePanel

ChildrenAsTriggersプロパティがTrueならば、そのUpdatePanelの中に
あるコントロールによってUpdatePanelが更新されると説明しましたが、
入れ子のUpdatePanelの場合はちょっと違います。入れ子の親の
UpdatePanelのUpdateModeプロパティがConditionalならば、子の
UpdatePanel内にあるコントロールによって親のUpdatePanelは更新され
ません。

例えば以下のような例では、子のUpdatePanel2内にあるButton2をクリ
ックしても、親のUpdatePanel1は更新されません。

‥‥▽VB.NET　ここから▽‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
<%@ 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 EventArgs)
        Label1.Text = DateTime.Now.ToString()
        Label2.Text = DateTime.Now.ToString()
    End Sub


    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs)
        Label1.Text = DateTime.Now.ToString()
        Label2.Text = DateTime.Now.ToString()
    End Sub
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <!-- 親UpdatePanel -->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server"
            UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server"
                    OnClick="Button1_Click" Text="親更新" />
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <br />
                <!-- 子UpdatePanel -->
                <asp:UpdatePanel ID="UpdatePanel2" runat="server"
                    UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Button ID="Button2" runat="server"
                            Text="子更新" OnClick="Button2_Click" />
                        <asp:Label ID="Label2" runat="server"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
‥‥△VB.NET　ここまで△‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥

‥‥▽C#　ここから▽‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
<%@ 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 = DateTime.Now.ToString();
        Label2.Text = DateTime.Now.ToString();
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
        Label2.Text = DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <!-- 親UpdatePanel -->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server"
            UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server"
                    OnClick="Button1_Click" Text="親更新" />
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <br />
                <!-- 子UpdatePanel -->
                <asp:UpdatePanel ID="UpdatePanel2" runat="server"
                    UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Button ID="Button2" runat="server"
                            Text="子更新" OnClick="Button2_Click" />
                        <asp:Label ID="Label2" runat="server"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
‥‥△C#　ここまで△‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥

親のUpdatePanelが更新されれば、子のUpdatePanelも更新されます。上
記の例では、UpdatePanel1にあるButton1をクリックすれば、
UpdatePanel2も更新されます。

★UpdatePanelに関連付けられていないコントロールで非同期ポストバ
ックを行う

UpdatePanelの中にあるコントロールやUpdatePanelのTriggersプロパテ
ィに追加されているコントロールは、通常のコントロールとは異なり、
非同期ポストバックのトリガーとなり、Ajax機能を実現させています。
このようなコントロールはScriptManagerによって非同期ポストバック
コントロールとして登録されます。

これらの方法以外でScriptManagerに非同期ポストバックコントロール
を登録するには、ScriptManagerのRegisterAsyncPostBackControlメソ
ッドを使います。通常RegisterAsyncPostBackControlメソッドはページ
のLoadイベントハンドラで呼び出します。

以下の例では、UpdatePanelの外にあるButton1を非同期ポストバックコ
ントロールとして登録しています。この例では、Button1をクリックす
ることにより、UpdateModeがAlwaysのUpdatePanel1だけでなく、
UpdateModeがConditionalのUpdatePanel2もUpdateメソッドを呼び出し
て更新しています。

‥‥▽VB.NET　ここから▽‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
<%@ 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 Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        'Button1を非同期ポストバックコントロールとして登録する
        ScriptManager1.RegisterAsyncPostBackControl(Button1)
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
        Label1.Text = DateTime.Now.ToString()
   
        Label2.Text = DateTime.Now.ToString()
        'UpdatePanel2を更新する
        UpdatePanel2.Update()
    End Sub
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" runat="server" Text="更新"
            OnClick="Button1_Click" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server"
            UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label2" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
‥‥△VB.NET　ここまで△‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥

‥‥▽C#　ここから▽‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
<%@ 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 Page_Load(object sender, EventArgs e)
    {
        //Button1を非同期ポストバックコントロールとして登録する
        ScriptManager1.RegisterAsyncPostBackControl(Button1);
    }
    
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();

        Label2.Text = DateTime.Now.ToString();
        //UpdatePanel2を更新する
        UpdatePanel2.Update();
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" runat="server" Text="更新"
            OnClick="Button1_Click" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server"
            UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="Label2" runat="server"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
‥‥△C#　ここまで△‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■ここで示したコードの多くはまずC#で書き、それを「C# to VB.NET 
　Translator」でVB.NETのコードに変換し、修正を加えたものです。

[URL]C# to VB.NET Translator
http://authors.aspalliance.com/aldotnet/examples/translate.aspx

■このマガジンの購読、購読中止、バックナンバー、説明に関しては
　次のページをご覧ください。
　http://www.mag2.com/m/0000104516.htm

■発行人・編集人：どぼん！
　http://dobon.net

■ご質問等はメールではなく、掲示板へお願いいたします。
　http://dobon.net/vb/bbs.html

■メールは下記URLのフォームメールから送信してください。
　http://dobon.net/mail.html

Copyright (c) DOBON!  All rights reserved.
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

この記事を取り寄せる
最新号をメルマガでお届け
登録 解除

規約に同意して

登録した方には、まぐまぐの公式メルマガ（無料）をお届けします。

最近の記事

上へ戻る