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 Popup OnClick (Server Side) Issues

I'm utilizing a modal popup to allow a user to enter a new record for a gridview on the screen. Once the modal popup is displayed (via clicking a link button), the user enters some values in some textboxes and the user clicks the save button. At this point the application executes the code in the code-behind for the button. However, if this is the first viewing of the screen (i.e. I just pressed play in visual studio), the values of the textboxes contained within the panel contain blank values (even though the user entered values).

The second strange thing that occurs, is if this is not the first viewing of this page and I click the link to display the modal popup, enter the text and click save, the OnClick (server side) fires twice.

Has anyone run across this issue? If so, how did you resolve it?

Thanks in advance,

Brian

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

If you are using the Official Beta 2 release - don't use it (As David recommended) - unless they updated the bits on the day they posted it as Beta 2 Release -its broke...- go to the source tab and download today's release...about 1/3 of the controls with the 'official Beta 2 ' release would exhibit that behavior (the accordian - would never accept user clicks, drag panel never dragged, always visible just remained visible in one spot, and the modal exhibited your issues... had something to do with types function or something...If you are using Beta 1 or Atlas - it will be more about how you are wrapping the modal - you should place it in its own update panel even if you are attaching it into every row. I personally have the modal as a single instance and I control the modal show and hide in codebehind... examples are in my blog entries...

ModalPopup - Logic to databind control outside of modal

Hello All,

I am have a modal popup that appears and takes some input from a user. The user can then hit "submit" and logic behind the onclick for the submit button validates the input, and, if valid, submits that input to a database to be inserted.

this works great. I have update panels inside of the modal doing the work, and the user can submit as many entries as the want without the modal closing.

However, in the same method, after I update the database, I call another method to get new data from the database, and to re-databind the control they were looking at before the modal opened.

But the control (a listbox) does not change. It is not being databound. I even tried clearing the items from the listbox, and the items still remain.

I am not sure why the listbox is not updating from the logic. I would assume its not becuase the control is not in the same update panel, or the control is not in the modal popup. The listbox control is in its own update panel.

So I am trying to figure out how to make a control that is in another update panel, not in the modal popup update with logic triggered in the modal popup. I've thought about using the "onOKScript" in the modal popup properties to use some sort of JS to re-databind the control, but I am not sure how to do this.

Any ideas would be extreamly helpful

Thanks

-Shane

Hi Shane,

What you're describing should work. Code in an event handler invoked via oneUpdatePanel should be able to update controls in anotherUpdatePanel. Perhaps you can post a simple demo showing what's not working for you and we can take a look.

Thanks,
Ted

modalpopup & OnClick

I’ve been experimenting with AJAX for our Weather Web Site and I ran into a road block. I'm working with the modalpopup and hovermenu controls. I have an imagebutton that when clicked, opens the modalpopup. However, it also has an onClick call to a method in the C# code. Unfortunately, this method is never called because of the modalpopup.

Here’s the code where I create the button:

<asp:ImageButtonID="fireweatherten"runat="server"ImageUrl="images/bullseye.jpg"Height="18"Width="21"OnClick="fireweatherten_Click"/>

Here’s the code where I create the modalpopup:

<cc1:ModalPopupExtenderID="MPE1"runat="server">

<cc1:ModalPopupPropertiesTargetControlID="fireweatherten"PopupControlID="weather"CancelControlID="close"BackgroundCssClass="modalBackground"DropShadow="true"/>

</cc1:ModalPopupExtender>

Here’s the code where I create the hovermenu:

<cc1:HoverMenuExtenderID="HME1"runat="server">

<cc1:HoverMenuPropertiesTargetControlID="fireweatherten"HoverCssClass="popupHover"PopupControlID="popupMenuTen"PopupPosition="Bottom"PopDelay="25"/>

</cc1:HoverMenuExtender>

Basically, when the button is pushed, it should call the method (fireweatherten_Click) and the dataset from this call should be displayed on the modalpopup panel. If I delete the modalpopup code, the method is called and runs perfectly (it just doesn’t have anywhere to display the data). However, if I leave the modalpopup code, the method is never called and I get a blank panel displayed. Any help would be appreciated.

Thanks,

Luis

I think this post may help:http://forums.asp.net/ShowPost.aspx?PostID=1379165

David,

Thanks for the reply, but I'm actually trying to activate a click event for the same button that launches the modalpopup; not the click event for a button on the modalpopup. Let me explain...I am trying to allow users to fill in search information in various fields in a panel. When they click the search button, I need to take these field values and search my database. Then, rather than opening a new page to display the search results, I want to display them in the modalpopup.

Unfortunately, when I click the search button, the "onsearch_click" event in the code behind my page is never called. Instead, the modalpopup displays a blank results page. If I delete the modalpopup extender, my "onsearch_click" is called with no problem. So my current issue deals with calling a usual asp:button onclick event before the modalpopup is displayed. I've seen other questions about this so far in other groups, but not many answers yet. Any ideas?

Thanks,

Luis

Here is what I did. I added another button and htmlinputhidden.

<asp:Button ID="btnPopup1" runat="server" Text="Popup" OnClientClick="javascript:PopupOrder(); return true;" /><input type="hidden" runat="server" id="hidOrderFlag" value="0" /><input type="button" id="btnPopup2" runat="server" style="display:none;" /><cc1:ModalPopupExtenderID="ModalPopupExtender1" TargetControlID="btnPopupOrder" PopupControlID="pnlOrder" runat="server" BackgroundCssClass="modalBackground" ></cc1:ModalPopupExtender>

 <script type="text/javascript">function PopupOrder(){ setInterval('Popup()', 100);}function Popup(str){flag = document.getElementById('hidOrderFlag');if (flag){if (flag.value == '1'){document.getElementById('btnPopup2').click();flag.value = '0';}}}</script>

Code Behind:

Protected Sub btnPopup1_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles btnPopup1.Click'show grouped materials 'Do something to populate data to controls in modal popup hidOrderFlag.Value ="1"End Sub

Hope it helps.

Here is what I did. I added another button and htmlinputhidden.

<asp:Button ID="btnPopup1" runat="server" Text="Popup" OnClientClick="javascript:PopupOrder(); return true;" /><input type="hidden" runat="server" id="hidOrderFlag" value="0" /><input type="button" id="btnPopup2" runat="server" style="display:none;" /><cc1:ModalPopupExtenderID="ModalPopupExtender1" TargetControlID="btnPopup2" PopupControlID="pnl" runat="server" BackgroundCssClass="modalBackground" ></cc1:ModalPopupExtender>

 <script type="text/javascript">function PopupOrder(){ setInterval('Popup()', 100);}function Popup(str){flag = document.getElementById('hidOrderFlag');if (flag){if (flag.value == '1'){document.getElementById('btnPopup2').click();flag.value = '0';}}}</script>

Code Behind:

Protected Sub btnPopup1_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles btnPopup1.Click

 'Do something to populate data to controls in modal popup hidOrderFlag.Value ="1"End Sub

Hope it helps.

Thanks...I'll try this.

Luis