Running an Ajax ModalPopup from code behind


The ajax control toolkit contains a control called ModalPopupExtender. This extender allows you to create a dialog-like interface for webpages.When you use it like it is meant to use you would set a TargetControlID and a PopupControlID. The first is the control that will trigger the popup to show while the latter is the control that will be shown. That’s already nice, but what I needed recently was to show the result of a certain query in such a popup. This means that when I click the control that is pointed as TargetControl it would do a postback, execute some serverside code and then show that result in the browser. This is logical you might think but the problem is that when you click the control assigned to the extender as TargetControl you’ll see the popup immediately and only then the postback occurs.Okay how to solve this? Well add an additional linkbutton for example and make sure it is visible but has not text. You can then set the TargetControlID to this “no-text” linkbutton. Since there is no text, you can’t see it and since you can’t see it the user won’t click it. Nifty :-) Next you can have a second linkbutton the performs a callback to the server and executes some serverside code. If you put this linklabel in an asp.net ajax updatepanel you won’t notice the callback and you can use the ProgressIndicator functionality in asp.net ajax.At serverside you can perform some code execution and for example set a Label’s text proeprty to the result. Finally you can access the ModalPopupExtender and call the Show method that’s available this will cause the popup to appear.I really like this way of working because it allows for a nice userinterface experience and interaction with user.

 

*** UPDATE: I am sorry for all of you that wanted the sample code, with moving to this blog I lost it when my old blog went offline. I cannot provide you with the code anymore ***

  • aswin

    Hi. Can i get tat example? pls send the link to my email

  • Courtney

    Thank you!! I was able to get this to work and it was exactly what I needed.

  • Shawn

    Thanks, this simple fixed saved me allot of time.

  • http://www.ajsquare.com SriDevi

    Please give me an idea.. or send me the link…

    1) How to get the modal popup window by clicking the link in the gridview from code behind…. also to get the data from the popup window after updated…

    2)Inside the popup control, the button click event was’nt handled while clicking within the gridview.

    Thanks in advance….

  • Márcio Fábio

    Hello.
    Please send the link to my email.

  • Mohan

    can you send me the code for this example

  • http://nowebsite Doyle

    Very good comment, it help a lot of AJAX project

  • Marco

    Can you send me the code too, please? Thank you.

  • Tina

    Can u please please send this code to me as well. Thanks So much.

  • Chris

    Can you please send me the code so that I can take a look too. Thanks!

  • Javier Fonseca

    You should set the Enabled property of the *no-text* LinkButton to “False”. Otherwise you could accidently access it pressing the Tab key

  • http://www.businesssoftwaresolutions.com.fj Eric Shandil

    Great article, this is exactly what I was looking for. Thank you so much.

    eric

  • Brandon

    Can you please send me an example to my email. It would be much appreciated.

  • http://www.suddenelfilio.net suddenelfilio

    I would love to send you all the code but this is an old post and to be honest I do not have the code anymore.

  • http://noneyet Kyran

    Hello;
    Would you be kind enough to send me an example of how to do this? Sounds like it might be exactly what i’ve been looking for…. in which case thank you!!

  • farheen Dalal

    Hi. Can i get tat example? pls send the link to my email…
    Thnx in Advance.

  • http://www.bbinfo.com ErikIce

    Hi, can I have an example?
    It’s exactly what I need.
    Thanks a lot

  • Edward

    Would you be kind enough to send me an example of how to do this? Sounds like a great solution. Thanks for the assistance.

  • sam

    hey, this sounds fantastic. could you please send me an example as well? i would send cake and coffee in exchange, but its kinda difficult somehow.. many thanks in advance

  • http://reaction21.com gabe

    I would love to be able to see this code as well…. I am having a difficult time understanding without a visual aid. thanks!

  • beeker

    Can i get a email on this topic as well? Thanks!

  • Binu

    Nice thinking But I am not able to understand how to do this exactly.And when and how i have to call the SHOW Method

    Please send me by mail.
    its very urgent now for me .
    because this is what I was searching for last 2 days.

    thanks…

  • LijoD

    Can you please send me the code so that I can take a look too. Thanks!

  • http://www.canaancorp.net Insatiable

    Can you send me the code example too?

  • Ratheesh

    Please send that solution to me….

    rethnath@gmail.com

  • NecroKorn

    Great article, this sounds fantastic, Can you please send me the code so that I can take a look too. Thanks!

  • Richy Rich

    i have tried the above but i get a jscript runtime error when i click on the link saying that the method is undefined. i have a number of links on my pages which i want to show the modalpopupextender onclick.

    please help

  • Nick

    great little work around. For those who are looking for some sample code it’s pretty straight forward.

    Using a button click event….

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
    // do work here
    // assign values if need be to the modal popup
    // you do NOT have to assign text value to LinkButton1 -

    ModalPopupExtender1.Show();
    }

    assign all of your modalpopupextender’s TargetControlID=”LinkButton1″

    and then run your ok or cancel controlIDs to the buttons/link buttons on your popup

    Enjoy :)

  • Jonny

    I’m very thankful for this hint. This also saved me some time.

    Cheers

  • Yalin

    Nick you are my man! I had spent hours to have a stupid modal popup to open on page load. Finally it works.

  • Greg Hinkle

    AWESOME! Thanks for the tip!

  • Pingback: asp.net, c#,javascript