This post originated from an RSS feed registered with .NET Buzz by Brendan Tompkins. Original Post: An ASP.NET Modal Panel Control Feed Title: Brendan Tompkins Feed URL: /error.htm?aspxerrorpath=/blogs/brendan.tompkins/Rss.aspx Feed Description: Blog First. Ask Questions Later. Latest .NET Buzz Posts Latest .NET Buzz Posts by Brendan Tompkins Latest Posts From Brendan Tompkins

One UI element that has always been tricky to create in ASP.NET applications is the Modal Window.  Often, applications will present an entire page for simple property editing, in situations where a modal window is a more elegant, and straight-forward UI element.  This is probably due mainly to the fact that there are no intrinsic browser controls that work well for this, and are easy to deal with on the server side.

SDDs Are So Last Year

A while back, I proposed a solution for creating Modal Windows, which I called Sticky Draggable Divs (SDDs)

If you do Web Application development, you've no doubt struggled with the task of creating Modal forms.  You have different options for doing this, each with their own advantages and pitfalls.  Hosting your form in a new browser instance (window.open()) is really a kludge, and many users have popup blocking software which will break this approach. Using true Modal dialogs (window.showModalDialog()) doesn't work well from within ASP.NET. Using draggable DIV elements solves some of these issues, but has its own set of problems. Dragging DIV elements involves using DHTML and JavaScript and the script that you have to write to enable this can be tricky. Toss browsers other than IE into the mix, and you've got even more problems.

A big problem with this approach was that it relied on DHTML Behaviors which is IE only and can cause problems with browsers running with a high security level. After living with this solution for over a year, and it’s drawbacks, I finally looked for a better way.

A Better Solution

I’ve come up with a new solution which uses standard ASP.NET Controls, DHTML and cross-browser JavaScript. ModalPanel is implemented as a sub-classed ASP.NET Panel control.  Since it’s a Panel, it can be programmed in a way you’re probably already familiar with if you do ASP.NET development.

This control  adds a Title Bar, and optional close button to the Panel.  When the user drags the title bar, the entire panel is dragged.  It also uses cookies to remember it’s position on postbacks and return visits to the page.

You can experiment with it here at my demos site.

Implementation

Step 1: Reference my Tompkins.Web dll in your project. 

Download the source code here, the DLL here,  or an entire example project here.  Add a project reference to the DLL and optionally add the control to your toolbar in Visual Studio. 

You’ll  then  want to create an instance of the control on your page of course.

 <cc1:modalpanel id="ModalPanel1" title="Your Title Here" runat="server"></cc1:modalpanel>

Step 2: Add the CSS styles and images to your project. 

See the style.css, toolbar_close.gif and window_titlebg.gif files in either download for examples.

Step 3: Set Properties

There are some properties that you can set, such as the window’s title, and you can also alter the CSS classes used to style the thing. 

Step 4: Handle the WindowClosed Event, and show/hide the control.

The only event to concern yourself with is the WindowClosed event.

  public event EventHandler WindowClosed;

All your application must do is handle this event, and show/hide the control as you would with any other ASP.NET Panel…

You’re also going to want to add some code to show the panel in the first place, like so.

That’s it!  If your have trouble getting it to drag properly, or if it looks all funky, make sure you have your CSS stylesheet referenced properly, and that you have the CSS classes defined as I show in my example.

-Brendan