Posted by Troy on March 13, 2009 09:39
I spent a little while today confused, and thought this would be worth posting.
I added my first modal popup window to an ASP.NET page today, and got some weird results. I was hoping that I could simply put a short form onto a modal window and have the submit button work like normal, which would be firing the onclick event and causing a postback, which would run the code in my code-behind page. Unfortunately, the example on the AJAX toolkit website explains how to set this all up nicely, but it is being used to call a javascript function, which required that NO postback be called so that the JavaScript can run on the client. It took me a while to figure out how to run server-side code instead.
Thankfully, I found the answer fairly quickly. The answer is to NOT set your "OK" button as the OkControlID. The button that you want to use to run your code-behind should not be referenced in the modalPopUpExtender at all.
In other words, your aspx page should look something like this:
<p>
<asp:LinkButton ID="lnkModal" runat="server">Click this to open the modal window</asp:LinkButton>
</p>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalForm" style="display:none;" >
<p>
Type your name here: <asp:TextBox ID="tbName" runat="server"></asp:TextBox>
</p>
</asp:Panel>
<ajaxToolkit:modalpopupextender
id="mdlExt"
runat="server"
BackgroundCssClass="modalBackground"
CancelControlID="btnCancel"
TargetControlId="lnkModal"
PopupControlID="pnlPopup">
And the btnOK button will fire this codebehind, which will display your message (not to mention dismiss the modal pop-up form!)
protected void btnOK_Click(object sender, EventArgs e)
{
lblMsg.Text = "Hello, " + tbName.Text + "!";
}