Make postback when the OkButton in a ModalPopup is clicked in ASP.NET AJAX

Question

I follow the example in Atlas: Creating a Confirmation Using the ModalPopup Extender to make a postback when the OkButton in a ModalPopup is clicked (it uses the ModalPopupExtender that comes in ASP.NET Ajax Control Toolkit), but as I can see, the Sys.WebForms.PostBackAction() is no longer present in ASP.NET AJAX (the example is for Atlas). When I run it the "Microsoft JScript runtime error: Object expected" error message raises, in the line in javascript where I create the PostBackAction. How can I make this works in ASP.NET AJAX, or maybe, there's another way to do it? Thanks

Answer 1

Maybe just adding a server side OnClick event to the button? This should post back the whole form. Or you could get the main form from html ($find('myFormName') or something) and do a .submit() on it.

Answer 2

If I remember the ModalPopupExtender correctly, it has an OKControlID that you set as your button ID.

Could you not just assign your button on "onclick" clientside handler that calls a postback?

For example, something like:

 myModalPopupExtender.OkButtonID = myOKButton.ID;
 string script = ClientScriptManager.GetPostBackEventReference(myOKButton, myOKButton.ID);

 myOKButton.Attributes.Add("onclick", script);

EDIT: It looks like another potential solution here.

Answer 3

Have you thought about using the ConfirmButtonExtender? You get the modal "bling" through the extender, and you'll have the PostBack processing you need.

You wire the button click event as normal for processing, but the Confirm extender will "intercept" the processing and allow things to continue if the user confirms the action.

Answer 4

Server side events do work with the ModalPopupExtender. What you need to do is to create a button with a display style set to none. Then set the TargetControlID property of the ModalPopupExtender to the hidden button ID.

<asp:Button ID="btnShowModal" runat="server" Text="Show" OnClick="btnShowModal_Click" />
<asp:Button ID="btnHidden" runat="server" Style="display: none" />
<ajaxControlToolkit:ModalPopupExtender ID="modalExtender" runat="server" 
    TargetControlID="btnHidden" PopupControlID="divId" />

In the OnClick handler show the modal:

modalExtender.Show();

In the handler for the control that will close the modal (usually a button) hide the modal:

modalExtender.Hide();

I'm able to successfully use this method for posting back to the server get populate controls in my modal with info from a database during the postback. Works like a champ.

Answer 5

Hi,

You can place an in-visible button in the panel and set it as OkButton. Add your actual button in the panel and add its OnClick event handler. See code below:

<cc1:ModalPopupExtender 
TargetControlID="btnSubmit"
DropShadow="true"
OkControlID="btnOK"
CancelControlID="btnDecline"
PopupControlID="pnlTermsAndConditions"
BackgroundCssClass="popup"
ID="ModalPopupExtender1" 
runat="server">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlTermsAndConditions" runat="server">
<table width="500" cellpadding="6" cellspacing="0" border="0" bgcolor="white">
<tr>
    <td><b>Tables and Content</b></td>
</tr>
<tr>
    <td><asp:TextBox ID="TermsAndCondition" runat="server" TextMode="MultiLine" Rows="10" Columns="60">
    This is my terms and condoition
    </asp:TextBox></td>
</tr>
<tr>
    <td align="center">
    <asp:Button ID="btnAccept" runat="server" CssClass="btn" Text=" Accept " OnClick="btnAccept_Click" />&nbsp;&nbsp;
    <asp:Button ID="btnDecline" runat="server" CssClass="btn" Text=" Decline " />
    <asp:Button ID="btnOK" style="display:none;visible:false;" runat="server" CssClass="btn" Text=" OK " />
    </td>
</tr>
</table>
</asp:Panel>

Answer 6

This is the solution I have been looking for. Great post. Incidentally, it is not neccessary to create the mock OK button. Just don't include the optional OKbutton prameter in the Modal Popup Extension definition.

Answer 7

Good Work Tim. Trying to find this answer for days.

Answer 8

Hi, I load a control dynamically into a placeholder instead of a TextBox ID="TermsAndCondition". However on postback the buttons in this control are not fired. on my development they do. But in production not. I am searching for a while now, but cannot found a proper solution. Any help appreciated. J.