Postback Text Processing with the AJAX Modal Dialog

February 22, 2010 | Comments | AJAX, ASP.NET

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

Comments

There are 15 comments for this post.

Postback Text Processing with the AJAX Modal Dialog : Misfit Geek on February 22, 2010 10:26 am

RE: Postback Text Processing with the AJAX Modal Dialog

Pingback from Postback Text Processing with the AJAX Modal Dialog : Misfit Geek
Conrad on February 22, 2010 4:28 pm

Very good info… was stuck on this very same problem months ago and had given up on building my solution using this approach… keep posting the tips!
John on February 22, 2010 10:18 pm

Hi Joe, Is it possible to use ModalPopup to display a separate page, instead of a panel?
Rahul on February 22, 2010 11:12 pm

Hey Joe,

Thanks for the post. This is useful.

Just a question here…When I use a modalpopupextender or infact any other AJAX toolkit control it appears like "<cc1:ModalPopupExtender" with cc1 but in your case it appears like "<ajaxToolkit:ModalPopupExtender"…how this ajaxtoolkit prefix appear for you?…Am I doing something wrong. Not a big issue though, just asking because of my curiosity.
Abdul Rauf on February 22, 2010 11:58 pm

Very useful post

Thanks
Linked - List on February 23, 2010 2:36 pm

RE: Postback Text Processing with the AJAX Modal Dialog

Linked – List
Joe Stagner on February 23, 2010 6:08 pm

Rahul,

That cc1 is the "TagPrefix" which you specify when you register the assemble with your page.

When you drag an ACT control onto your page you get a refference that looks somethign like this:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

You can change the TagPrefix from cc1 to anything that you want.

-Joe
Joe Stagner on February 23, 2010 6:20 pm

John – email me what you are trying to accomplich and I’ll try to help.
Ajay on February 23, 2010 10:43 pm

that’s really womderfull tip.

thanks.

i was never this using model popup in this way.
Vlad on February 24, 2010 4:00 am

With a bit of tinkering, you can use the ModalPopupExtender for a full-fledged modal window, event with overlaying modals event possible> You have to workaround some bugs in the toolkit, thought.
Santaclus on February 24, 2010 8:38 am

Hi, Nice working

Can you do us,slow connections,a favour ???

put vids in http://www.asp.net with low sizes.(especially videos related to asp.net 4)
Thanigainathan on February 25, 2010 2:12 am

Very nice solution !
Phil on February 25, 2010 4:05 am

Good job Joe! I suppose it’s worth adding that the absense of an OkControlID means you will have to have ModalPopupExtender1.Hide() in the event handler for the button which causes the postback? I assume that’s the approach you took, the line "even if … has a click event" appeared to suggest there was not.

Glad to see the solution availiable, I think I used this a while ago. I believe you can also use a dummy button in instances where the ajax toolkit requires a control ID, which I think I did for the TargetControlID so I could control the ModalPopupExtender1.Show() as well.=)
Phil on February 25, 2010 4:08 am

Rahul, this is controlled in the web.config when the assembly is added to the website:

<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajax"/>
AjaxToolkit - ModalPopup com uma GridView on March 1, 2010 7:51 am

RE: Postback Text Processing with the AJAX Modal Dialog

Antes de tudo, vou mostrar o exemplo final deste post: Num post anterior mostrei como chamar um Panel

Write a Comment

Let me know what you think?

Misfit Geek