Yesterday I posted about client side predicates for Popup controls. Thanks for all the Tweets and Emails.

The Popup control is very powerful and Popups are now an expected construct in many web user interfaces.

I received a number of questions about using content in Popups that is not embedded in the containing page.

Probably the easiest is to use in iFrame inside the Panel container for the Popup.

In code it looks like this.

Code Snippet
  1. <h1>Modal iFrame</h1>
  2. <asp:Button ID="ButtonIFrame" runat="server" Text="Button" /><br /><br />
  3. <div>
  4.     <asp:Panel ID="PaneliFrame" runat="server" CssClass="modalPopup"
  5.                                 Style="display: none" Width="450px" Height="250px">
  6.     <iframe name="f1" src="Popup.aspx"  frameborder="0" scrolling="no" width="100%" height="200px">
  7.     </iframe>
  8.     <br />
  9.        <div align="center">
  10.           <asp:Button ID="OkButton" runat="server" Text="OK" />
  11.           <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
  12.        </div>
  13.     </asp:Panel>
  14.     <br />
  15.    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderIF" runat="server"
  16.              TargetControlID="ButtonIFrame"
  17.              PopupControlID="PaneliFrame"
  18.              BackgroundCssClass="modalBackground"
  19.              DropShadow="true"
  20.              OkControlID="OkButton"
  21.              OnOkScript="onOk()"
  22.              CancelControlID="CancelButton" />
  23. </div>

There is an advantage when using the iFrame in that you can reference a complete HTML or ASPX page since the iFrame expects this.

IN the example above I set the href attribute of the iFrame to a .aspx page (Popup.aspx) in the same solution but you need not do this. The href attribute can be set to any url that you like, even on a different domain.

This avoids an issue that we will need to consider when using the other three methods that I will discuss below.

HTML and ASP.NET both have requirements that define “well formedness”. HTML, for example, declares that a page may only have one <head> section. ASP.NET declares that a page may only have <form> tag with a “runat=server” attribute.

We need to consider this when “inserting” content into our page elements (such as the container that is displayed whern a Popup is shown.

Next lets look at using an ASP.NET User Control in a Popup.

Code Snippet
  1. <h1>Modal Control</h1>
  2. <asp:Button ID="ButtonControl" runat="server" Text="Button" /><br /><br />
  3. <div>
  4.     <asp:Panel ID="PanelControl" runat="server" CssClass="modalPopup"
  5.                                  Style="display: none" Width="450px" Height="250px">
  6.    <uc1:ControlForPopup ID="ControlForPopup1" runat="server" />
  7.  
  8.        <br />
  9.        <div align="center">
  10.           <asp:Button ID="ButtonOkControl" runat="server" Text="OK" />
  11.           <asp:Button ID="ButtonCancelControl" runat="server" Text="Cancel" />
  12.        </div>
  13.     </asp:Panel>
  14.     <br />
  15.    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderControl" runat="server"
  16.              TargetControlID="ButtonControl"
  17.              PopupControlID="PanelControl"
  18.              BackgroundCssClass="modalBackground"
  19.              DropShadow="true"
  20.              OkControlID="ButtonOkControl"
  21.              OnOkScript="onOk()"
  22.              CancelControlID="ButtonCancelControl" />
  23. </div>

This method works pretty much as you would expect with the use of any User Control, and you need to be careful with things like code based rendering (Response.Write), just like any other User Control

Or, we could use the #include directive as below..

Code Snippet
  1. <h1>Modal Include</h1>
  2. <asp:Button ID="ButtonInc" runat="server" Text="Button" /><br /><br />
  3. <div>
  4.      <asp:Panel ID="PanelInc" runat="server" CssClass="modalPopup"
  5.                               Style="display: none" Width="450px" Height="250px">
  6.         <!–#include file="inc_popup.aspx"–>
  7.  
  8.        <br />
  9.        <div align="center">
  10.           <asp:Button ID="ButtonOK_Inc" runat="server" Text="OK" />
  11.           <asp:Button ID="ButtonCancel_Inc" runat="server" Text="Cancel" />
  12.        </div>
  13.     </asp:Panel>
  14.     <br />
  15.    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderInclude" runat="server"
  16.              TargetControlID="ButtonInc"
  17.              PopupControlID="PanelInc"
  18.              BackgroundCssClass="modalBackground"
  19.              DropShadow="true"
  20.              OkControlID="ButtonOK_Inc"
  21.              OnOkScript="onOk()"
  22.              CancelControlID="ButtonCancel_Inc" />
  23. </div>

I’m including a file with a .aspx extension but it is not (nor can it be) a complete ASP.NET page for the reasons stated above.

Lastly, you could fetch the content to be displayed in the Popup on demand via a JavaScript callable services method as shown in this video -

AJAX Content Fetch from JavaScript

Grab a working sample here http://misfitgeek.com/downloads/code/ModalPopup-ExternalSource.zip 

Have fun !

Technorati Tags: ,