How do I reset a ModalPopup?

How do a reset the contents of a ModalPopup that has been closed (using the .Hide() method or by clicking the cancel button) to it's initial state (at page load)?

I am using a ModalPopup control that contains a UserControl that allows users to search for records in a database. If they find a match, they can click the 'Select' link in the GridView (where the subsequent event handler calls the ModalPopup.Hide() method). They can also click on the Cancel button to close the popup if they don't find what they are looking for.

Everything is working perfectly, except after the ModalPopup has been used once, subsequent use shows the ModalPopup in the exact state it was when it was closed, either by the .Hide() method or the cancel button.

Is there a way around this?

If its a usercontrol in the modalpopup why not create a public reset method in the usercontrol to set all the values back to "" or whatever needs to be done. You could call that right before your .hide(). It sounds like the viewstate of the controls are on. You may be able to kill viewstate on your usercontrol or set initial values, but that could potentially cause problems depending if your user control posts back a bunch of times.

HTH,

AjaxButter

I have started down the road of creating a .ResetForm() method for the user control and will see if that works.

I am hopeful that your suggestion about disabling the ViewState will work, since ideally the ModalPopup should be at it's initial state whenever it's loaded and this would involve the least amount of effort (and code to test). The only issue here might be the use of UpdatePanels for partial-page postbacks (both in the main page on in the popup), so it might not work as hoped.

I guess my best option will be to leave the ModalPopup.TargetID property blank (if it's not required) and handle showing the popup from a button Click() event that resets the UserControl first.

Thanks for the assistance.

Creating a reset event in the UserControl and calling it after certain events works for simple controls (manually created and handled forms). There are still some issues remaining...

Trapping the cancel button click event and performing a reset there causes a full page refresh since it's not wired up through the ModalPopupExtender control (and it can't be part of the UpdatePanel in the popup). Maybe I'm doing something wrong here?

If the ModalPopup contains a UserControl with a FormView (for inserting & updating), the data remains as is after the cancel button is clicked. I tried disabling the ViewState, but since the page has not been refreshed, the FormView stays the same. I also tried creating a _Click() method for the cancel button, but the event doesn't seem to get called for some reason.

Do I have to do some funky client-side scripting to get this to work?

Nevermind... I did some more playing and figured out what I was doing wrong. Staring at it for too long sometimes prevent you from seeing the forest through the trees!

If I moved the cancel button into the UpdatePanel in the popup (and left the ModalPopupExtender.CancelControlID property blank), then this started to work as hoped (without the full page refreshes).

Resetting the FormView inside the UserControl turned out to be as simple as calling for the FormView.ChangeMode() method and setting it to the default mode (insert in this case) and then calling the DataBind() method (may not be needed?).

If anyone else agrees, please mark this post as an answer.

How do I integrate 3 party javascripts into Atlas the right way??

I found a great modalpopup window javascript and would like to use it with Atlas.

I guess I could add the script to the Atlas Scriptlibrary and than add it to my we page like this:

<atlas:ScriptManager runat="server" ID="UpdatePanel2"

EnableScriptComponents="True"EnablePartialRendering="True">

<Scripts>

<atlas:ScriptReference Path="~/ScriptLibrary/MyScript.js" />

</Scripts>

</atlas:ScriptManger>

Does this code make the javascript in on my webpage available?

Or I can do it like this:

<script src="http://pics.10026.com/?src=scripts/prototype.js" type="text/javascript"></script>

<script src="http://pics.10026.com/?src=scripts/lightbox.js" type="text/javascript"></ script>

But I would like to work within Atlas. Which brings me to my second question? This javascript uses the prototype.js framework. When I use Atlas do I still need the prototype.js or does Atlas replace those functions?

What I want to know is how do I integrate 3 party javascripts into Atlas the right way?

hello.

you can do it either way...normally, i use the <script> element...

How do I determine if user is logged in?

I want only authenticated users to save some stuff, so if a user is not logged in, I show a modalpopup to let the user log in:

