Modal Popup Challenge.

The challenge.

I've been working on the following problem for about a week. I have a multiview with six views. I need to make a popup for date fields. Each view may have one or more date fields. The popup must open from a mouse click on an image control. I would like to have only one calendar control in the HTML. It can be done with either the Popup or Modal Popup Atlas controls. If you use a Popup control you must add a "Cancel" button so you can return no date. The screen can not flicker or take for ever once you have selected a date from the date control.

What I've learned.

One: You must put thePopupControlExtender or ModalPopupExtender inside the view that holds the TargetControlID. If not you will get an error on the first view because it can not fine the TargetControlID on the other views that are not active (showing). One side effect of putting these controls inside of a view is that you can no longer see you html in the Design mode. You get the following "Error Rendering Control – Mulitiview. An unhandled exception has occurred." Even with this error in Design mode everthing compiles and seems to run OK. The Following are the examples that I used.

<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">

<atlasToolkit:PopupControlProperties

TargetControlID="TextBox_CUS_DATE_OF_BIRTH"

PopupControlID="Panel1"

Position="Bottom" />

</atlasToolkit:PopupControlExtender>

<atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server">

<atlasToolkit:ModalPopupProperties

TargetControlID="ImageButton_CUS_DATE_OF_BIRTH"

PopupControlID="Panel1"

BackgroundCssClass="modalBackground"

DropShadow="true"

OkControlID="OkButton"

OnOkNormalSubmit="false"

OnOkScript="onOk()"

CancelControlID="CancelButton"

OnCancelScript="onCancel()" />

</atlasToolkit:ModalPopupExtender>

Two: To get the popup to work off the mouse click of an image you need to set the onClientClick="return false;". Example:

<asp:ImageButton ID="ImageButton_CUS_DATE_OF_BIRTH" runat="server" ImageUrl="~/Images/Calendar.jpg" CssClass="imageButton" OnClientClick="return false;" />

Three: Examples of the Calendars used for both Popup and Modal Popup.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none">

<atlas:UpdatePanel ID="UpdatePanel1" runat="server"

EnableViewState="true" Mode="always">

<ContentTemplate>

<center>

<asp:Calendar ID="Calendar1" runat="server"

BackColor="White" BorderColor="#999999"

CellPadding="1" DayNameFormat="Shortest"

Font-Names="Verdana" Font-Size="8pt"

ForeColor="Black" Width="160px"

OnSelectionChanged="Calendar1_SelectionChanged">

<SelectedDayStyle BackColor="#666666"

Font-Bold="True" ForeColor="White" />

<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black"/>

<SelectorStyle BackColor="#CCCCCC" />

<WeekendDayStyle BackColor="#FFFFCC" />

<OtherMonthDayStyle ForeColor="#808080" />

<NextPrevStyle VerticalAlign="Bottom" />

<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True"

Font-Size="7pt" />

<TitleStyle BackColor="#999999" BorderColor="Black"

Font-Bold="True" />

</asp:Calendar>

<asp:Button ID="OkButton" runat="server" Text="OK">

</asp:Button>

<asp:Button ID="CancelButton" runat="server"

Text="Cancel"></asp:Button>

</center>

</ContentTemplate>

</atlas:UpdatePanel>

</asp:Panel>

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">

<atlas:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<center>

<asp:Calendar ID="Calendar1" runat="server"

BackColor="White" BorderColor="#999999"

CellPadding="1" DayNameFormat="Shortest"

Font-Names="Verdana" Font-Size="8pt"

ForeColor="Black" Width="160px"

OnSelectionChanged="Calendar1_SelectionChanged" >

<SelectedDayStyle BackColor="#666666" Font-Bold="True"

ForeColor="White" />

<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />

<SelectorStyle BackColor="#CCCCCC" />

<WeekendDayStyle BackColor="#FFFFCC" />

<OtherMonthDayStyle ForeColor="#808080" />

<NextPrevStyle VerticalAlign="Bottom" />

<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True"

Font-Size="7pt" />

<TitleStyle BackColor="#999999" BorderColor="Black"

Font-Bold="True" />

</asp:Calendar>

<asp:Button ID="Button1" runat="server" Text="Cancel"

OnClick="Button1_Click" />

</center>

</ContentTemplate>

</atlas:UpdatePanel>

</asp:Panel>

Four: This is my code behind examples for both Popup and Modal Popup.

Code for Modal Popup.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Calendar cTemp = (Calendar)sender;

TextBox_CUS_DATE_OF_BIRTH.Text = cTemp.SelectedDate.ToShortDateString();

}

Code for Popup.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Calendar cTemp = (Calendar)sender;

PopupControlExtender.GetCurrent(this.Page).Commit (cTemp.SelectedDate.ToShortDateString());

}

Final results.

Popup control: When I try to use a Popup control everthing works until I try to click on a date in the calendar control. It returns nothing back to the TextBox.

Modal Popup control: When I try to use a Modal Popup control everthing works until I try to click on a date in the calendar control. Itdoes return a date back to the TextBox, but only the Dropdownlist boxes become active. Everything else is still grayed out.

If you have an ideas on why this will not work or an example of this working please post it. Thanks.

Could you please post a complete sample page (simplified as much as possible)? We'd love to look into this.

Here is a simple example that I created using a Modal Popup. You can replace the Modal Popup with just the Popup control and it fails at the same spot.

