Dynamic created ModalPopup Window

Hi,

I am having a lot of modal popup windows on my page (20+).

When i click various buttons on my page, various modal popupwindows should apear. But I don't want to define all the windows in the aspx, because the windows are pretty large.

So I think it would be fine to place one Panel containing an UpdatePanel and one ModalPopupExtender on the page and on clicking a button on the page i create an composite control and place it inside the Updatepanel, update() and show the modal dialog from code behind. This works fine if the content of the modal popup doesn't contain any buttons. But when i use buttons inside the popup window, their events doesn't fire at all.

Here is some code:

The ASPX:

 <asp:panel id="pnlPopUp" runat="server" style="display: none">
<div style="background-color: LightGrey">
<asp:panel id="header" runat="server">
<asp:label id="lblHeader" runat="server" />
<asp:linkbutton id="lbClose" runat="server" text="X" onclientclick="$find('mpePopUp').hide(); return false;" />
</asp:panel>
<asp:updatepanel runat="server" id="updPopup" childrenastriggers="true" updatemode="conditional">
<contenttemplate>
<asp:panel id="pnlBody" runat="server" cssclass="body" />
</contenttemplate>
</asp:updatepanel>
</div>
</asp:panel>
<cc1:modalpopupextender id="mpePopUp" behaviorid="mpePopUp" popupcontrolid="pnlPopUp" runat="server" dropshadow="true"repositionmode="RepositionOnWindowResizeAndScroll" targetcontrolid="dummy" backgroundcssclass="modalBackground" />

CODE:

public partialclass _Default : System.Web.UI.Page
{
public MDMWindow2 w2 =null;
protected override void OnInit( EventArgs e )
{
base.OnInit( e );
w2 =new MDMWindow2( );
w2.Bubble +=new EventHandler( w2_Bubble );
}
void w2_Bubble(object sender, EventArgs e)
{
int x = 0;// This Point get NEVER hit}protected void ShowWindow2(object sender, EventArgs e )
{
w2.HeaderText ="WWW2";
updPopup.ContentTemplateContainer.Controls.Add( w2 );
updPopup.Update( );
mpePopUp.Show( );
}

and the code of the control:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
/// <summary>
/// Summary description for PopUpPanel
/// </summary>public class MDMWindow2 : CompositeControl
{
private Label headerLabel;
private Button button;
public String HeaderText
{
get{EnsureChildControls( );return headerLabel.Text;
}
set{EnsureChildControls( );headerLabel.Text =value;
}
}
public MDMWindow2( )
{
}
public event EventHandler Bubble;
protected override void OnLoad( EventArgs e )
{
base.OnLoad( e );
EnsureChildControls( );
}
protected override void CreateChildControls( )
{
EnsureChildControls( );
headerLabel =new Label( );
headerLabel.ForeColor = System.Drawing.Color.Red;
this.Controls.Add( headerLabel );
button =new Button( );
button.CommandName ="Click";
button.Text ="ClickMe";
Controls.Add( button );
button.Click +=new EventHandler( b_Click );
}
void b_Click(object sender, EventArgs e )
{
Bubble(this, e );// This Point get NEVER hit
}
}

Can anybody help? What is wrong with wiring the eventHandlers? Is the updatepanel the probl?em? Or can anybody show me an better way to create modal popups at serverside?

Thnx

I did something like this using user controls (.ascx files). The .aspx file has an UpdatePanel whose content is an asp:Panel with an asp:PlaceHolder in it and an asp:Button. The button is configured with an OnCommand handler and an initial CommandName of 'Inactive'. A LinkButton on the page triggers a partial postback which does 3 main things: a) does a LoadControl of a .ascx file into the Placeholder; b) changes the CommandName of the Button to "EntryForm" (or something logically associated with the .ascx); c) calls Show() on the modal popup.

After the partial rendering completes, the modal popup is shown. When the Button is pressed, the OnCommand is run, and it uses the CommandName to do the right thing for the particular .ascx that was loaded. It's important that in Page_Load, if it's a postback, that the loaded .ascx is re-loaded (using LoadControl) so that the viewstate is restored and the controls on the .ascx can get updated with the values entered on the modalpopup form. During OnCommand, if a different .ascx needs to be shown, it unloads the Placeholder's controls and uses LoadControl for the next .ascx. If the sequence is done, it sets the CommandName back to "Inactive" and hides the modalpopup.

Hope that helps,

Donnie

This sounds good. But in my Dialogs I will have more various controls like dropdownllist or textboxes wich will have to be bound to an eventhandler too. They have to be in the controls.

It would be perfect, if I can handle the events, which are triggered by my control, inside the page.

Sounds like, then, after you use LoadControl, the page just needs to add event handlers in its code-behind to the controls in the .ascx that was dynamically loaded.

Dynamic Content into ModalPopup

I've just started playing with the AJAX Toolkit. One thing I am stuck on, ishow to get dynamic content into the controls that are in the modalPopup PopupControlID?

A very simple example:

There is a textbox and a button. When you enter text then click the button, a modal popup appears saying "You entered..." and whatever you typed. Is there a way to do this in the codebehind? It dosen't seem like the button click event is firing since it is the "TargetControlID" of the modalPopup.

Thanks

Have a look at this bloghttp://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx. I did this my self the other day but I did it a slightly different way, when I get back to work I will post the code.

Thank you for the reply. I took a look at the article, and there is some good information there. I actually ended up accomplishing what I need by assigning the "TargetControlID" to a bogus control (using this example, it's a bummer this property cannot be null or empty) and using the ModalPopupExtender1.Show() method. This seems to be doing the trick. This way, I can use any event or condition to pop the ModalPopup, and all of the controls (including the panel i am using as the "PopupControlID". are accessable at design.

So, i have a button, on the click event i create all of the controls i need and add them to the panel, then call ModalPopup1.Show() and there it is.

Now the problem i'm facing is getting values from the ModalPopup back into the main screen. For example, if I have a textbox in the ModalPopup, when the user clicks OK on the modalpopup, how to i get that value? Remember that the TextBox and it's properties were generated at runtime, so after postback, they wont' exist. I guess I could try to use the Request.Form key values?

bortiquai:

I guess I could try to use the Request.Form key values?

This is a option.

Or you can use a HiddenField which will always be on the page to keep this value. The value of HiddenField can be set in onclick client side event handler of ok button.

DropShadow not moving?

I have a DropShadow attached to a panel that is also a DragPanel and a ModalPopup. What happens is that I can move the panel but the shadow is moving after I drop the panel and not during the drag phase, then after I drop the panel the shadow redraws itself at the right place.

What can I do?

DropShadow in TrackPosition mode uses window.setTimeout to check for movement of its TargetControlID. It sounds like that event isn't firing during the drag operation and so you're not getting updated shadow positions. (Does this happen on all browsers?) You might consider making the DragPanel apply to a Panel that contains both the current content AND the DropShadow that's being attached to it. Then there won't be positioning to update since the shadow will automatically travel with its content.

Thank you David.