image

I’ve started blogging simple tips when I get a question from a developer that’s a bit tricky.

This is one of those. Simple to do, but not always simple to find the answer.

In this case the developer wanted to use an AJAX Editor Control inside a ModalPopup control.

This isn’t a problem but, the user needed to clicking the OK button to cause a post-back so that he could execute some server –side logic.

The ”Ok” Button is an ASP.NET control but adding a Click Event Handler for the button didn’t solve the problem because it didn’t get executed when the use Clicked on the “Ok” button.

Normally the ModalPopupExtender would be used like this.

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
1.)         OkControlID="OkButton"
2.)         OnOkScript="onOk()"
CancelControlID="CancelButton" />

Line number 1 tells the control to catch the click event for the Ok Button Control instance and line 2 specifies when CLIENT SIDE JavaScript code to execute when the control specifies in line 1 is clicked.

The post-back doesn’t happen (even if the ASP.NET Button control hasd a click event handler defined in code behind because the control doesn’t propagate it.

So Just delete those two lines !

It turns out that they are optional and if you delete them the click event is not trapped and the code behind will execute as expected.

So just nake it look like this:

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
CancelControlID="CancelButton" />

Simple !

[ Download working C# Code HERE ]

Technorati Tags: ASP.NET AJAX Tips & Tricks