[ ASP.NET ] 入れ子にした UpdatePanel コントロールの表示制御

Tweet

Pocket

ASP.NET の UpdatePanel コントロールを使用して、画面全体ではなく画面の一部分のみを再描画させることができます。また、UpdatePanel コントロールを入れ子にして定義させることもできます。このページでは、入れ子にした UpdatePanel コントロールのサンプルを掲載しています。

入れ子にした UpdatePanel コントロール

入れ子にした UpdatePanel コントロールのサンプルになります。親の UpdatePanel コントロールの ContentTemplate タグ内に、子の UpdatePanel コントロールパネルを配置しています。また、親子それぞれの UpdatePanel のボタンクリックイベントを設定しています。詳細はコメントを参照ください。

ASPX

<form id="form1" runat="server">

    <!-- スクリプトマネージャー -->
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    
        <!-- 親 UpdatePanel コントロール -->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

                <!-- 子 UpdatePanel コントロール -->
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" />
                        <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
                    </ContentTemplate>
                    <!-- 子 UpdatePanel コントロールのトリガーイベント設定 -->
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
            
            </ContentTemplate>
            <!-- 親 UpdatePanel コントロールのトリガーイベント設定 -->
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
</form>

VB.NET

    ''' ページロードイベント
    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        ' ポストバック時は何もしない
        If IsPostBack = True Then
            Return
        End If

    End Sub

    ''' 親 UpdatePanel コントロールのボタンイベント（トリガー）
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        Label1.Text = DateTime.Now.ToString()
    End Sub

    ''' 子 UpdatePanel コントロールのボタンイベント（トリガー）
    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click
        Label2.Text = DateTime.Now.ToString()
    End Sub

C#

    /// ページロードイベント
    protected void Page_Load(object sender, EventArgs e)
    {
        // ポストバック時は何もしない
        if (IsPostBack == true) {
            return;
        }
    }

    /// 親 UpdatePanel コントロールのボタンイベント（トリガー）
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
    }

    /// 子 UpdatePanel コントロールのボタンイベント（トリガー）
    protected void Button2_Click(object sender, EventArgs e)
    {
        Label2.Text = DateTime.Now.ToString();
    }

子パネルのイベントで親パネルの要素の変更を禁止する

親の UpdatePanel および子の UpdatePanel のイベント内で、親子それぞれの要素の変更を行うことができますが、次のように親の UpdatePanel コントロールに以下のプロパティ設定を行うと、子の UpdatePanel のイベントで行う親画面に対する要素の変更をブラウザ上で反映させないように制御することができます。

Tweet

Pocket