多个目标ID和ModalPopUp Extender

时间:2011-10-10 18:00:02

标签: javascript ajax modalpopupextender confirmbuttonextender

晚上。

好的,我们走了!

我的页面上有以下按钮,我希望使用一个模式弹出窗口来保存点击。因此按钮有以下内容:

<asp:Button ID="btnSave1" runat="server" OnClick="btnSave1_Click" Text="Save" OnClientClick="$find('showSaveConfirm').show(); return false;" />
<asp:Button ID="btnSave2" runat="server" OnClick="btnSave2_Click" Text="Save" OnClientClick="$find('showSaveConfirm').show(); return false;"/>

<asp:Button ID="btnSaveAll" runat="server" Text="" Style="display: none" />

以下是我的模态面板信息:

<asp:Panel ID="pnlSaveConfirm" runat="server" Style="display: none;" CssClass="modalPopupContainer">
            <div id="Div7" class="modalPopupHeaderPanel">
                <div id="Div8" class="modalPopupHeader">

                </div>
                <asp:LinkButton ID="LinkButton2" runat="server" CssClass="modalPopupClose" CausesValidation="False">Cancel and close</asp:LinkButton>
            </div>
            <div id="Div9" class="modalPopupBannerPanel">
                <div class="modalPopupPanel">
                        <br />
                        You are about to save this piece of data.
                        <asp:Button ID="btnOkSave" runat="server" Text="Ok" />
                        <asp:Button ID="btnCancelSave" runat="server" Text="Cancel" />
                        <br />
        </asp:Panel>
        <ajaxToolkit:ModalPopupExtender ID="mdlPopupSaveConfirm" runat="server" TargetControlID="btnSaveAll" BehaviorID="showSaveConfirm"
            OkControlID="btnOkSave" CancelControlID="btnCancelSave" PopupControlID="pnlSaveConfirm" BackgroundCssClass="modalBackground" />

现在两次点击都会触发一个位于其上的模态面板。取消,取消但有一个问题。

当我点击btnOkSave时,这似乎没有确认,因为btnSave1_Click和btnSave2_Click服务器端事件不会被解雇。

任何想法我做错了什么?

2 个答案:

答案 0 :(得分:1)

btnOkSave没有OnClick事件。将其添加到您的控件中:

OnClick="btnSave1_Click"

答案 1 :(得分:1)

好吧,我实际上走了一条略有不同的路线,当我使用Ajax工具包时,我实现了使用ConfirmButtonExtender。

对于两个原始保存,我设置了两个单独的ModalPopUpExtenders指向同一个面板,这些由ConfirmButton Extender执行:

  <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" 
                    runat="server" ConfirmText="" Enabled="True" TargetControlID="btnSave1" DisplayModalPopupID="mdlPopupSave1Confirm">
                </ajaxToolkit:ConfirmButtonExtender>
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" 
                    runat="server" ConfirmText="" Enabled="True" TargetControlID="btnSave2" DisplayModalPopupID="mdlPopupSave2Confirm">
                </ajaxToolkit:ConfirmButtonExtender>

将这些附加到实际面板:

<ajaxToolkit:ModalPopupExtender ID="mdlPopupSave1Confirm" runat="server" TargetControlID="btnSave1"
             OkControlID="btnOkSave" CancelControlID="btnCancelSave"
            PopupControlID="pnlSaveConfirm" BackgroundCssClass="modalBackground" />
            <ajaxToolkit:ModalPopupExtender ID="mdlPopupSave2Confirm" runat="server" TargetControlID="btnSave2"
             OkControlID="btnOkSave" CancelControlID="btnCancelSave"
            PopupControlID="pnlSaveConfirm" BackgroundCssClass="modalBackground" />

这完全符合我的目标。

仍然很脏但是有效:)