Question

I have an ASP.NET application that is using ASP.NET AJAX. I am using the ASP.NET AJAX Toolkit to present a dialog to a user. When the user clicks ‘Yes’ in the dialog, I want to handle that event in the code behind. However, I noticed that my click event is not being reached. Here is the main code:

<asp:Panel ID="dialogContinuePanel" runat="server" style="display:none;" DefaultButton="yesButton">    
  <div>Are you sure you want to continue?</div>
  <div>
    <asp:ImageButton ID="yesButton" runat="server" AlternateText="Yes" ImageUrl="/resources/yes.png" OnClick="yesButton_Click" />
    <asp:ImageButton ID="noButton" runat="server" AlternateText="No" ImageUrl="/resources/no.png" />
  </div>
</asp:Panel>

<asp:LinkButton ID="hiddenLinkButton" runat="server" Text="" />
<cc1:ModalPopupExtender ID="dialogErrorExtender" runat="server" OkControlID="yesButton" 
  TargetControlID="hiddenLinkButton" PopupControlID="dialogContinuePanel"   
  CancelControlID="noButton" />                    

My Code Behind:

protected void yesButton_Click(object sender, EventArgs e)
{
  string argument = yesButton.CommandArgument;
  // Do some processing and redirect the user
}

How do I handle the click event of a Button that is used with a ModalPopupExtender? What am I doing wrong?

Answer 1

You need to remove the OkButton property from your modal popup extender definition. I know this seems counter-intuitive, but when you add that reference, it actually hooks things up to work on the client side without causing postbacks.

So just try this:

<cc1:ModalPopupExtender ID="dialogErrorExtender" runat="server" 
  TargetControlID="hiddenLinkButton" PopupControlID="dialogContinuePanel"   
  CancelControlID="noButton" />