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?