小编典典

ASP.NET:ModalPopupExtender防止触发按钮单击事件

ajax

这是我想做的事情:单击页面上的一个按钮,这又使(2)事情发生:

  1. 显示一个ModalPopup,以防止用户按下任何按钮或更改值
  2. 在方法后面调用我的代码,完成后隐藏ModalPopup

这是ASP标记:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
    UpdateMode="Always">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <asp:Panel ID="pnlHidden" runat="server" style="display: none;">
            <div>
            <h1>Saving...</h1>
            </div>
        </asp:Panel>
        <cc1:ModalPopupExtender ID="modalPopup"
            BackgroundCssClass="modalBackground" runat="server"
            TargetControlID="btnSaveData" PopupControlID="pnlHidden"
            BehaviorID="ShowModal">
        </cc1:ModalPopupExtender>
        <asp:Button ID="btnSaveData" runat="server" Text="Save Data"
            OnClick="btnSaveData_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

现在,这是我在C#代码后面的代码:

protected void btnSaveData_Click(object sender, EventArgs e)
{
   UpdateUserData(GetLoggedInUser());
   modalPopup.Enabled = false;
}

为什么不起作用?ModalPopup可以完美显示,但是btnSaveData_Click事件从不触发。

更新: 第一个建议对我不起作用。我还尝试了您的第二个建议(适用于我的建议)。我这方面的一个小区别是我的模式面板(pnlHidden)上没有按钮-
只是一条消息。我确实尝试过在客户端使用Javascript事件,至少与服务器端事件同时触发。这是个好消息,但我似乎找不到或抓住ModalPopupExtender或其BehaviorID的句柄。这不起作用:

function showOverlay() {
    var popup = $find('modalPopup');
    popup.show();
}

弹出窗口始终等于null。

最终更新: 这是使该功能正常工作的最终解决方案(请特别注意OnClientClick和OnClick的使用):

<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
    <asp:Panel ID="pnlHidden" runat="server" style="display: none;">
        <div>
        <h1>Saving...</h1>
        </div>
    </asp:Panel>
    <cc1:ModalPopupExtender ID="modalPopup"
        BackgroundCssClass="modalBackground" runat="server"
        TargetControlID="hdnField" PopupControlID="pnlHidden"
        BehaviorID="ShowModal">
    <asp:HiddenField ID="hdnField" runat="server" />
    </cc1:ModalPopupExtender>
    <asp:Button ID="btnSaveData" runat="server" Text="Save Data"
        OnClientClick="showModal();" OnClick="btnSaveData_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

使用此Javascript函数:

function showModal() { $find('ShowModal').show(); }

…后面的代码:

protected void btnSaveData_Click(object sender, EventArgs e)
{
   UpdateUserData(GetLoggedInUser());
   modalPopup.hide();
}

阅读 201

收藏
2020-07-26

共1个答案

小编典典

试试这个。

创建一个虚拟的隐藏字段:

<asp:HiddenField ID="hdnField" runat="server" />

在您的Modal Popup声明中设置TargetcontrolID =“ hdnField”。

在您的btnSaveData_Click事件中,执行以下操作:

modalPopup.Show();
2020-07-26