Click here to Skip to main content
Licence CPOL
First Posted 12 Jul 2006
Views 137,649
Downloads 2,294
Bookmarked 55 times

ShowModalDialog effect in ASP.NET web forms

By | 5 Feb 2007 | Article
How to open modal a dialog window in a browser (Internet Explorer) and do something with the parent window after return.
 
Part of The SQL Zone sponsored by
See Also

Introduction

This article presents how to open a modal dialog window on a browser (IE only) which contains a web form. Submitting the form on the modal dialog window will refresh the main window content.

Background

I was working on a project to convert a Windows application into a Web-based application. The Windows application's main form displays a DataGrid. Clicking on a row of the DataGrid opens a modal dialog window which holds detailed information about that DataGrid row record. The user can edit the data on the modal dialog window, and clicking on an Update button closes the dialog and refreshes the DataGrid on the main form. The client wanted the same effect in the web application. After much R & D, I came with a solution which I want to share with you.

How to open a modal dialog window and how to get a return value from it?

Since I have no time, my source project contains all the code in one file (sorry! no separate business logic or data access logic classes given).

First of all, let's look at the JavaScript code for opening a modal window (the OpenModalDialog function in the Default.aspx page):

vReturnValue = window.showModalDialog(url,"#1","dialogHeight: 300px; dialogWidth: 600px;" +  
                    "dialogTop: 190px;  dialogLeft: 220px; edge: Raised; center: Yes;" + 
                    "help: No; resizable: No; status: No;");

The vReturnValue variable will contain the return value of the modal dialog window (when closed), which we can set in the ModalWindow form (in the detail.aspx page).

window.returnValue = true;
//(I am returning true to refresh Main page and false for no action)

You can give any value to be returned.

Postback from JavaScript

The most important thing for me is to refresh the grid when I get 'true' as the return value from the modal window. For that, I use (look in JavaScript's OpenModalDialog function):

__doPostBack(btnName,''); //(this will trigger 'btnName' butoon's Click event)

In the default.aspx page, I have used btnAddNew to add new data. Using the above JavaScript, I can fire the Click event of this button.

Note :To make this work, you have to set the default.aspx page's EnableEventValidation attribute to False. Setting this attribute to false enables us to fire a postback (server side events) using JavaScript.

Request

Any suggestions and additional functionality to improve this code is heartily welcomed. Feel free to ask any questions related to this article. Thanks...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Kiran Beladiya

Software Developer (Senior)
Tatvasoft Company
India India

Member

TatvaSoft is a software development company in India. The company has acquired a CMMi maturity level 3 and Microsoft Gold Certified Partnership. TatvaSoft specializes in delivering state-of-the-art solutions in software development, web development, web application and Rich Internet Application (RIA) development, iPhone development, and robust and secure business processing infrastructures. Software development tools and technologies used extensively at TatvaSoft include Microsoft .NET architecture, PHP/MySQL frameworks, Adobe Flex, Microsoft Silverlight, Microsoft SharePoint and BizTalk Servers, and Microsoft CRM and XRM platforms.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralCross Browser showModalDialog Replacement PinmemberRoman G.9:41 24 Mar '11  
GeneralNot working in ie8 when controls are inside updatepane asp.net 2 PinmemberMember 209360712:35 1 Jul '10  
GeneralMy vote of 1 PinmemberSyed Javed1:55 24 Jan '10  
Questionwhy do dialogLeft and dialogTop not work with IE7 (works with firefox3.53)? Pinmemberlhq21008:24 24 Sep '09  
GeneralProblem with window.returnValue in safari Pinmembermynameissuraj22:58 20 Oct '08  
GeneralRe: Problem with window.returnValue in safari PinmemberRoman G.6:53 22 May '11  
GeneralFiring other events for postback after the popup Closes PinmemberAmmar Hassan22:26 5 Mar '08  
QuestionA standards compatible cross browser (non IE-only) version Pinmembervolkan.ozcelik7:53 15 Feb '07  
Generalaccess to parent window from dialog Pinmembermburnie21:53 17 Jul '06  
AnswerRe: access to parent window from dialog PinmemberKiran Beladiya2:40 18 Jul '06  
GeneralRe: access to parent window from dialog Pinmembermburnie4:24 18 Jul '06  
Hi Kiran
 
In answer to your questions:
 
Kiran Beladiya wrote:
1. My aim was to postback the page using javascript (look at the line below)
_dopostback(btnName,'') (how can i fire this function from modal window??)

 
You use the window object to access the functions as follows:
 
var m_Parent = dialogArguments; // the window reference
 
m_Parent._dopostback(btnName, '');

 
Kiran Beladiya wrote:
2. If I want to call same page(which have been displayed in Modal window) from different Parent window, the "btnName" parameter used in _doPostBack may be different for different parent pages
--> In this situation every time i have to inform modal window that my btnObject is this

 
In this instance yes you would have to have a means of informing the modal window which button to use in the postback, but there are ways of overcoming this and which I believe in the longer term offer more flexibility. A couple of suggestions are below:
 
1. Wrap the window reference and details of the button to use in the call into an object and pass a reference to this object to the modal dialog. (this could be as simple as the name of the button, you can always get access to the button object via the window reference).
 
2. Have a handler method in the parent which is called by the modal window, this method knows which button to use and will make the actual postback call. This would be especially useful for placing additional logic prior to the postback (i.e. validation).
 
Though using the approaches listed above do entail a little more effort up front I find that the flexibility that it gives is far and away worth every bit of it. Ultimately it's all about finding the best fit solution for the problem at hand, and sometimes that pretty much comes down to nothing more than individual coding style Smile | :)
 
Hope this helps
 
Mark
GeneralRe: access to parent window from dialog Pinmemberlight16921:51 18 Jul '06  
GeneralRe: access to parent window from dialog Pinmembermburnie23:18 19 Jul '06  
GeneralRe: access to parent window from dialog Pinmemberlight1690:08 20 Jul '06  
GeneralRe: access to parent window from dialog Pinmembermburnie2:02 20 Jul '06  
GeneralRe: access to parent window from dialog PinmemberKiran Beladiya22:22 21 Jul '06  
GeneralRe: access to parent window from dialog Pinmembermburnie5:55 14 Aug '06  
GeneralRe: access to parent window from dialog PinmemberPaul Peeters9:13 23 Aug '06  
GeneralRe: access to parent window from dialog Pinmemberanhtn15:47 5 Jun '08  
AnswerRe: access to parent window from dialog Pinmembermburnie23:32 5 Jun '08  
GeneralRe: access to parent window from dialog Pinmembermayurmv17:20 1 Sep '08  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web01 | 2.5.120529.1 | Last Updated 5 Feb 2007
Article Copyright 2006 by Kiran Beladiya
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid