Wednesday, March 28, 2012

Modal Popup disappears on any post back

Currently I have User Control that has radio button list that changes options on the user control, some text boxes and a button that updates a list box with options selected within the user control. Any object that causes a post back seems to cause my modal popup control to disappear. How can I better control this? There are three postback operations that the user will go through in order for thems to get the correct selection - which should cause the modal to disappear and an update to happen to the calling page controls.

Any suggestions?

How about putting the UserControl inside an UpdatePanel if it isn't? Is this what you are trying to do? (The WebUserControl you'll have to supply.)

<%@. Page Language="C#" %><%@. Register src="http://pics.10026.com/?src=WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function Show() { $get('WC').style.visibility = 'visible'; } function Hide() { $get('WC').style.visibility = 'hidden'; } </script> <button id="show" onclick="Show()"> show</button> <button id="hide" onclick="Hide()"> hide</button> <div id="WC" style="visibility: hidden"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <uc1:WebUserControl ID="WebUserControl1" runat="server" /> </ContentTemplate> </asp:UpdatePanel> <button id="close" onclick="Hide()">close</button> </div> </div> </form></body></html>

I do have my user control within the UpdatePanel, currently. Within my user control there are database queries and options (basically its a search utility that give the user multiple options for searching the database to find the correct record). Once they have filled in their options within the search utility they are given a listbox (still within my user control) to select a record. Once the record is selected the calling page gets a control updated with the record ID which then causes a textchanged event that pulls up that record detail.

I wanted to utilize the modal popup extender so that when they search they can not horse around on the calling page. I do have have a version of this working with showing and hiding the update panel directly - however the modal popup extender (still using the atlas control) seemed to be a better option for this type of implementation.

By the way thanks so much for your quick response...


I decided it might be easier to give you my page code: Keep in mind that the problem is the post backs within my User Control. Any post back within the User Control itself cause the Modal Popup to become unmodal...Tongue Tied

1<%@. Page Language="VB" AutoEventWireup="True" %>23<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>4<%@. Register src="http://pics.10026.com/?src=PagesAndControls_View/SiteSelection.ascx" TagName="SiteSelection"5 TagPrefix="uc1" %>6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">78<script runat="server">910 Protected Sub OkButton_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs)11 Label1.Text = "OK Button Clicked"12 Me.txtSiteID.Text = "OK Button"13 Dim myPopUp As ModalPopupExtender = Me.ModalPopupExtender114 myPopUp.Hide()15 End Sub1617 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)18 Label2.Text = "Other Button Clicked"19 Label1.Text = "Other Button Clicked"20 End Sub21 Protected Sub myTestScript()22 Label2.Text = "text script initiated"23 End Sub24</script>2526<html xmlns="http://www.w3.org/1999/xhtml">27<head runat="server">28 <title>Test Selection Page29 </title>30</head>31<body>32 <form id="form1" runat="server">33 <asp:ScriptManager ID="ScriptManager1" runat="server">34 </asp:ScriptManager>35 <div>36 <asp:UpdatePanel ID="PagePanel" runat="server">37 <ContentTemplate>38 <asp:Label ID="Label1" runat="server" Text="Enter Site ID or Search:"></asp:Label>39 <asp:TextBox ID="txtSiteID" runat="server"></asp:TextBox>40 <asp:ImageButton ID="SearchButton" ImageUrl="~/images/search.jpg" runat="server" />41 <asp:Panel ID="Panel1" CssClass="modalPopup" runat="server" Style="display: none"42 Wrap="False">43 <uc1:SiteSelection ID="SiteSelection1" runat="server" />44 <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>45 <div align="center">46 <asp:ImageButton ImageUrl="~/images/checkmark2.jpg" ID="OkButton" runat="server"47 OnClick="OkButton_Click" />48 <asp:ImageButton ImageUrl="~/images/closebutton5.jpg" ID="CancelButton" runat="server" />49 </div>50 </asp:Panel>51<!--52 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />53 -->54 <cc1:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="SearchButton" runat="server"55 PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"56 CancelControlID="CancelButton" OkControlID="OkButton" />57 </ContentTemplate>58 </asp:UpdatePanel>59 </div>60 </form>61</body>62</html>

Are you using the latest ModalPopupExtender in the AJAX Control Toolkit release 61020?

http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit&ReleaseId=825


I'm pretty sure that I am. I thought maybe my modal popus was outdated, so I deinstalled the atlas and installed the ajax version just yesterday and the problem persisted


Hey.

Was any progress made on this? I'm experiencing the problems now too (with the December Futures, and latest Toolkit)

Thanks,
Chris


The way I fixed this modal problem was by defining a boolean property PopupOpen (and keeping it in session). In the pre_render of the control i call modalpopupextender.show if PopopOpen is true. By setting the property I can control whether the popup is Open (you can wrap this in a user-control).

Hope you get the idea,

Martijn


Thanks...

I just managed to figure it out a different way. I addedUpdateMode="conditional" to the UpdatePanel on the page. Works a treat!

No comments:

Post a Comment