if (User.Identity.IsAuthenticated)
this.SaveStuff();
else
this.ModalPopupExtender1.Show();

SaveStuff()

{

if(User.Identity.IsAuthenticated)

... save stuff

}

When the user then is logged in, I call the SaveStuff-method, but since the page is not reloaded (I guess), I cannot use User.Identity.IsAuthenticated or Membership.GetUser() to determine if user is logged in. How do I determine if the user is logged when calling the method from the modalpopup

can you access

Context.User.Identity.IsAuthenticated? (or put this value in a cookie, then reference the cookie?)

I can access the above, but it returns false even if the user is loggedin when handling the modalpopup. If I refresh the page, it returnstrue. I need to know the provideruserkey of the membershipuser who hasbeen logged in. Would it be safe to put that in a cookie?

How can the ModalPopup become draggable?

Okay, so following the normal functionality of a modal popup in all desktop apps, the modal popup should be able to be dragged. Is this possible? If so, does that already exist as a property? Or would it need to be added?

For example, say you are on a page with lots of data and you want to add a new data element. So you hit the "Add data" button which neatly shows the modal popup. Uh oh, I forgot what I was going to name it .. and if I could just move this window for a second to see what the last name was .. ugh, looks like I need to close this window to find out.

Obviously, if I needed (or whether the team needed) to add this kind of functionaltiy, then I'd need a draghandle ..

We don't currently support this but it's a good feature request. I've logged it as work item 518. Thanks!

You can also try doing this yourself. I haven't tried this but generally:

1) In ModalPopupExtender add a RequiredScript attribute for typeof(DragPanelExtender)

2) In ModalPopupBehavior, instantiate a Sys.UI.LayoutBehavior and attach it to the control referenced by "PopupControlID"

I think this library is able to get the drag and drop going for the ModalPopup as I have used with similar ModalPopups (not ajax). It does pictures, Divs and other HTML objects.

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Regards

Sorry .. it was really more of a feature request than anything else. :)

David understood me ..

Anyways, I tried your suggestion last night David.

< .. in ModalPopupBehavior.js ..>this.initialize() = function() { ... "existing init code" ... if (true) { _dragBehavior = new Sys.UI.LayoutBehavior(); _dragControl = $object(_PopupControlID); if (!_dragControl) { _dragControl = new Sys.UI.Control(_foregroundElement); _dragControl.initialize(); } _dragControl.get_behaviors().add(_dragBehavior); _dragBehavior.initialize(); }}

But that .. didn't work. It doesn't really do anything, so I'm not sure what I'm doing wrong.

I dunno if this is the best forum to say this but damned i hate javascript...

I copied your code and worked for me (with bugs)...

And the modal window moves for you?

worked with some bugs... i made a thick border on the pannel...

1. it drags but doesn't get fixed
2. sometimes it doesn't show the drag but it fixes

just a note... i have the latest version of atlas control toolkit...

