Pop-ups are helpful items in the UI development toolbox. They allow the display and entry of additional information without changing the context and access to what's displayed in the main window. In this way, they can help to reduce the number of user actions required and the number of post-backs needed. Hence, the load on the server can also be reduced. In other words, they potentially improve the performance of the user, as well as that of the server.
alert() function, but that one does not allow formatting of text.
With ASP.NET AJAX comes support for better user interfaces.
ResizableControlExtender support creating a pop-up that meets the needs of ASP.NET web application developers. The PopupPanel control takes this approach.
The PopupPanel control meets the following requirements:
- It has an optional header and an optional footer.
- The header text or pop-up title can be configured.
- The header can be used to drag the pop-up. If there is no header, the whole pop-up becomes draggable.
- The header has an image button to close the pop-up.
- The pop-up can be resized, with minimum and maximum width and height. Resizing happens via dragging the resizing image by the lower right corner.
- The footer optionally has one to three buttons. The button text, as well as the client and server callback functions of these buttons, can be configured.
- If there is more than one pop-up on the page, it must be possible in client script to open and close each of them or to put any one of them on top, preferably in a single statement.
- Its HTML content must be configurable both on the client and on the server. It should have no restrictions whatsoever.
- If the content does not fit, the control must add a horizontal and/or vertical scrollbar to support the display. The display of these scrollbars also depends on the size of the pop-up during resizing.
- It runs on both IE7 and Firefox 2.0.
- If there are multiple pop-ups on a page, one can be given focus by clicking it. The pop-up that has focus is on top and has a different header color.
MyPopupObj. The prototype of this object contains functions for open, close, focus and resize, as well as functions that yield the ID of the popup itself, its header, its body content and its footer:
This way, the opening of a pop-up becomes as simple as calling
eval('MyPopupObj').open(). The PopupPanel control uses both
resize_MyPopup for a pop-up with ID
Bringing a pop-up to the front is implemented by setting its z-index upon clicking the pop-up. It is set to the maximum z-index of any pop-up plus one. There is a global variable that maintains the maximum, which is initially set to 100.
Most of the browser specifics are hidden in
ResizableControlExtender. The bottom right
DragHandle does not automatically appear on top of the footer in IE. Therefore the footer is 16 pixels smaller than it would otherwise be. IE gives a better 3D effect for border outset. In Firefox, the top left becomes white, blurring the boundary of the pop-up. This can be alleviated by means of the following script at the start of the HTML body:
document.write(" border: outset #B4B0A8 2px;");
The control does not look good in IE6. The resize function probably needs to be different.
To use the control on a page:
- Register the control on the page.
<%@ Register Assembly="KtmdServerControls"
Namespace="Kronos.Tmd.ServerControls" TagPrefix="Ktmd" %>
- Add the control to the page, as in:
ButtonOneOnClick="eval('somePopupObj').close(); return false;"
<DM:UploadFile id="ucUploadFile" runat="server" />
- To make the embedded CSS effective, add an HTML link to the page's head element.
<link rel="Stylesheet" id="htmlStyleSheetLink" runat="server" />
- Set the
htmlStyleSheetLink.Href = PopupPanel.GetCssWebResourceUrl(Page);
To access the content of the control on the server, use the
IUploadFile uploadFile =
somePopup.Content.FindControl("ucUploadFile") as IUploadFile;
string fileContent = uploadFile.GetUploadedDataUtf8Decoded();
To create a PopupPanel on the server that has one OK button and displays a
div element saying "Hello World," code something like this:
PopupPanel popup = new PopupPanel();
HtmlGenericControl div = new HtmlGenericControl("div");
div.InnerHtml = "Hello World";
popup.ShowButtonOne = true;
popup.ButtonOneText = "OK";
popup.ButtonOneOnClick = popup.ClientID + "Obj.close(); return false;";
The code comes with an example static
MessageBox class that shows this use of the PopupPanel.
|||"Developing Microsoft ASP.NET Server Controls and Components" by Nikhil Kothari and Vandana Datye, Microsoft Press|
|||"Create Advanced Web Applications With Object-Oriented Techniques" by Ray Djajadinata, MSDN Magazine May 2007|
|||ASP.NET Ajax website |
It would be great to get feedback on the following:
- Are there other ways to provide button functionality in the footer that are not limited to three buttons?
- What would the resize function be in IE6 or other browsers?
- 31 July, 2007 -- Original version posted
- 2 August, 2007 -- Source download updated
- 22 September, 2008 -- demo updated