<%

@.PageCodeFile="ExampleModal.aspx.cs"AutoEventWireup="true"EnableViewState="true"Inherits="ExampleModal"Language="C#" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Customers</title>

</

head>

<

body><formid="formExampleModal"runat="server"><atlas:ScriptManagerID="ScriptMgr"runat="server"EnablePartialRendering="true"></atlas:ScriptManager><atlas:UpdatePanelID="UpdatePanelMain"runat="server"Mode="always"><ContentTemplate><divid="divPage"><tableid="TableMenu"width="100%"><tr><tdcolspan="10"><asp:MenuID="MenuTab"runat="server"Orientation="Horizontal"OnMenuItemClick="MenuTab_MenuItemClick"><Items><asp:MenuItemText="View one"Value="0"></asp:MenuItem><asp:MenuItemText="View two"Value="1"></asp:MenuItem></Items></asp:Menu></td></tr><tr><td><asp:MultiViewID="MultiViewCustomer"runat="server"><asp:ViewID="View1"runat="server"><tablestyle="width: 100%;"><tr><tdalign="right"><asp:LabelID="Label1"runat="server"EnableViewState="False"TabIndex="-1"Text="Textbox Date"></asp:Label></td><tdalign="left"><asp:TextBoxID="TextBox1"runat="server"Width="100px"TabIndex="1"></asp:TextBox></td><tdalign="left"><asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Calendar.jpg"OnClientClick="return false;"/></td><tdalign="right"><asp:LabelID="Label2"runat="server"EnableViewState="False"TabIndex="-1"Text="Test Dropdown"></asp:Label></td><tdalign="left"><asp:DropDownListID="DropDownList1"runat="server"TabIndex="2"Width="100px"></asp:DropDownList></td></tr></table><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="ImageButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"OnCancelScript="onCancel()"/></atlasToolkit:ModalPopupExtender></asp:View><asp:ViewID="View2"runat="server"><tablestyle="width: 100%;"><tr><tdalign="right"><asp:LabelID="Label3"runat="server"EnableViewState="False"TabIndex="-1"Text="Textbox Date"></asp:Label></td><tdalign="left"><asp:TextBoxID="TextBox3"runat="server"Width="100px"TabIndex="1"></asp:TextBox></td><tdalign="left"><asp:ImageButtonID="ImageButton2"runat="server"ImageUrl="~/Images/Calendar.jpg"OnClientClick="return false;"/></td><tdalign="right"><asp:LabelID="Label4"runat="server"EnableViewState="False"TabIndex="-1"Text="Test Dropdown"></asp:Label></td><tdalign="left"><asp:DropDownListID="DropDownList2"runat="server"TabIndex="2"Width="100px"></asp:DropDownList></td></tr></table><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender2"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="ImageButton2"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"OnCancelScript="onCancel()"/></atlasToolkit:ModalPopupExtender></asp:View></asp:MultiView></td></tr></table></div></ContentTemplate></atlas:UpdatePanel><asp:PanelID="Panel1"runat="server"Style="display: none"><atlas:UpdatePanelID="UpdatePanel1"runat="server"EnableViewState="true"Mode="always"><ContentTemplate><center><asp:CalendarID="Calendar1"runat="server"BackColor="White"BorderColor="#999999"CellPadding="1"DayNameFormat="Shortest"Font-Names="Verdana"Font-Size="8pt"ForeColor="Black"Width="160px"OnSelectionChanged="Calendar1_SelectionChanged"><SelectedDayStyleBackColor="#666666"Font-Bold="True"ForeColor="White"/><TodayDayStyleBackColor="#CCCCCC"ForeColor="Black"/><SelectorStyleBackColor="#CCCCCC"/><WeekendDayStyleBackColor="#FFFFCC"/><OtherMonthDayStyleForeColor="#808080"/><NextPrevStyleVerticalAlign="Bottom"/><DayHeaderStyleBackColor="#CCCCCC"Font-Bold="True"Font-Size="7pt"/><TitleStyleBackColor="#999999"BorderColor="Black"Font-Bold="True"/></asp:Calendar><asp:ButtonID="OkButton"runat="server"Text="OK"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></center></ContentTemplate></atlas:UpdatePanel></asp:Panel></form><scripttype="text/javascript">function onOk()

{

}

function onCancel()

{

}

</script>

</

body>

</

html>

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

using

AtlasControlToolkit;

public

partialclassExampleModal : System.Web.UI.Page

{

public ExampleModal()

{

Page.Load +=

newEventHandler(Page_Load);

}

protectedoverridevoid OnInit(EventArgs e)

{

base.OnInit(e);

}

protectedvoid Page_Load(object sender,EventArgs e)

{

if (!IsPostBack)

{

MultiViewCustomer.ActiveViewIndex = 0;

MenuTab.Items[0].Selected =

true;

}

}

protectedvoid MenuTab_MenuItemClick(object sender,MenuEventArgs e)

{

MultiViewCustomer.ActiveViewIndex =

Int32.Parse(e.Item.Value);

}

protectedvoid Calendar1_SelectionChanged(object sender,EventArgs e)

{

Calendar cTemp = (Calendar)sender;

TextBox1.Text = cTemp.SelectedDate.ToShortDateString();

TextBox3.Text = cTemp.SelectedDate.ToShortDateString();

}

}

