ASP.NET: ModalPopupExtender impede que o evento de clique no botão seja acionado
Aqui está o que estou tentando fazer: Clique em um botão na minha página, o que, por sua vez, faz (2) as coisas acontecerem:
Exiba um ModalPopup para impedir que o usuário pressione qualquer botão ou altere valoresChame meu código por trás do método, ocultando o ModalPopup quando terminarAqui está a marcação 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>
Agora, aqui está o meu código por trás do código C #:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.Enabled = false;
}
Por que isso não funciona? O ModalPopup é exibido perfeitamente, mas o evento btnSaveData_Click NUNCA é acionado.
ATUALIZAR: A primeira sugestão não funcionou para mim. Eu também tentei sua segunda sugestão (na medida em que ela se aplicava a mim). Uma pequena diferença do meu lado é que não há botão no meu painel modal (pnlHidden) - é apenas uma mensagem. Tentei usar eventos Javascript no lado do cliente, que pelo menos dispararam simultaneamente com o evento do lado do servidor. Esta foi uma boa notícia, mas não consigo encontrar ou manipular o ModalPopupExtender ou seu BehaviorID. Isso não funciona:
function showOverlay() {
var popup = $find('modalPopup');
popup.show();
}
pop-up é sempre igual a nulo.
ATUALIZAÇÃO FINAL: Esta é minha solução final para que isso funcione (tome nota específica do uso do OnClientClick AND 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>
Usando esta função Javascript:
function showModal() { $find('ShowModal').show(); }
... E esse código por trás:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.hide();
}