Tuesday, November 21, 2006

Modal Dialogs in Web

It should be noted that no ethically-trained software engineer would ever consent to write a DestroyBaghdad procedure. Basic professional ethics would instead require him to write a DestroyCity procedure, to which Baghdad could be given as a parameter.
(Nathaniel S Borenstein)

Modal dialogs are pretty common in WIN environment. These are used when u want some user input before u proceed with the main flow of the application. The basic difference between a normal dialog box and a modal dialog is that u cant do any operation in the window that opened the modal window till u complete (or close) the modal window.  There's a lot of debate on when to use modal dialogs and I found the first couple of paras of this article
useful.

As a POC for our new project which is to port a complete reporting application from WIN to WEB me & one of my colleagus got the chance to try out this modal dialog in Web.  In IE you have window.showModalDialog('url','windowName','windowProps') java script function which gives u a modal window. But in Firefox this does NOT work. You can partially achieve the modal behaviour by giving a third param to the window.open function modal=yes. This will keep the focus on the new dialog but user can still interact with the underneath parent window. Check out this blog entry by David Kasper for a detailed discussion.

There were some other requirements with this modal dialog.
1. Make sure it pops automatically after a certain postback event.
2. To be able to update backend domain objects from the modal dialog it self.
3. To inform the parent window about the operation that was performed in the modal dialog.

Since we're using ASP.Net 2.0 here's a briefing about how to do above using ASP.Net 2.0.

Popping Back automatically upon postback
You just have to include the modal dialog showing function string as a start up script using ClientScript.RegisterStartupScript function. (status = window.showModalDialog(url,'DlgName');)

Updating bkend domain objects
This was a pretty hard thing to do since the calling of the usual __postback javascript function didn't work as expected.

Communicating with the parent
This is again somewhat tricky. Specially if u've done this seamlessly with multiple browser windows, u r in for a surprise here.  Unlike with multiple browser windows u cant pass multiple value from child to parent using window.opener.... Instead you'll solely has to rely on window.returnValue to send something back to the parent. The hack of passing multiple values is to set this with an array and breaking down that array in the parent.

This is the first time I'm in a web project in my breif programming career and things seems interesting as ever.

Post a Comment