/*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;

}

Once again any help would be great. If you need anything else let me know.

I'm not sure I've captured all your requirements, but please have a look at the page below as I believe it does what you're asking for.

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using AtlasControlToolkit;public partialclass ExampleModal : System.Web.UI.Page{public ExampleModal() { Page.Load +=new EventHandler(Page_Load); }protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) { MultiViewCustomer.ActiveViewIndex = 0; MenuTab.Items[0].Selected =true; } }protected void MenuTab_MenuItemClick(object sender, MenuEventArgs e) { MultiViewCustomer.ActiveViewIndex = Int32.Parse(e.Item.Value); }protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Calendar cTemp = (Calendar)sender; TextBox1.Text = cTemp.SelectedDate.ToShortDateString(); TextBox3.Text = cTemp.SelectedDate.ToShortDateString(); PopupControlExtender.GetCurrent(Page).Commit(Calendar1.SelectedDate.ToShortDateString()); }}

<%@. Page CodeFile="Default10.aspx.cs" AutoEventWireup="true" EnableViewState="true" Inherits="ExampleModal" Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!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>Customers</title> <style type="text/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; }</style></head><body> <form id="formExampleModal" runat="server"> <atlas:ScriptManager ID="ScriptMgr" runat="server" EnablePartialRendering="true"> </atlas:ScriptManager><%-- <atlas:UpdatePanel ID="UpdatePanelMain" runat="server" Mode="always"> <ContentTemplate>--%> <div id="divPage"> <table id="TableMenu" width="100%"> <tr> <td colspan="10"> <asp:Menu ID="MenuTab" runat="server" Orientation="Horizontal" OnMenuItemClick="MenuTab_MenuItemClick"> <Items> <asp:MenuItem Text="View one" Value="0"></asp:MenuItem> <asp:MenuItem Text="View two" Value="1"></asp:MenuItem> </Items> </asp:Menu> </td> </tr> <tr> <td> <asp:MultiView ID="MultiViewCustomer" runat="server"> <asp:View ID="View1" runat="server"> <table style="width: 100%;"> <tr> <td align="right"> <asp:Label ID="Label1" runat="server" EnableViewState="False" TabIndex="-1" Text="Textbox Date"></asp:Label> </td> <td align="left"> <asp:TextBox ID="TextBox1" runat="server" Width="100px" TabIndex="1"></asp:TextBox> </td> <td align="left"> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/atlas_title.jpg" OnClientClick="return false;" /> </td> <td align="right"> <asp:Label ID="Label2" runat="server" EnableViewState="False" TabIndex="-1" Text="Test Dropdown"></asp:Label> </td> <td align="left"> <asp:DropDownList ID="DropDownList1" runat="server" TabIndex="2" Width="100px"> </asp:DropDownList> </td> </tr> </table> <atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"> <atlasToolkit:PopupControlProperties TargetControlID="ImageButton1" PopupControlID="Panel1" CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;" /> </atlasToolkit:PopupControlExtender> </asp:View> <asp:View ID="View2" runat="server"> <table style="width: 100%;"> <tr> <td align="right"> <asp:Label ID="Label3" runat="server" EnableViewState="False" TabIndex="-1" Text="Textbox Date"></asp:Label> </td> <td align="left"> <asp:TextBox ID="TextBox3" runat="server" Width="100px" TabIndex="1"></asp:TextBox> </td> <td align="left"> <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/atlas_title.jpg" OnClientClick="return false;" /> </td> <td align="right"> <asp:Label ID="Label4" runat="server" EnableViewState="False" TabIndex="-1" Text="Test Dropdown"></asp:Label> </td> <td align="left"> <asp:DropDownList ID="DropDownList2" runat="server" TabIndex="2" Width="100px"> </asp:DropDownList> </td> </tr> </table> <atlasToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server"> <atlasToolkit:PopupControlProperties TargetControlID="ImageButton2" PopupControlID="Panel1" CommitProperty="commit" CommitScript="$('TextBox3').value = $('ImageButton2').commit;" /> </atlasToolkit:PopupControlExtender> </asp:View> </asp:MultiView> </td> </tr> </table> </div><%-- </ContentTemplate> </atlas:UpdatePanel>--%> <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color:Gray"> <atlas:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="true" Mode="always"> <ContentTemplate> <center> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </center> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel> </form></body></html>

This has a couple of issues.

1). Can not change month without calendar disappearing.

2). Loses focus. I can set focus in code behind but if you selected the image a second time focus can not be set. This is not good for an entry screen.

Other notes:

This code never gets executed or does not work.

CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;"

and

PopupControlExtender.GetCurrent(Page).Commit(Calendar1.SelectedDate.ToShortDateString());

You can remove these lines and get the same results. These lines of code only seems to work if the PopupControlExtender is nested inside of the panel that is referencing, like this...

<asp:PanelID="Panel1"runat="server"CssClass="popupControl">

<atlas:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="ImageButton1" PopupControlID="Panel1"
CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;" />
</atlasToolkit:PopupControlExtender>
<center>

<asp:CalendarID="Calendar1"runat="server"BackColor="White"BorderColor="#999999"CellPadding="1"DayNameFormat="Shortest"Font-Names="Verdana"Font-Size="8pt"

etc...

The text value is being set by this code in the code behind.

Calendar cTemp = (Calendar)sender;
TextBox1.Text = cTemp.SelectedDate.ToShortDateString();
TextBox3.Text = cTemp.SelectedDate.ToShortDateString();

To make this work I would have to have a calendar control like this for input field that is a date. This wold not be good. I have one screen that uses multiviews and that have thirty plus dates on it.

Either way I still will have problem of changing months.

If I'm not correct in what I say, please let me know for I have just started working with Atlas.

I think maybe something went weird when you tried to copy the code/codebehind I posted? You report that you can't change months without the calendar disappearing, but that works fine for me with the modifications I made.

If I remove the lines of code that you suggest in the HTML then every time you move between views the mulitview disappears for about two-three seconds. This why I started using Atlas, to avoid the screen redrawing all the time. Is this my only choice?

////The lines that I would need to remove...////
<atlas:UpdatePanel ID="UpdatePanelMain" runat="server" Mode="always">
<ContentTemplate>

Untilwork item 711 is fixed, that may be your best option. However, I'll note that switching to debug=false in your web.config should speed things up - perhaps enough that this is tolerable?

David, thanks for your help. I will go forward using the popup and I will keep checking on item 711.

just found this thread. I am trying to do something similar only my popup does not NEED to be modal and I am working with master pages.

However I cannot get the calendar click event to write to the textbox. I have copied the example provided above !! Any ideas anyone ?

ps i have changeset 5220 so the fix for 711 is in my version of atlas !!
Could you please post a simple, complete sample of what you're trying to do that's not working with the 60914 release? Thanks.

Hello David, thanks for replying. Sorry for not posting sooner... i have been away for the weekend.

I attach part of my code. I am using a master page... there are two date "popup" controls here. One attempts to use the click of an image button to popup the calendar and then pass the selected to a text box. One just uses the standard example supplied with atlas (textbox gets focus, popup calendar displays, select date..date goes into text box).

the one that uses the image button pops up the calendar ok but when the date is selected an error occurrs on the page i think an object is not getting set somewhere. the one that uses the standard example supplied with atlas works fine but itsnt really what i want as i want the user to be able to type a date OR pop up a calendar.

incidentally i am using july ctp release (only just noticed that there was a september release when i looked for 60914 based on your comment above). Do i need to un-install atlas and do a clean install from the september ctp or will it update everything correctly if i just install septembers "on top" of july's ?)

Here is an extract of apx code:

<%@. Page Language="C#" MasterPageFile="~/JSAACMaster.master" AutoEventWireup="true" CodeFile="ExistingCustomer.aspx.cs" Inherits="ExistingCustomer" Title="Existing Customer" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasControlToolkit" %><%@. MasterType VirtualPath="~/JSAACMaster.master" %><asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="Server"><!-- GC Update panels need a script manager control to function correctly...atlas uses javascript to function --><atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"></atlas:ScriptManager><AtlasControlToolkit:PopupControlExtender ID="pcePopUpDates" runat="server"> <AtlasControlToolkit:PopupControlProperties TargetControlID="imbReqDateCalendar" PopupControlID="Panel1" ExtenderControlID="pcePopUpDates" PageRequestManagerID="_PageRequestManager" CommitProperty="commit" CommitScript="$('txtReqDate').value = $('imbReqDateCalendar').commit;"/> <AtlasControlToolkit:PopupControlPropertiesTargetControlID="txtPostDate"PopupControlID="Panel2"Position="Bottom"ExtenderControlID="pcePopUpDates"PageRequestManagerID="_PageRequestManager" /></AtlasControlToolkit:PopupControlExtender><table style="width: 1139px; height: 232px; padding-right: 25px; padding-left: 25px; padding-bottom: 25px; margin: 25px; padding-top: 25px; vertical-align: middle; text-align: left;"> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> UTN:<br /> <asp:TextBox ID="txtUTN" runat="server" Width="148px"></asp:TextBox><asp:RequiredFieldValidator ID="rfvUTN" runat="server" ErrorMessage="UTN field must be completed" ControlToValidate="txtUTN" Height="6px" Width="1px">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> TITLE:<br /> <asp:TextBox ID="txtTitle" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvTitle" runat="server" ErrorMessage="Title field must be completed" ControlToValidate="txtTitle">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> RANK:<br /> <asp:TextBox ID="txtRank" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvRank" runat="server" ErrorMessage="Rank field must be completed" ControlToValidate="txtRank">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> SURNAME:<br /> <asp:TextBox ID="txtSurname" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvSurname" runat="server" ErrorMessage="Surname field must be completed" ControlToValidate="txtSurname">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> SERVICE NUMBER:<br /> <asp:TextBox ID="txtServNo" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvServNo" runat="server" ErrorMessage="Service No field must be completed" ControlToValidate="txtServNo">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> INITIALS:<br /> <asp:TextBox ID="txtInits" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvInits" runat="server" ErrorMessage="Initials field must be completed" ControlToValidate="txtInits">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> UIN:<br /> <asp:TextBox ID="txtUIN" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvUIN" runat="server" ErrorMessage="UIN field must be completed" ControlToValidate="txtUIN">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> ALPHA CODE:<br /> <asp:DropDownList ID="ddlAlpha" runat="server" Width="154px"></asp:DropDownList><asp:RequiredFieldValidator ID="rfvAlpha" runat="server" ErrorMessage="Alpha Code field must be completed" ControlToValidate="ddlAlpha">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> REQUIRED DATE:<br /> <asp:TextBox ID="txtReqDate" runat="server"></asp:TextBox><asp:ImageButton ID="imbReqDateCalendar" runat="server" OnClientClick="return false;" ImageUrl="~/images/calendar.gif" /><asp:RequiredFieldValidator ID="rfvReqDate" runat="server" ControlToValidate="txtReqDate" ErrorMessage="Required Date field must be completed">*</asp:RequiredFieldValidator> <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="txtReqDate" ErrorMessage="Invalid Date"></asp:CustomValidator><br /><!-- Atlas popup control requires panel to function --> <%-- ID="Panel1" runat="server" style="visibility:hidden" CssClass="popupControl">--%> <asp:Panel ID="Panel1" runat="server" style="display:none"><!-- update panel controlled by scriptmanager and contains calendar which will be the "popup" linked to the textbox click--> <atlas:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="true" Mode="Always" > <ContentTemplate> <center> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </center> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> POSTING DATE:<br /> <asp:TextBox ID="txtPostDate" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvPostDate" runat="server" ControlToValidate="txtPostDate" ErrorMessage="Posting Date field must be completed">*</asp:RequiredFieldValidator> <asp:CustomValidator ID="CustomValidator2" runat="server" ControlToValidate="txtPostDate" ErrorMessage="Invalid Date" SetFocusOnError="True"></asp:CustomValidator><br /> <asp:Panel ID="Panel2" runat="server" style="visibility:hidden" CssClass="popupControl"> <atlas:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <center> <asp:Calendar ID="Calendar2" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar2_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </center> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel> </td> </tr> <tr> <%--inserted empty row for spacing--%> </tr>
 here is the code behind:
  
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using EDS.UK.AFPAA.CASS.JSAAC.UIP;using Microsoft.ApplicationBlocks.UIProcess;using AtlasControlToolkit;public partialclass ExistingCustomer : PageBase{protected void Page_Load(object sender, EventArgs e) { Master.NavigationEventHandler +=new Master.MenuResponseEvent(Master_MenuEvent); Master.GetMasterResultsPanel.Visible =false; }#region UIP Plumbingprivate ApplicantController myController {get {return (ApplicantController)this.Controller; } }#endregion protected void Calendar1_SelectionChanged(object sender, EventArgs e) {//// Popup result is the selected date linked to required date text box //PopupControlExtender.GetCurrent(this.Page).Commit(Calendar1.SelectedDate.ToShortDateString()); ////txtReqDate.Text = PopupControlExtender.GetCurrent(this.Page).Commit(Calendar1.SelectedDate.ToShortDateString()); Calendar cTemp = (Calendar)sender;this.txtReqDate.Text = cTemp.SelectedDate.ToShortDateString();//TextBox3.Text = cTemp.SelectedDate.ToShortDateString(); PopupControlExtender.GetCurrent(this.Page).Commit(cTemp.SelectedDate.ToShortDateString()); }protected void Calendar2_SelectionChanged(object sender, EventArgs e) {// Popup result is the selected date linked to posting date text box PopupControlExtender.GetCurrent(this.Page).Commit(Calendar2.SelectedDate.ToShortDateString());//txtReqDate.Text = Calendar1.SelectedDate.ToShortDateString(); }}
 

Both popups behave as I'd expect when I try with 60914. Please switch to that and give it another try. To upgrade, you should be able to install "over top of" a previous release. That may leave a couple of unnecessary files behind, but things should work just fine doing that. Let me know if 60914 doesn't solve the problem here!

i have downloaded 60914 but there is no atlas setup msi as per the july ctp. The only vsi i can find is for the extenders. When i run this i get installation errors. Do i just have to open and compile the solution and place the new dll's in my atlas project then run the new extender vsi's ??

Sorry im a little confused !!

Modal Popup Extender and OkControID

Hello misters,

I have a page ASPX with ModalPopupExtender control, with the following properties:

TargetControlID="btnAnyadirObs"
PopupControlID="Panel1"

OkControlID="btnAnyadirObsAceptar"
CancelControlID="btnAnyadirObsCancel"
OnOkScript="onYes()"
OnCancelScript="onCancel()"

I have a Panel (Panel1) with two buttons: btnAnyadirObsAceptar and btnAnyadirObsCancel.

The buttons have Click event (code-behind .cs).

My trouble is that it is not execute Click event for button btnAnyadirObsAceptar (the OkControlID). I want to press the button OK in modal popup extender and I call Click event (server event of code-behind, file .cs).

Only execute onYes function javascript but it fails because typeof(Sys.WebForms.PostBackAction) == "undefined"

For javascript function onCancel() , $("Label1") fails.

See all code below, please.

The code begins here:

<asp:Label ID="Label1" runat="server" />

... more code...

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

TargetControlID="btnAnyadirObs"
PopupControlID="Panel1"
OkControlID="btnAnyadirObsAceptar"
CancelControlID="btnAnyadirObsCancel"
OnOkScript="onYes()"
OnCancelScript="onCancel()"

DropShadow="true" PopupDragHandleControlID="Panel3">
</cc1:ModalPopupExtender>

<asp:Panel ID="Panel1" runat="server" Style="display: none">

<asp:Panel ID="Panel3" runat="server"><div>TITLE</div></asp:Panel>

<filtros:EmbeddedUserControlLoader ID="UCObservacionesPopup" runat="server" AssemblyName="TareaRetenida.UC"
ControlClassName="UCRetenidaCentrolControlObservacionesPopup" ControlNamespace="TareaRetenida.UC" />

<controles:Boton ID="btnAnyadirObsAceptar" runat="server" CausesValidation="false" Text="Resx OK" OnClick="btnAnyadirObsAceptar_Click" />

<controles:Boton ID="btnAnyadirObsCancel" runat="server" CausesValidation="false" Text="Resx Cancel" OnClick="btnAnyadirObsCancel_Click" />

</asp:Panel>

The javascript functions:

function onYes()

{

var idBoton= "MY CLIENTID OF BUTTON OK";
if (typeof(Sys.WebForms.PostBackAction) != "undefined")
{
var postBack = new Sys.WebForms.PostBackAction();
postBack.set_target(idBoton);
postBack.set_eventArgument('');
postBack.performAction();
}

}

function onCancel()
{
//no postback necessary
try
{
$('Label1').innerText = 'Action canceled';
}
catch(err)
{
alert('onCancel' + "Error " + err.description);
}
}

Thanks in advanced, greetings regards

Hi,

you need to clear the OKControlID property otherwise the postback won't be propagated to the server.

Grz, Kris.

I am having the same issue. I cleared the OKControlID and now my js is not running? Is there something else I need to do?

Hi Alice,

myNameIsAlice:

I cleared the OKControlID and now my js is not running?

which js isn't running? Know that clearing the OKControlID just makes it a normal postbacking control again.

Grz, Kris.

Modal Popup Help

I am able to wire up an AJAX ModalPopup and everything works fine. However, what I want to do is execute the following from the Code Behind to bind data to a formview

protectedvoid DisplayDetailView(object sender,CommandEventArgse)

{

DataTable dataTable =CarManager.FindCarByUniqueID(e.CommandArgument.ToString());

DetailFormView.DataSource = dataTable;

DetailFormView.DataBind();

}

How do I do this. I tried using OnLoad, OnPreRender in both the link button and the ModalPopup Extender, which works when the page loads, but thats not what I need. I tried it using OnClientClick, OnCommand, OnClick on the link button being extended by the ModalPopupExtender, but it never hits the coad behind.

Please Help!!!!

Hi mister, any solution about it ?

thanks.

-see before

Seehttp://forums.asp.net/t/1099946.aspx. there is a solution there.

Dean

Modal popup question

In the description of the modal popup the following statement poses a problem:

If a postback is required, simply allow the OK/Cancel control to postback and the page to re-render.

My question is: How do you allow the OK?Cancel control to postback? Any suggestion appeciated.

Hi

I think we are working on the same issue.

To be able to have the postback working you need to add and set the UseSubmitBehavoir to false for the OK/Cancel controls, e.g

<asp:ButtonID="OkButton"runat="server"Text="OK"OnClick="OkButton_Click"UseSubmitBehavior=false></asp:Button>

To be able to have the postback working you need to add and set the UseSubmitBehavoir to false for the OK/Cancel controls, e.g

Now it will it the OnClick handler:

protectedvoid OkButton_Click(object sender,EventArgs e)

{

string str = TextBox1.Text;

}

But now I have another issue, my TextBox1.Text is empty even if the suer typed some text. Anyone knows how to solve this ?

David knows better than I but I believe you'll get a postback if you don't specify an OnOK script value to the extender.

Thanks, that works. I assume that the UseSubmitBehaviour="False" causes the javascript not to be run. The paragraph doesn't get formatted.

The textbox gets filled OK and the datalist hidden using this OkButton_click (I am tinkering with the source of the sample website here):

ProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.Click

DataList1.Visible =

False

TextBox1.Text =

"Hallo"EndSub

I don't have any ONOkScript defined for the extender.

The only way I found to get a postback is to add the

UseSubmitBehavior=false

But After that in my handler I get empty string:

protectedvoid OkButton_Click(object sender,EventArgs e)

{

string str = TextBox1.Text;

}

str is equal to ""

Why that, any idea ? and solution. Thanks

I added a label an tried the following:

ProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.Click

DataList1.Visible =

FalseDim strAsString = TextBox1.Text

Label1.Text = TextBox1.Text

EndSub

And this works. If you have a breakpoint on the linestring str=TextBox1.Text than str will be "" or null when standing on the breakpoint while debugging (the line hasn't been run yet)

I noticed by the way that the event sub is visited twice (anybody who knows why this is the case?).

could you show me please your aspx or ascx to see how you defined the extender and the rest. That might help

This is just some tinkering about with ModalPopup.aspx from the sample. I put it in a new page (default2.aspx) and moved the link and the ModalPopupExtender to the item template of the datalist (I have plans with a datalist).

Hope this comes out readable:

Default2.aspx:

<%

@.PageLanguage="VB"AutoEventWireup="false"CodeFile="Default2.aspx.vb"Inherits="Default2" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<%

@.RegisterSrc="~/CollapsibleContent.ascx"TagPrefix="Demo"TagName="CollapsibleContent" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/><title>Untitled Page</title>

</

head>

<

body><formid="form1"defaultbutton="okbutton"runat="server"><atlas:ScriptManagerid="ScriptManager"runat="server"></atlas:ScriptManager><divclass="demoarea"/><divclass="demoheading">ModalPopup Demonstration</div><pid="Paragraph1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.

</p><p> </p><scripttype="text/javascript">var styleToSelect;function onOk() {

$(

'Paragraph1').className = styleToSelect;

}

</script><div><divstyle="display:none"><asp:PanelID="Panel1"runat="server"CssClass="modalPopup"><p>Choose the pagagraph style you would like:</p><br/><pstyle="margin:5px;"><inputtype="radio"name="Radio"id="RadioA"onclick="styleToSelect = 'sampleStyleA';"/><labelfor="RadioA"class="sampleStyleA"style="padding:3px;">Sample paragraph text</label></p><pstyle="margin:5px;"><inputtype="radio"name="Radio"id="RadioB"onclick="styleToSelect = 'sampleStyleB';"/><labelfor="RadioB"class="sampleStyleB"style="padding:3px;">Sample paragraph text</label></p><pstyle="margin:5px;"><inputtype="radio"name="Radio"id="RadioC"onclick="styleToSelect = 'sampleStyleC';"/><labelfor="RadioC"class="sampleStyleC"style="padding:3px;">Sample paragraph text</label></p><pstyle="margin:5px;"><inputtype="radio"name="Radio"id="RadioD"onclick="styleToSelect = 'sampleStyleD';"/><labelfor="RadioD"class="sampleStyleD"style="padding:3px;">Sample paragraph text</label></p><br/><center><asp:ButtonID="OkButton"runat="server"Text="OK"UseSubmitBehavior="false"OnClick="OkButton_Click"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></center></asp:Panel></div><br/><asp:DataListID="DataList1"runat="server"DataKeyField="Onderzoek_id"DataSourceID="ObjectDataSource1"RepeatColumns="5"BackColor="White"BorderColor="#CC9966"BorderStyle="None"BorderWidth="1px"CellPadding="4"GridLines="Both"><ItemTemplate><asp:LabelID="Onderzoek_idLabel"runat="server"Text='<%# Eval("Onderzoek_id") %>'></asp:Label><br/><asp:LabelID="Onderzoek_naamLabel"runat="server"Text='<%# Eval("Onderzoek_naam") %>'></asp:Label><br/><br/><asp:LinkButtonID="LinkButton1"runat="server"Text="Click here to change the paragraph style"></asp:LinkButton><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="LinkButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="True"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender></ItemTemplate><FooterStyleBackColor="#FFFFCC"ForeColor="#330099"/><SelectedItemStyleBackColor="#FFCC66"Font-Bold="True"ForeColor="#663399"/><ItemStyleBackColor="White"ForeColor="#330099"/><HeaderStyleBackColor="#990000"Font-Bold="True"ForeColor="#FFFFCC"/></asp:DataList><asp:ObjectDataSourceID="ObjectDataSource1"runat="server"DeleteMethod="Delete"InsertMethod="Insert"OldValuesParameterFormatString="original_{0}"SelectMethod="GetData"TypeName="RigonetTableAdapters.OnderzoekenTableAdapter"UpdateMethod="Update"><DeleteParameters><asp:ParameterName="Original_Onderzoek_id"Type="Int32"/></DeleteParameters><UpdateParameters><asp:ParameterName="Onderzoek_naam"Type="String"/><asp:ParameterName="Original_Onderzoek_id"Type="Int32"/></UpdateParameters><InsertParameters><asp:ParameterName="Onderzoek_naam"Type="String"/></InsertParameters></asp:ObjectDataSource><asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br/><asp:LabelID="Label1"runat="server"Text="Label"Width="156px"></asp:Label></div></form>

</

body>

</

html>

default2.aspx.vb:

Partial

Class Default2Inherits System.Web.UI.Page

ProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.Click

DataList1.Visible =

FalseDim strAsString = TextBox1.Text

Label1.Text = TextBox1.Text

EndSubProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.LoadEndSub

End

Class

This version is shorter and without the datalist (default3.aspx). This works on my machine (it is supposed to be in the SampleWebSite folder, uses the stylesheet but not the masterpage).

Default3.aspx:

<%

@.PageLanguage="VB"AutoEventWireup="false"CodeFile="Default3.aspx.vb"Inherits="Default3" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<%

@.RegisterSrc="~/CollapsibleContent.ascx"TagPrefix="Demo"TagName="CollapsibleContent" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title>

</

head>

<

body><formid="form1"runat="server"><div><atlas:ScriptManagerid="ScriptManager"runat="server"></atlas:ScriptManager><divstyle="display:none"><asp:PanelID="Panel1"runat="server"CssClass="modalPopup"BorderColor="Black"BorderStyle="Solid"><center><asp:ButtonID="OkButton"runat="server"Text="OK"UseSubmitBehavior="false"OnClick="OkButton_Click"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></center></asp:Panel></div><asp:LinkButtonID="LinkButton1"runat="server"Text="Click here"></asp:LinkButton><br/><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="LinkButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="True"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender><br/><br/><asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br/><asp:LabelID="Label1"runat="server"Text="Label"Width="156px"></asp:Label></div></form>

</

body>

</

html>

Default3.aspx.vb

Partial

Class Default3Inherits System.Web.UI.PageProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.ClickDim strAsString = TextBox1.Text

Label1.Text = TextBox1.Text

EndSub

End

Class

To clarify, the original intention was that people who wanted postback behavior for an OK would simply not set the OkControlID or OnOkScript properties of the ModalPopup and therefore it wouldn't hook up to the control and ASP.NET's normal postback mechanism would take place.

However, I've looked into the behavior as a result of this thread and see that's not actually the case. :( The problem seems to be that the following statement in the behavior's initialize method causes the OK button to not postback: "document.body.appendChild(_foregroundElement);". That statement's there to move the modal element to later in the page order than the background element that it creates so that it will be drawn on top of it. However, that statement moves the OK button (an input/submit element) outside the form element and that seems to cause it to not postback.

One alternative is to use the UseSubmitBehavior property of the target control to change its submit behavior as folks have suggested above (see also the ASP.NET documentation for details). This seems perfectly reasonable and seems to be working for some of you. Thanks for identifying that!

Another alternative is to change the code in ModalPopup's initialize method as seen below. The comments describe how the change does conceptually the same thing, but keeps the elements within the form element so that the default postback behavior will still work.

I think I prefer the UseSubmitBehavior solution if it works well, so please let us know if it does. We'll probably create an FAQ for this and document the change.

Thanks for bringing this up; sorry for the trouble!

this.initialize = function() {

AtlasControlToolkit.ModalPopupBehavior.callBaseMethod(this, 'initialize');

// Standard ASP.NET client-side code for finding its form element

var theForm = document.forms['aspnetForm'];

if (!theForm) {

theForm = document.aspnetForm;

}

_backgroundElement = document.createElement('div');

_backgroundElement.style.display = 'none';

_backgroundElement.style.position = 'absolute';

if (_BackgroundCssClass) {

_backgroundElement.className = _BackgroundCssClass;

}

// Append to the form

theForm.appendChild(_backgroundElement);

_foregroundElement = $(_PopupControlID);

_foregroundElement.style.display = 'none';

_foregroundElement.style.position = 'absolute';

// Append to the form

theForm.appendChild(_foregroundElement);

// Note: Safari doesn't support cancellation of link clicks added by

// addEventListener, so we must add them with "onclick ="

David,

Thanks for the explanation :-)

I still have an issue. What I am trying to achieve is to have an asp:Login in a ModalPopup.

So on my page I have the asp:Login that I changed to template mode and in the LayoutTemplate I modified the asp:Button LoginButton to add UseSubmitBehavior="false" and a OnClick="LoginButton_Click".

In my code behind I have the handler defined like something like this:

protected void LoginButton_Click(object sender, EventArgs e)
{

TextBox tbUserName = LoginView1.FindControl("LoginPanel").FindControl("LoginCtrl").FindControl("UserName") as TextBox;
TextBox tbPassword = LoginView1.FindControl("LoginPanel").FindControl("LoginCtrl").FindControl("Password") as TextBox;
Membership.ValidateUser(tbUserName.Text, tbPassword.Text);
}

The user click the link the ModalPopup is shown I type some text in the two textbox then I click Login and hit the break point I set in the OnClick handler. But there the values tbUserName.Text and tbPassword.Text are empty string. I can't get why.

Thanks for your welcomed help.

Ok I saw the difference between you and me.

I am talking about a TextBox in the ModalPopup Panel, so in your sample in Panel1.

In your case I also get back the text. But if you place the TextBox into the Panel1 then there are empty.

Yes, stupid of me. The coin finally dropped when I woke up this morning. The problem is that the postback fires twice: the second time around the textbox is empty and Label1.Text likewise.

You can see that placing a breakpoint or alternatively adding a label (label2) and changing the event sub to:

ProtectedSub OkButton_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles OkButton.Click

Label1.Text = TextBox1.Text

If Session("counter") =""Then

Session(

"counter") ="1"Else

Session(

"counter") = (CInt(Session("counter") + 1)).ToStringEndIf

Label2.Text = Session(

"counter")EndSub

When run label2 wil show "2". As to why there are 2 postbacks I have no idea. Suggestions will be highly appreciated. One could work around it using session variables like above but the 2 postbacks are noticable and ugly.

David,

Applying your patch has three problems:

1. The popup now only works with a master page. Default3.aspx will not work unless it has a master page.

2. The 2 postbacks I mentioned still fire.

3. The UseSubmitBehaviour="false" is still needed.

I was having this same issue and I got it working using UseSubmitBehaviour. But now the page updates using postback rather than using Atlas even if it is placed in UpdatePanel. How can fix this?

Modal Popup, DetailsView and UpdatePanel combined.

Hi all, this is my first foray into Atlas (and ASP.net) and I have come stuck with the following problem:

I am developing a simple lookup screen that lists users names along with email addresses in a GridView. There is a DetailsView control that allows insertion of new users as required. The lookup is contained within an updatePanel so only this portion of the page is refreshed when items are added, deleted, or changed. This works fine until:

I put the DetailsView into an atlas ModalPopup and have an 'Add User...' button. At this point the whole page refreshes and I cannot for the life of me get it to work correctly.

I have tried everything I can think of, scoured the web and forums but still no luck. I can get two of the three items (UpdatePanel, DetailsView, ModalPopup) working at once but the addtion of the third causes it all to go horribly wrong.

Can anyone out there help me?

Try adding UseSubmitBehavior="false" to the button that's causing the refresh. If that doesn't help, please post a simple sample demonstrating the problem. Thanks!