Modal popup and continue to run server code

I have a linkbutton that causes a postback for a lengthy process on the server - then the page redirects to a different page for fianl processing - when the linkbutton is pressed I would like a modal popup to appear showing that something is happening and just have a spinnier or something on it - nothing fancy.

However if I wire the modal popup extender to the linkbutton it disrupts the postback - of course if I have the server post code to show the popup by the time it gets to the client the process is done and that is useless - is there a way to show the modal popup and have the postback occur leaving the modla popup visible untill the page redirects or the page finishes its postback

You could use the Dynamic* properties of the modalpopup to use a web service method to do the server side processing. You can then hookup to the populated event so that after the processing has completed, you can redirect to another page.

Modal popup and postback

Hello,
I'm using a modal popup which contains a OkButton which should normally do a postback to save the option value.
But the postback is not done, either in a regular form (not in an update panel) nor an atlas form, simply nothing is done.
Is it a way to do that? The description of the control says just to do postback like normal ones.
You can see this bug here:http://www.wdagent.com, clic on the messaging on the right menu the on "options" (you can see that the page is not reloaded and the updateprogress loading is not shown).

The code is the following :
[code}
<act:ModalPopupExtender ID="OptionsPopUpMaker" runat="server">
<act:ModalPopupProperties TargetControlID="OptionsButton" PopupControlID="Options" BackgroundCssClass="modalBackground" DropShadow="false" OkControlID="ValidateOptionsButton" CancelControlID="CancelOptionsButton" />
</act:ModalPopupExtender>

