ModalPopupExtender OK botão clique evento não disparar?
-
02-07-2019 - |
Pergunta
Eu tenho um botão dentro de um UpdatePanel. O botão está sendo usado como o botão OK para um ModalPopupExtender. Por alguma razão, o evento clique de botão não está disparando. Alguma ideia? Estou faltando alguma coisa?
<asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:ModalPopupExtender ID="ModalDialog" runat="server"
TargetControlID="OpenDialogLinkButton"
PopupControlID="ModalDialogPanel" OkControlID="ModalOKButton"
BackgroundCssClass="ModalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="ModalDialogPanel" CssClass="ModalPopup" runat="server">
...
<asp:Button ID="ModalOKButton" runat="server" Text="OK"
onclick="ModalOKButton_Click" />
</asp:Panel>
</ContentTemplate>
</asp:updatepanel>
Solução
Aspx
<ajax:ModalPopupExtender runat="server" ID="modalPop"
PopupControlID="pnlpopup"
TargetControlID="btnGo"
BackgroundCssClass="modalBackground"
DropShadow="true"
CancelControlID="btnCancel" X="470" Y="300" />
//Codebehind
protected void OkButton_Clicked(object sender, EventArgs e)
{
modalPop.Hide();
//Do something in codebehind
}
E não definir o botão OK como OkControlID.
Outras dicas
Parece que um botão que é usado como o botão OK ou Cancelar para um ModalPopupExtender não pode ter um evento de clique. Eu testei isso, removendo o
OkControlID="ModalOKButton"
do tag ModalPopupExtender, e os fogos clique de botão. Eu vou ter de descobrir uma outra maneira de enviar os dados para o servidor.
Pode ser também que o botão precisa ter CausesValidation = "false". que funcionou para mim.
Eu só estava procurando uma solução para isso:)
parece que você não pode ter OkControlID Atribuir a um controle se você quiser que o controle dispara um evento, apenas remover esta propriedade eu tenho tudo funcionando novamente.
meu código (de trabalho):
<asp:Panel ID="pnlResetPanelsView" CssClass="modalPopup" runat="server" Style="display:none;">
<h2>
Warning</h2>
<p>
Do you really want to reset the panels to the default view?</p>
<div style="text-align: center;">
<asp:Button ID="btnResetPanelsViewOK" Width="60" runat="server" Text="Yes"
CssClass="buttonSuperOfficeLayout" OnClick="btnResetPanelsViewOK_Click" />
<asp:Button ID="btnResetPanelsViewCancel" Width="60" runat="server" Text="No" CssClass="buttonSuperOfficeLayout" />
</div>
</asp:Panel>
<ajax:ModalPopupExtender ID="mpeResetPanelsView" runat="server" TargetControlID="btnResetView"
PopupControlID="pnlResetPanelsView" BackgroundCssClass="modalBackground" DropShadow="true"
CancelControlID="btnResetPanelsViewCancel" />
Coloque no botão de controle o atributo "UseSubmitBehavior = false".
Nenhuma das respostas anteriores trabalharam para mim. Liguei para o postback do botão no evento OnOkScript.
<div>
<cc1:ModalPopupExtender PopupControlID="Panel1"
ID="ModalPopupExtender1"
runat="server" TargetControlID="LinkButton1" OkControlID="Ok"
OnOkScript="__doPostBack('Ok','')">
</cc1:ModalPopupExtender>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />
</asp:Panel>
Costumo usar uma etiqueta em branco como o TargetControlID. ex. <asp:Label ID="lblghost" runat="server" Text="" />
Eu vi duas coisas que causam o evento clique não fogo:
1. Você tem que remover o OKControlID (como outros já mencionaram)
2. Se você estiver usando validadores de campo você deve adicionar CausesValidation = "false" no botão.
Ambos os cenários se comportou da mesma maneira para mim.
Eu encontrei uma maneira de validar um ModalPopup sem um postback.
No ModalPopupExtender eu definir o OnOkScript para uma função por exemplo ValidateBeforePostBack (), em seguida, na função que chamo Page_ClientValidate para o grupo de validação que eu quero, fazer uma verificação e, se falhar, mantenha a exibição ModalPopup. Se passar, eu chamo __doPostBack
.
function ValidateBeforePostBack(){
Page_ClientValidate('MyValidationGroupName');
if (Page_IsValid) { __doPostBack('',''); }
else { $find('mpeBehaviourID').show(); }
}