Modal popup dynamic content & on mouseclick cancel

Hi

Problem 1:

I am using a ajax modal popup and i wish to have several different ones on my site, for a picture gallery. From what I have understood i need to have a targetcontrolID and am therefor having a dummy button as the targetcontrolID. And then from codebehind i use .Show() on the modal popup to get it showing with dynamic content. However when I use this setup with code behind my button causes a postback that reloads the page, not a very nice result. any suggestions?

Problem 2:

When i get the modal popup up and running I get the cancel button working nice with the cancelcontrolID but i also wish to be able to close the modal popup by just clicking anywhere on the screen. Any suggestions?

/cheers

marcus

Problem 1:

You need to wrap your button in an updatepanel to get an ajax postback rather than a complete page reload. You could also use the Dynamic* properties of the modalpopup to use a web service method to dynamically load the modalpopup content.

Problem 2:

You could try hooking up an onclick handler to the background div that gets created by the modalpopup for the greyed out effect, which you can get access to using $find('ModalPopupBehaviorID')._backgroundElement. I have never tried this so not sure if it will work. Personally, I don't like the behaviour that you are proposing and would leave the modalpopup with just a close button.

Jason

Problem 1: I have now used a updatepanel and it works. there are some glitches though, i now have in my

<contentTemplate>

<%

if i >1 then

modalPopupExtender.Show()

endIf

%>

</contentTemplate>

and I also add 1 to i using viewstate... because otherwise i get the modalpopup the first time the updatepanel loads. is there a nicer way of solving this?

And also i would like the Trigger to be dynamic, since I have 3 different buttons that I all wish to trigger and update the same updatePanel, right now I have 3 different updatePanel that all does the same thing.

Problem 2: Solved it by letting the image that shows be the ancel button and the background just background. thought this worked all right so i havent tried your idea with the div

I wouldn't recommend doing any inline scripting...use code behind instead. I am not sure why you are using this method of incrementing i to show the modalpopup...can't you just make this call to the Show() method in the event handler of the control that fired the postback, e.g. button or link click?

You can update any updatepanel on the page at any time during the postback by calling YourUpdatePanel.Update(). This gives you full control over which parts of the page get updated even if the control that fired the ajax postback lives in a completely different updatepanel. I tend to use this coding method rather than hooking up triggers to the updatepanels.

Modal Popup Extender and Page Refresh ?

I use Modal Popup Extender and there are two buttons, login button and cancel button...Everytime any of the buttons are clicked whole page is refreshed. I want to stop that for cancel button, but don't know how that will work for login as I want some underlying events to happen when that is clicked.

How can I achieve the above functionality ?

Wrap the modalpopup in an updatepanel to take advantage of partial postbacks. You can also assign the cancel button as the cancelcontrolid of the modalpopup so that it will close the popup using JS without a postback.

Modal popup in gridview

Hi,In a gridview,I want to have a column with a link control,clicking itshould display modal pup control,which will have some options withok/cancel button.How can I do it?

I believe others have had success sticking the ModalPopupExtender inside the item template.

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?

ModalPopup - More than one Cancel Contol?

Hey everyone.

I am using the modal popup extensivly in our new project.

I am wondering if there is a way to have more than one control for the cancel button to close the modal popup.

The main place i am finding this useful, is when I would like to put a OK and Cancel button on the bottom, right next to eachother, like presented in the demo and a close image/button in the top right of the modal, to act like a real popup.

I am unware of a current solution for this if there is one.

Thanks

-Shane

yes, it's possible, but only programmatically. here's an example

button1.attributes.add("onclick", "$object('YourModalPopupPropertiesID')._onCancel();event.returnValue = false;")

I'm not for sure if that will work in the current 60626 solution, but I know it works in the version of code I posted here:http://forums.asp.net/thread/1328079.aspx

Hey Adam,

This seems to work :P

I have to specifiy an ID for the properties, but other than that, its good to go!

Thanks for your help!

-Shane