UpdatePanelを使うとModalPopupExtender が閉じない (クローズしない)

この度、Ajax Control ToolkitでUpdatePanelを使うと、ボタンを押しても、ModalPopupExtenderを使って作ったダイアログが閉じなくて困りました。

理由を調べてみました。

ModalPopupExtender でボタンを押しても閉じない？
プログラミングの無料レッスン体験

ModalPopupExtender でボタンを押しても閉じない？

調べてみると、ModalPopupExtender が終了しないのはよくある問題で、

「クローズ」ボタンを UpdatePanel の外に置きさえすればよいようです。

以下のように、UpdatePanelの中の ContentTemplate の中にボタンがあると、ボタンを押してもダイアログは終了しません。

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="udpOutterUpdatePanel" runat="server">
            <ContentTemplate>
                <asp:Button ID="ButtonShow" runat="server" Text="Show Popup" />

                <input id="dummy" type="button" runat="server" />
                <ajaxToolkit:ModalPopupExtender runat="server"
                        ID="mpeThePopup"
                        TargetControlID="dummy"
                        PopupControlID="pnlModalPopUpPanel"
                        BackgroundCssClass="modalBackground"
                        DropShadow="true"/>
                <asp:Panel ID="pnlModalPopUpPanel" runat="server" CssClass="modalPopup">
                    <asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server" UpdateMode="Conditional">
                        <ContentTemplate>
                            Message
                            <asp:Button ID="ButtonClose" runat="server" Text="Close Popup" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<asp:UpdatePanel ID="udpOutterUpdatePanel" runat="server">

<asp:Button ID="ButtonShow" runat="server" Text="Show Popup" OnClick="ButtonShow_Click" />

<ajaxToolkit:ModalPopupExtender runat="server"

ID="mpeThePopup"

TargetControlID="dummy"

PopupControlID="pnlModalPopUpPanel"

BackgroundCssClass="modalBackground"

DropShadow="true"/>

<asp:Panel ID="pnlModalPopUpPanel" runat="server" CssClass="modalPopup">

<asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server" UpdateMode="Conditional">

Message

<asp:Button ID="ButtonClose" runat="server" Text="Close Popup" OnClick="ButtonClose_Click" />

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

外出しにすれば、ボタンを押せばダイアログが終了するようになります。

ネットでも以下のように記載されていました。

But this is usualy a fairly common problem. and the solution is almost always having the close button in your update panel. If you place the close control outside the updatepanel. the close button should work.

(https://forums.asp.net/t/1689011.aspx?ModalPopupExtender+will+not+close)

プログラミングの無料レッスン体験

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

＜Codecampの特徴＞

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp