Modal Popup from code behind

I'm having issues trying to load a Modal Popup from a OnClick event from an Image Button. This code goes through and actually runs the sub from the code behind file, but when the page actually finishes loading the modal popup does not show up, it basically just refreshes my page. Can anyone tell me what I'm doing wrong? I'm needing this to work because eventually I'm going to be putting this into a repeater for a bunch of image thumbnails, on click of a particular thumbnail it will load a modal popup with a larger image and some text information.

In my actual file (code below is in a test page without the repeater information), I have the same code but add in my repeater code around it, but on button click it won't even fire the sub from code behind, it simply does a page refresh and thats it.

If I can get this test page to work, then maybe the other will fall into place too.

Frontend Code:
1 <asp:scriptmanager runat="server"></asp:scriptmanager>
2
3 <asp:ImageButton runat="server" ID="test" OnClick="myRun" ImageUrl="/my.jpg" />

4 <asp:Button ID="btnShowPreview" Visible="False" runat="server" Text="Button" />
5
6 <%--Designs--%>
7 <asp:Panel ID="pnlPreview" CssClass="popupModal" Style="display: none;" runat="server" Width="600px">
8 This is the panel.
9 </asp:Panel>

Backend Code: 
1Sub myRun(ByVal SourceAs Object,ByVal ArgsAs ImageClickEventArgs)2Dim modPreviewAs New AjaxControlToolkit.ModalPopupExtender34 modPreview.ID ="mpePreview"5 modPreview.TargetControlID ="btnShowPreview"6 modPreview.PopupControlID ="pnlPreview"7 modPreview.BackgroundCssClass ="modalBackground"9End Sub
 Hope you can help.
Micah

In your codebehind you are just creating the popup extender, you aren't showing it.
You need to call .Show() when you've created it.

Btw, you don't need to create it in codebehind. Create in your .aspx instead and just call Show() on it.

Good call on that one, I was thinking about it later that night to and couldn't figure out why I was doing it from code behind.

I moved the model popup extender to .aspx page and call the mpePreview.Show() from code behind, it does run through the code still, but never displays the modal still.

Any other suggestions? Do I need to have certain properties set on my modal and scriptmanager that I'm missing?

Thanks for the help

MIcah

Ah ha, kind of figured it out, my hidden button is causing the issue, if I make my button visible it works, if I make it invisible it fails.

So now I just need to figure out how to hide my control and have it still fire correctly.

style="display: none;"

will hide effectively.

<asp:Button runat="server" ... style="display: none;" />

Intellisense won't pick it up but you can put it there.

Ahh, sweet that worked perfectly! I hadn't even thought about that option.

Great, Thank you very much.

Micah

Modal pop-up questions

First, I'd like to display a modal pop-up programatically instead of it being triggered by a button click event or similar.

Secondly, if the user clicks OK, I'd like it to trigger a server-side function.

I've tried several approaches to doing these and have not had much success. Could anyone provide some direction?

Thanks

To show and hide the modal popup programatically:

ModalPopupExtender1.Show() and ModalPopupExtender1.Hide() ' Change "ModalPopupExtender1" to whatever yours is called.

To get your "Okay" button to fire normal server-side code, just don't specify an OkControlID for the ModalPopupExtender. Handle the button's click event normally and just use the above .Hide() method to close the popup.

Modal Popup: Will not access event handler in code behind prior to showing modal popup.

I have an AJAX modal popup that is tied to a 'Continue' button on a ASP.NET page. The issue is that I have required field validators with messages next to controls that need to be displayed if information is missing. Right now, the AJAX modal shows upon pressing 'Continue' regardless of if infomration is missing on the page. I put a break point in the event handler for the 'Continue' button and it never even gets hit.

How can I intervene and NOT show the modal popup untilall required field validators are satisfied?

if (Page.IsValid)
modalDialogExtender.Show()
else
//do nuthin

Yes and No. When pressing the button that is the TargetControlID of the modal box, the button event handler of that TargetID is is never reached prior to the modal being displayed. That is the No. However, I added a second hidden control as the TargetControlD that can not be accessed from the page to satisfy the modal's proerties. Then when my 'Continue' button is pressed, Yes, the code you provided works and is hit and the modal is shown programatically (assuming PageIsValid = True).

Thank you for the response.

ModalPopup - closing after every click event (need help)

My ModalPopupExtender show a Panel with GridView, TextBox - txtSearchParam, Button - btnSearch and of course also OkButton - btnOK and CancelButton- btnCancel. What I wannt to do is this:

1) in that gridview is displayed simple list of customers

2) user cann type in txtSearchParam some name and with click on btnSearch performs a SEARCH for typed name

Every time when user clicks on SEARCH BUTTON (btnSearch) my ModalPopup will be closed. It seems like ModalPopup ignores both settings for OKControlID = "btnOK" and CancelControlID="btnCancel".

Why is that ModalPopup closed after every Click in panel with gridView ?

What am I doing wrong ? Please help and sorry for my english :-)

Because btnSearch is posting back, I think that is the reason.

I also faced the same problem, upon google, i found that I have to use updatepanel and keep the btnSearch inside updatepanel's content.

It solved the problem, I can get the results wih different search criteria... but after that If I click cancel it is messing my page's dropdown cotrols.