<div style="display: none;">
<asp:Panel ID="Options" runat="server" Height="80px" Width="300px" CssClass="modalPopup">
<asp:RadioButton ID="OptionsFriendsBig" runat="server" GroupName="Options" Text="Afficher les contacts détaillés" /><br />
<asp:RadioButton ID="OptionsFriendsSmall" runat="server" GroupName="Options" Text="Afficher les contacts simples" /><br /><br />
<div style="text-align: right;"><asp:Button ID="ValidateOptionsButton" runat="server" Text="Save preferences" OnClick="SetFriendsOptions" /><asp:Button ID="CancelOptionsButton" runat="server" Text="Cancel" /></div>
</asp:Panel>
</div
I noticed a huge number of bugs in this toolkit (i wasn't even able to use a control bug free!) like :
- The title of the page disapear when clicking on expand/collapse link of a collapsible panel (i rewrited the javascript for this) and disable the partial rendering of the page.
- The textboxwatermark disable the partial rendering of the page (i don't know how it is possible but it is...).

Thanks for your helpSorryn the "options" is in the "friends" tab
chech this out, it could give you an idea or a way to solve it..
what you really could do is:
do a javascript call like:
__doPostBack('ValidateOptionsButton', '');
on the save button

but you will notice that your controls (OptionsFriendsSmall)will not hold the values for the postback
so you will have to assign them o another hidden control before the postback

so to test the postback your modalpopupextender property onOkScript will look like:

OnOkScript="__doPostBack('ValidateOptionsButton', '')"

if this works but doenst post back the values of theOptionsFriendsSmall create a hidden field and ajava script function that saves the value to the hidden field first and then does the postsback call.

for example:
OnOkScript="savevalue(seletedvalue)"

and inside thesavevalue function do the__doPostBack




Please also have a look at the following threads for ModalPopup background/fixes:http://forums.asp.net/thread/1277351.aspx,http://forums.asp.net/thread/1287520.aspx.

thanks :)

Modal popup extender postback issue

Hai

I'm using Ajax toolkit modal popup extender to open the popup window, In that window having two buttons, save button save the entered information into database and cancel button close the popup window.When click the save button changes are saved and window remain open, this is my requirement. But when i clicked that save button the informations are saved and popup window is closed.

How i will get my requirement ? Plz help anyone.

kamal...

use Show method of the control object to make it visible

Hi Kama19101980,

If you want to show a window when storing data to database and hide the window as soon as the process finished, I think you should better useUpdatePanel + UpdateProgress. Otherwise(keep the window open after storing the data), we shall use UpdatePanel + ModalPopupExtender.

Now you can put all the inputs inside an UpdatePanel and the Button is set to be the trigger of the UpdatePanel or just inside the UpdatePanel.For example,

<UpdatePanel>controls <Button></UpdatePanel>

When the partial update occurs, we show the ModalPopupExtender. You can do it like this,

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

function BeginRequestHandler(sender, args){
$find("ModalPopupExtender's BehaviorID").show();
}

I hope this help.

Best regards,

Jonathan

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 with asynchronous postback

Does anyone know how to call an modal popup and get it to "show" when an asynchronous postback begins and "hide" when the asynchronous postback is complete. I am basically tring to do what I see on codeplex when you login or do a search. I have tried this a few differnet ways following articles on web perform a similar (but not exact) situation, but I can't seem to get it to work.

Hi Audley9,

To make a ModalPopupExtender shown when sending a asynchronous postback and make it hidden when the asynchronous postback finished, please add these code to your page.

 <script type="text/javascript" language="javascript">Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function BeginRequestHandler(sender, args){ $find("ModalPopupExtender.BehaviorID").show(); } function EndRequestHandler(sender, args){ $find("ModalPopupExtender.BehaviorID").hide(); } </script>

I hope this help.

Best regards,

Jonathan

ModalPanel - How can I us AJAX instead of postback to update database ?

I'm new to AJAX and this suite of tools. I have a page that when a user clicks a link button my ModalPanel with various input fields appears. When the user clicks the okay button I want to make an async call instead of having the page post back. I need to be able to call one of my business objects defined in C# so what is the best way to do this?

If you can provide details or even a small example I would appreciate it.

My code behind method looks like this:

void OnClick(...)

{

Broker b = new Broker();

b.name = NameTextBox.Text;

b.account = AccountTextBox.Text;

b.Save();

}

Why not just wrap the modalpopup in an updatepanel and let the page postback? It is easier then to have access to the server controls from the form and have full interaction with the other page elements during the postback in case you want to update other stuff on the page.

What benefits are you looking for by not posting back?

Jason

ModalPopup - content shows briefly when page loads

Hi,

I have a some problem with the modalpopup control. Its on everytime a full postback happens, the browser "displays" all the content of my modalpopup, in way that how it's going to look like when you dont add the extender to your panels. The panels then "disappear" after the page is loaded, and the modalpopups work as they are supposed to.

how do i prevent the panels from "blinking"/showing on full page postbacks?

Add style="display:none;" to the panels.

this seems to work. thanks!

however i have one question. before, I was adding display:none; to my panels through the css class on a separate css file. it wouldnt work that way since the panels will disappear forever. it only works when i put display:none; on the <asp:Panel> from the html source. why is it like that?

I believe that the modalpopup works by toggling the style attribute but if you have display:none permanently set in the CSS then it isn't going to work. Bit of a pain I know but not a huge deal to add it to the panel.

ModalPopup + Postback

Hi,

I've utilized the modalPopup control - and it works well - apart from the fact I can't figure out a way for it to postback?!

Any ideas?

Thank you.

anyone?

http://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx

is it the one that you're looking for?

that's populating it based on a webservice.

i want server side actions to be performed once a user clicks a button in the modal box.

anyone else? this is quite urgent :(

what do you mean by performing server-side actions? why don't you call it through web service then?

i just didnt want to have to build a webservice - just in order to append some data to a database, which i wanted to handle through what seemed like a simple postback :(

Here is what i have so far.

A page with a modal extender.

If i link OkControlID to the button I want to perform any action - then it doesn't postback, and hence nothing happens.

If i don't link it using the above - then the action executes - BUT - modal extender continues to sit there, not closing.

So perhaps what I am after now is a way to close it? or link my button to postback, AND to close the modal popup.

any ideas?

thank you.

Hi RomanT,

Sounds like you should not use OkControlID, and then include MyModalExtender.Hide() at the end of your server side event handler.

Thanks,
Ted

ModalPopup and FileUpload

I created a ModalPopup with a FileUpload control inside it. After some initial frustration with trying to get the ModalPopup "OK" button to Postback to the server, I found a thread that suggested setting the UseSubmitBehavior property to false, which did the trick. However, in the click event of my OK button, FileUpload1.HasFile is false, even though I did browse for a file. Any idea why? And how to fix it? Thanks!There are a couple of threads talking about how the 60504 version of ModalPopup does its magic by moving controls around on the form and incorrectly moves things outside the <form> element. I eventually posted a solution that relies on the zIndex CSS property. Please try applying that change to your ModalPopup sources and see if it helps here. If not, please let us know! Thanks.
I tried David Anson'sfix, but it doesn't seem to be working. Perhaps I didn't insert the code right? Or something? I went to the folder where I installed Atlas and drilled down to AtlasControlToolkit/ModalPopup/.... Here I made a backup of ModalPopupBehavior.js, and then inserted the code David wrote where it clearly fit. I restarted Visual Studio in case it needed to reload or something, but it still doesn't work. I opened the DOM Inspector and sure enough the panel is still outside the form. Am I missing something? Thanks!
The change I posted about using zIndex does not move the panel (verified by others on this forum), so if you're seeing the panel be moved after attempting to apply the fix, then something about how the fix was done would seem to be in error. Please double-check what you've done and post your ModalPopupBehavior.js you're unable to get the change to take effect.