(every day i update from codeplex (i recommend this, but i'm not yet experienced with atlas or even ajax stuff))

Can you post your test page? I was just changing the Toolkit dll and then was loading the SampleWebsite provided with the toolkit to see if it worked or not.

In my case, doesn't work. No errors, but doesn't work.

there it goes, BUT -->> i didn't try to fix the bugs! All i did was: put your stuff into .js write aspx, press play... saw it ON THE WAY IT WAS AND DID NOTHING...

At least you will be able to see the modal popup being draged...

Good luck fixing the problems ;) needing, i'm here...

<asp:ButtonID="_showModalPopup"runat="server"Text="Show dragable modal popup!"/> <asp:PanelID="_handlePanel"runat="server"Height="281px"Width="929px"><asp:PanelID="_dragableModalPopup"runat="server"BorderStyle="Solid"BorderColor="Black"BorderWidth="8"Width="300"Height="300">

I'm a dragable modal popup!

<br/><br/><asp:ButtonID="_okButton"runat="server"Text="OK"/><asp:ButtonID="_cancelButton"runat="server"Text="Cancel"/><asp:ButtonID="_postBackTest"runat="server"Text="Make me a post back"OnClick="Button4_Click"/>

_okButton

</asp:Panel></asp:Panel><asp:LabelID="_lblTest"runat="server"Text=""></asp:Label><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="_showModalPopup"PopupControlID="_dragableModalPopup"BackgroundCssClass="watermarked"OkControlID="_okButton"CancelControlID="_cancelButton"OnOkScript="okScript()"OnCancelScript="cancelScript()"ID="_modalPopupProperties"/></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtenderID="DragablePanelExtender"runat="Server"><atlasToolkit:DragPanelPropertiesTargetControlID="_dragableModalPopup"DragHandleID="_handlePanel"/></atlasToolkit:DragPanelExtender>

Just a note: I used the "AtlasControlToolkit test project" wich can be found on the latest releases on codeplex.com. I'm posting the full code..

<%

@.PageLanguage="C#"MasterPageFile="~/Default.master"CodeFile="ModalPopup.aspx.cs"Inherits="Automated_ModalPopup"Title="ModalPopupTests Tests" %>

<

asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"runat="Server"><asp:ButtonID="_showModalPopup"runat="server"Text="Show dragable modal popup!"/> <asp:PanelID="_handlePanel"runat="server"Height="281px"Width="929px"><asp:PanelID="_dragableModalPopup"runat="server"BorderStyle="Solid"BorderColor="Black"BorderWidth="8"Width="300"Height="300">

I'm a dragable modal popup!

<br/><br/><asp:ButtonID="_okButton"runat="server"Text="OK"/><asp:ButtonID="_cancelButton"runat="server"Text="Cancel"/><asp:ButtonID="_postBackTest"runat="server"Text="Make me a post back"OnClick="Button4_Click"/>

_okButton

</asp:Panel></asp:Panel><asp:LabelID="_lblTest"runat="server"Text=""></asp:Label><atlasToolkit:ModalPopupExtenderID="ModalPpoupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="_showModalPopup"PopupControlID="_dragableModalPopup"BackgroundCssClass="watermarked"OkControlID="_okButton"CancelControlID="_cancelButton"OnOkScript="okScript()"OnCancelScript="cancelScript()"ID="_modalPopupProperties"/></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtenderID="DragablePanelExtender"runat="Server"><atlasToolkit:DragPanelPropertiesTargetControlID="_dragableModalPopup"DragHandleID="_handlePanel"/></atlasToolkit:DragPanelExtender><scripttype="text/javascript">// (c) Copyright Microsoft Corporation.// This source is subject to the Microsoft Permissive License.// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.// All other rights reserved.// Script objects that should be loaded before we runvar typeDependencies = ['AtlasControlToolkit.ModalPopupBehavior'];// Test Harnessvar testHarness =null;// Controls on the pagevar show;var popup;var ok;var cancel;var postback;var behavior;// Variablesvar msg;function okScript() {

msg =

'ok';

}

function cancelScript() {

msg =

'cancel';

}

function checkPopupNotVisible() {

testHarness.assertEqual(popup.style.display,

'none','Popup should not be visible');

}

function checkPopupVisible() {

testHarness.assertEqual(popup.style.display,

'','Popup should be visible');

}

function checkMessage(m) {

testHarness.assertEqual(msg, m,

'Message \"'+msg+'\" should be \"'+m+'\"');

}

function checkLabel(m) {var label = testHarness.getElement("ctl00_ContentPlaceHolder1_Label1").innerText;

testHarness.assertEqual(label, m,

'Label \"'+label+'\" should be \"'+m+'\"');

}

function showPopup() {

show.click();

}

function clickOK() {

ok.click();

}

function clickCancel() {

cancel.click();

}

// Register the testsfunction registerTests(harness) {

testHarness = harness;

var test;

show = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button1");

popup = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Panel1");

ok = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button2");

cancel = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button3");

postback = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button4");

behavior = testHarness.getObject(

"ModalPopupProperties1");

msg =

'';

behavior.set_DropShadow(!behavior.get_DropShadow());

test = testHarness.addTest(

"Initial State");

test.addStep(

function() { checkLabel('Label1'); });

test.addStep(checkPopupNotVisible);

test.addStep(

function() { checkMessage(''); });

test = testHarness.addTest(

"Show Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(

function() { checkMessage(''); });

test = testHarness.addTest(

"Cancel Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(clickCancel);

test.addStep(checkPopupNotVisible,

function() {try { checkMessage('cancel');returntrue; }catch (ex) {returnfalse; } }, 100, 5000);

test = testHarness.addTest(

"OK Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(clickOK);

test.addStep(checkPopupNotVisible,

function() {try { checkMessage('ok');returntrue; }catch (ex) {returnfalse; } }, 100, 5000);

test = testHarness.addTest(

"Script Show/Hide");

test.addStep(

function() { behavior._show(); });

test.addStep(checkPopupVisible);

test.addStep(

function() { behavior._hide(); });

test.addStep(checkPopupNotVisible);

test = testHarness.addTest(

"Postback");

test.addStep(

function() { behavior._show(); });

test.addPostBack(postback);

test.addStep(

function() { checkLabel('Button4'); });

}

</script>

</

asp:Content>

FYI, all I had to do was use the dragExtender in companion to the modal popup

<asp:Panel ID="pnlModal" run="server"> <div id="dragHandle" style="position:absolute; top:0px; left: 0px; height:30px; width:50px; cursor:hand;></div> <div> <iframe id="ifrmModal" runat="server" frameborder="0" height="100%" width="100%" /> </div> <div> <asp:Button Id="ModalOK" runat="server" Text="OK" UseSubmitBehavior="false" /> <asp:Button Id="ModalCancel" runat="server" Text="Cancel" UseSubmitBehavior="false" /> <asp:LinkButton ID="lnkModal" runat="server" Text="Click here" /> </div></asp:Panel><atlasToolkit:ModalPopupExtender ID="mpe1" runat="server"> <atlasToolkit:ModalPopupProperties ID="pnlModalBehavior" BackgroundCssClass="modalBackground" DropShadow="false" OkControlID="ModalOK" PopupControlID="pnlModal" TargetControlID="lnkModal" /></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtender ID="dragPanelExtender1" runat="server"> <atlasToolkit:DragPanelProperties TargetControlID="pnlModal" DragHandleID="dragHandle" /> </atlasToolkit:DragPanelExtender>

KFrancis,

Just adding the DragPanelExtender works -- except if the modal popup has a drop shadow. The drop shadow does not move along with the modal popup window.

Any ideas on how to fix that?

Thanks,

Randall Price

yea, remove the drop shadow.

Hi KFrancis,

I copy&paste your code and it works. But I found one thing really weird is that if I add the quotation mark for the <style='...> property, it's no longer draggable!! (The quotation mark should be there, right?)

<div id="dragHandle" style='position:absolute; top:0px; left: 0px; height:30px; width:50px; cursor:hand;></div>

I'm using July CTP, any idea why this is happening?

And even when it's draggable, the popup won't show up at the center of page. The initial location has shifted to the right bottom. Do you know how to fix this?

How can I see ModalPopup js code ?

I'm a big fan of the modal popup extender and I'm trying to implement it using plain DHTML since my client have no asp.net server and I'm using classic ASP.

As you know, there is a classic IE annoying bug with COMBO BOXES. They stay on top of every div, without respecting the z-index layout.

I'm interested in learning how the Ajax Control Toolkit programmers handled this situation so I can do the same.

I can't just hide the combos, since I'm usiing a transparent Modal Background and I wish I could see the combos BEHIND the Modal Background.

Thanks!

Hi,

You can download the source codehere. Its implementation can be found in ModalPopupBehavior.js file.

thanks