I'm using the September preview to create a modal pop up. But the twist here is that I would like the popup toload in a custom page.
In my case, the sample file, TrackingNumber.ascx, is to be displayed when the modal popup is displayed.
It mostly works. If the OK or Exit buttons are clicked, the popup closes normally.
When the Save button is clicked,however, information is written to the database, and the label shows the time when the button was clicked,butnow the OK and Exit buttons stop working.
Any suggestions as what I am doing wrong? Is there a better way to encapsulate user controls in a modal pop up?
Thanks!
default2.aspx:
<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<%@dotnet.itags.org. Register src="http://pics.10026.com/?src=TrackingNumber.ascx" TagName="TrackingNumber" TagPrefix="uc1" %>
<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Test Modal PopUps With Custom User Controls</title>
<link href="http://links.10026.com/?link=ModalPopUp.css" rel="stylesheet" type="text/css" />
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
</head>
<body>
<form id="form1" runat="server">
<div>
<AtlasToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" >
<AtlasToolkit:ModalPopupProperties
TargetControlID="LinkButton1"
PopupControlID="UpdatePanel1"
BackgroundCssClass="modalBackground"
DropShadow="True"
OkControlID="TrackingNumber1$OkButton"
CancelControlID="TrackingNumber1$CancelButton"
/>
</AtlasToolkit:ModalPopupExtender>
<asp:LinkButton ID="LinkButton1" runat="server" Style='z-index: 102; left: 304px;
position: absolute; top: 14px">LinkButton</asp:LinkButton>
<atlas:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<uc1:TrackingNumber ID="TrackingNumber1" runat="server" />
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="TrackingNumber1$btnSave" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
</div>
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
</references>
<components>
</components>
</page>
</script>
</body>
</html>
TrackingNumber.ascx:
<%@dotnet.itags.org. Control Language="VB" AutoEventWireup="true" CodeFile="TrackingNumber.ascx.vb" Inherits="TrackingNumber" EnableViewState="true" %>
<asp:Panel ID="PanelTrackingNumber" runat="server" BackColor="#DAE8F4" Font-Bold="True" Height="173px"
Style='z-index: 104; position: relative;" Width="285px" >
<asp:TextBox ID="txtTrackingNumber" runat="server" Style='z-index: 100; left: 40px;
position: absolute; top: 83px"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Font-Bold="False" Style='z-index: 101; left: 28px;
position: absolute; top: 53px" Text="What is the tracking Number?"></asp:Label>
Tracking number of tracking cover sheet for records.
<asp:Label ID="Label10" runat="server" ForeColor="Red" Height="10px" Style='z-index: 102;
left: 212px; position: absolute; top: 55px" Text="*" Width="13px"></asp:Label>
<asp:Label ID="Label13" runat="server" ForeColor="Red" Style='z-index: 103; left: 8px;
position: absolute; top: 149px" Text="* Optional"></asp:Label>
<asp:Button ID="OkButton" runat="server" Style='z-index: 104; left: 10px; position: absolute;
top: 115px" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Style='z-index: 105; left: 98px; position: absolute;
top: 145px" Text="Exit" />
<asp:Button ID="btnSave" runat="server" Style='z-index: 106; left: 59px; position: absolute;
top: 111px" Text="Save" />
<asp:Label ID="lblNow" runat="server" Style='z-index: 108; left: 112px; position: absolute;
top: 111px" Text="Label" Width="119px"></asp:Label>
</asp:Panel>
TrackingNumber.ascx.vb:
Imports System.Data.SqlClient
Partial Class TrackingNumber
Inherits System.Web.UI.UserControl
Protected Sub WriteToDB()
Dim oCon As SqlConnection
Dim oComm As SqlCommand
oCon = New SqlConnection("server=MODREP1;database=SAP_DB;uid=UserId;pwd=xxxx;")
oCon.Open()
oComm = New SqlCommand("UPDATE Records SET Data='" & Now.ToLongTimeString & "' WHERE ID=4", oCon)
oComm.ExecuteNonQuery()
oComm.Dispose()
oCon.Dispose()
End Sub
Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click
WriteToDB()
Me.lblNow.Text = Now.ToLongTimeString
End Sub
End Class
ModalPopUp.css:
/*Modal Popup*/
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
I tried placing the ModalPopupExtender tag inside the UpdatePanel. I've tried placing the ModalPopupExtender in the .ascx file, and with & with out the Panel elements. In the lastest configuration, clicking the OK and Exit buttons causes the popup to close normally. But when the Save button is clicked to perform server side processing, the following happens:
data is written to the database (desired effect)
The error is probably because the postback within the UpdatePanel stomps the relevant DOM elements and then the event handlers ModalPopup set up are gone. You might try sticking the ModalPopupExtender tag inside the UpdatePanel, too, as this often helps.
One other thing people sometimes have success with is wrapping the Save button in an UpdatePanel.
I don't know if you have fixed this issue, or if you even look again, but in your server-side code you can call ModalPopupExtender1.Show();
which will display the modal dialog box after the post back.