Any idea?

I am having the same problem. I've tried everything I can think of... putting the TargetControl inside an UpdatePanel, putting it outside an UpdatePanel... with no luck.

Here, specifically, is what I'm trying to do:

I have a Panel ( we'll call it "Panel1"). The panel contains an UpdatePanel. The Updatepanel contains a User Control that has text boxes, buttons... all sorts of things that perform postbacks. If this is on a page by itself, everything works just fine; the updatepanel performs the partial postbacks and everything works.

However, I need it to appear as if it were a highly interactive modal dialog box. So, I attached a ModalPopupExtender to "Panel1". It pops up just fine, but whenever any of the controls within my user control fire, the entire modal popup vanishes. It doesn't seem to matter that I set the OkButton and CancelButton properties to buttons that are not within my user control... in fact, I set them to "hidden" buttons that are on the outer page, outside of the whole Panel1 that I'm displaying modally.

Someone please help... I'm at my wits end trying to figure this out.

Thx champ ! That was it...it works OK with UPDATEPANEL :-)
Can you elaborate on how you got it working? I still cannot.

Hi RobertBeach,

Do you still need a sample code , let me know...

yes, sure...let's share it with us please :-)

Hi,

Make sure that popup panel's OkControlID and CancelControlID are outside the update panel. Postback buttons should be inside the update panel.

For Example:

<cc1:modalpopupextender id="mdlPopup" runat="server" targetcontrolid="btnDummy1" popupcontrolid="pnlPopup" backgroundcssclass="modalBackground" okcontrolid="OkButton1" dropshadow="true" popupdraghandlecontrolid="pnlHeaderPopup" /><%-- PopupP anel--%><asp:Panel ID="pnlPopup" runat="server" Style="display: none" CssClass="modalPopup" Width="500px"><%-- Popup Panel Header--%> <asp:Panel ID="pnlHeaderPopup" runat="server"><%-- OK Control ID--%> <asp:ImageButton ID="OkButton1" runat="server" BorderStyle="None" ImageAlign="AbsMiddle" ImageUrl="~/App_Images/close_icon.gif" /> </asp:Panel> <Ajax:UpdatePanel ID="upLeaveDetails" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:FormView ID="frmView" runat="server" DataSourceID="ds1" Width="100%"> <EditItemTemplate><%-- Buttons that postback--%> <asp:Button ID="btnUpdate" runat="server" CausesValidation="True" CommandName="Update" CssClass="btn" OnClick="btnUpdate_Click" Text="Update" /> <asp:Button ID="btnCancel" runat="server" CausesValidation="True" CommandName="Cancel" CssClass="btn" OnClick="btnCancel_Click" Text="Cancel" /> </EditItemTemplate> </asp:FormView> </ContentTemplate> </Ajax:UpdatePanel></asp:Panel>

For more information refer to:

http://blogs.technet.com/kirtid/archive/2007/05/03/using-updatepanels-with-modalpopups.aspx

Hope it helps.

ModalPopup -> UserControl -> fire event ?

Hello !

Because I made different scenarios with modalpopups, I have this situation :

1) I create ModalPopup dynamically

2) Load dynamically a usercontrol into a ModalPopup (and set usercontrol ID)

3). UserControl has buttons OK,Cancel and btnFireClick with click event on a server

Everything is fine, except that when I click btnFireClick the click event didnt fire...

If I set the same buttons into modalpopup but not like usercontrol - event is executed

If I load the usercontrol in the page (not in modalpopup) - event is executed

But if I load usercontrol into modalpopup - event didnt execute

Where is the problem ?

I use Microsoft ASP.NET 2.0 AJAX Extensions

Please try your scenario with the recently available61121 release of the Toolkit (and ASP.NET AJAX Beta 2). If the problem persists, then please reply with acomplete, simple, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

2) Load dynamically a usercontrol into a ModalPopup (and set usercontrol ID)

Your user control is a server side control which renders a bunch of html controls at the client side, it is not like a Panel server control which renders a div at the client side.

The second thing you may want to look at is, if you load the user control dynamically, you will have to load the user control every postback within OnInit or OnLoad and give it the same name since you the first time you load the user control dynamically. Otherwise, the event won't fire and the control does not even exist.

ModalPopup add_hidden event

I am trying to hook the hidden event of the ModalPopup. I am getting it work sporadically. It seems that there is a timing issue when the javascript runs.

If I wrap up the add_pageLoaded in a setTimeout it works, actually it only works after I refresh the page. How/When can I hook this event. Below is what I have so far.

Specifically, pop is null. The find is not locating my modal popup properly.

<script language='javascript'>Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(AMModalPopupPageLoaded);function AMModalPopupPageLoaded(sender, args){ var pop = $find('<%= ModalPopup1.ClientID%>_ajaxModalPopup'); if (pop != null) pop.add_hidden(function(){alert('hidden');}); else alert ('nope'); Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(AMModalPopupPageLoaded);}</script>

You could specify a BehaviorID on the extender and retrieve it using that.

That sounds good, however, i don't know how to do that Can you provide me a sample or the location of the documentation?

thanks!

Ok, I simply changed:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(AMModalPopupPageLoaded)
To:
Sys.Application.add_load(AMModalPopupPageLoaded);
And everything works perfectly!