CodeProject: ShowModalDialog effect in ASP.NET web forms. Free source code and programming help

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

Background

I was presented with a project to convert a Windows application into a Web-based application. The Windows application's main form displays a datagrid. Clicking on row of datagrid opens a modal dialog window which helds detail information about that datagrid row record. User can edit the data on modal dialog window and cliking on Update button close the dialog and refreshes the datagrid on main form. The client wants same effect in web application. After much long R & D i came with the solution which i want to share with you.

How to open Modal Dialog window and How to get return value from it?

Since I have no time , my source project contains all code in one file (Sorry! no separate businesslogic or dataaccess logic classes given).

First of all look at the javascript code for opening modal window (OpenModalDialog function in Default.aspx page). The line:

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

Important thing: making post back from javascript

The most important thing for me is to refresh the grid when i get 'true' as return value from modal window. For that i have written (keep looking in javascript's OpenModalDialog function )

See in default.aspx page i have used btnAddNew to add new data. using above javascript i can fire the click event of this button.

Note :To make this working you have to set the default.aspx page's attibute EnableEventValidation to False. Setting this attribute value to false enables us to fire postback (server side events) using javascript.

Announcement

Any suggesions and additional functionality to improve this code is heartly wel come. Feel free to ask any questions related to this article. Thanks...

You must Sign In to use this message board.


Per page

FirstPrevNext

why do dialogLeft and dialogTop not work with IE7 (works with firefox3.53)?

lhq2100

9:24 24 Sep '09

Does anyone know why dialogLeft and dialogTop do not work with IE7 (works with firefox3.53)? <HTML> <HEAD> </HEAD> <BODY BGCOLOR="#ffffff"> <A HREF="javascript://" onclick="javascript: window.showModalDialog('http://www.google.ca','','dialogHeight:100px;dialogWidth:100px;dialogLeft;dialogTop;center:yes')">Try it</A> </BODY> </HTML>
Sign In·View Thread·PermaLink

Problem with window.returnValue in safari

mynameissuraj

23:58 20 Oct '08

I am using Safari Browser. The function showModalDialog(.........) is working fine. The DialogBox is appering fine. But the problem is window.returnValue=retObject; window.returnValue is returning nothing in safari. In IE it is working fine. Is there any alternatives for safari. Please help me.
Sign In·View Thread·PermaLink	1.67/5

Firing other events for postback after the popup Closes

Ammar Hassan

23:26 5 Mar '08

Hi, This Code works just FLAWLESS, but I have a requirement to fire a DropwdownList's SelectIndexChange Event. I tried it by setting the dropdownlist's property of AutoPostBack to true and passing its __doPostaback, but it doesn't work. Can you please help me with this. Thanks. Ammar
Sign In·View Thread·PermaLink	1.33/5

A standards compatible cross browser (non IE-only) version

volkan.ozcelik

8:53 15 Feb '07

Good work. For an alternative approach, you can visit "Modal Dialog Enhanced article[^]". It's a DHTML / AJAX modal dialog implementation that not only works in IE but also in all standards-compatible browsers including Firefox, Opera, Camino, Safari, Netscape, Conquerer... etc. .: Volkan Ozcelik :. blog .: trials/errors/studies :. sardalya .: orkinos :.
Sign In·View Thread·PermaLink

access to parent window from dialog

mburnie

22:53 17 Jul '06

Hi there

In addition to picking up the return value from a modal dialog you can also pass a reference for the parent window (or pretty much any reference or value for that matter) so you can access all of its controls, JavaScripts etc from within the dialog itself.

You need to make a small change to the showModalDialog() function parameters, change from:

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

to

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

Replacing the "#1" with window means that you are passing a reference to the current window as a parameter as opposed to a string parameter. You could even create a wrapper object containing both the string parameter and a reference to the window if you want to and pass that through.

To access that parameter from the dialog you do the following:

var m_Parent = dialogArguments;

In the original sample m_Parent would have been set to "#1", but by passing a reference to the window as the parameter it now sets m_Parent as a reference type pointing to the parent window, with full access to that window.

Hope this helps

Mark Smile

1.14/5

Re: access to parent window from dialog

Kiran Beladiya

3:40 18 Jul '06

Hi Mark,
You are right. Passing the reference of parent window instance i can access its controls..

But the reasons why i use return value(of modal window) are

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??)

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

Hope your doubt is cleared..
If you have any ways to solve these you can surely write..
Thanks for taking interest in my article

Reagards
KIRAN

I am .Net programmer at TatvaSoft - India. I like to share my knowledge, experience and experiments so i have been here. feel free to contact me on kiran_beladiya@yahoo.co.in (plz no spam.)

1.00/5

Re: access to parent window from dialog

mburnie

5: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

Re: access to parent window from dialog

light169

22:51 18 Jul '06

As I checked var m_Parent = dialogArguments; // the window reference m_Parent._dopostback(btnName, ''); doesn't work. Have you checked it? or Give us a Sample code??
Sign In·View Thread·PermaLink

Re: access to parent window from dialog

mburnie

0:18 20 Jul '06

Hi there, apologies for the delayed response.

light169 wrote:
m_Parent._dopostback(btnName, '');

The line above has the parameter btnName, if this is a reference to a button on the parent form then you need to correctly set it from the child window:

var btnName = m_Parent.document.getElementById('IDGOESHERE');
or
var btnName = m_Parent.forms("FORMNAME").item("BTNNAME");

Some example code for parent and child pages are listed below, which demonstrate calling a function on the parent from the child.

Parent.htm


<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<script language="JavaScript">

function OpenTestWindow() {
	
	var rValue = false;
	var url = "child.htm";
	
	rValue = window.showModalDialog(url, window,"dialogHeight: 300px; dialogWidth:
 600px; dialogTop: 190px; dialogLeft: 220px; edge: Raised; center: Yes; help: No; resizable: No; status: No;");
	
	document.getElementById("returnValue").innerText = rValue;		
}

function _TestFoo(txt) {
	var txtValue = "The child function has successfully called me and this is the value passed

";
	document.getElementById("success").innerHTML = txtValue + txt;
}
</script>
<BODY>
<p onClick="OpenTestWindow()">Open the Test Window</p>
<div id="success"></div>
<div id="returnValue"></div>
<p onclick="_TestFoo('hello')">Test</p>
</BODY>
</HTML>

child.htm

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language="JavaScript">

var m_Parent = dialogArguments;

function callParent() {
	
	var txt = document.forms("test").item("testStr").value;
	m_Parent._TestFoo(txt);	
}
</script>
</HEAD>
<BODY>
<form name="test">
<textarea rows="5" cols="200" id="testStr"></textarea>
<button  önclick="callParent()">Call Parent</button>
</form>
</BODY>
</HTML>

Hope this helps

Mark

P.S. In the code samples for the Parent and Child pages if it say removed= it should say on Click= (with out the space between on and click Smile

the codeproject form is playing silly buggers with the text Smile

Re: access to parent window from dialog

light169

1:08 20 Jul '06

Thx for your repy.
Actually ,there's nothing wrong with M_parent or btnName . The problem is _doPostBack cannot excute.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="A1.aspx.cs" Inherits="Test_A1" EnableEventValidation="false" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<META http-equiv="Pragma" content="no-cache">

</head>

<body>
<form id="form1" runat="server">

<asp:GridView ID="GridView1" runat="server" .....
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ....

<asp:LinkButton ID="Refresh" runat="server" OnClick="LinkButton1_Click" Visible="true">Refresh
<asp:LinkButton ID="Add" runat="server" OnClientClick="showItem();" CausesValidation="False" EnableViewState="False">Add
<input id="Button1" type="button" value="button" önclick="javascript:__doPostBack('Refresh','')" />

</form>
<script language="javascript">
function showItem()
{
window.showModalDialog('A2.aspx',window,'dialogWidth:600px;dialogHeight:500px;dialogLeft:300px;dialogTop:400px;resizable:yes;status:no');

__doPostBack('Refresh','');
document.getElementById('Button1').click();
return true;

}

</script>

</body>
</html>

In Refresh Link Button I call Databind to refresh GridView. But it doesn't work of _doPostBack()

But when I add

protected void Add_Click(object sender, EventArgs e)
{
// string strScript = "<script >\n" +
//" var strReturn = window.showModalDialog('A2.aspx','desc','dialogWidth:423px;dialogHeight=355px');\n" +
//" __doPostBack('Refresh',strReturn);" +
//"</script>";
// if (!this.IsClientScriptBlockRegistered("OpenDialogScript"))
// this.RegisterStartupScript("OpenDialog", strScript);

}

to Add button , not run showItem javascript . It's Ok of _doPostBack. I don't know why.

I add a new button to call _dopostback, I click it mannually ,it's OK,
but I use
document.getElementById('Button1').click();

It doesn't work!

Confused

Re: access to parent window from dialog

mburnie

3:02 20 Jul '06

I've notched up the following test, with the following results:

Using buttons it seems that .NET sets all the buttons to be of type submit and there wasn't a __doPostBack method in the client side JavaScript. The form did postback correctly but didn't know what event to call on the server side - I'm not sure why and unfortunately don't have the time to investigate it at the moment.

Using a label button .NET adds in a __doPostBack method and calling this method from the child window works correctly.

I've attached the code below for you to take a look at.

default.aspx
---------------

<%@ Page Language="C#" AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
      <title>Untitled Page</title>
      <script language="javascript" type="text/javascript">

      function OpenTestWindow() {

           var rValue = false;
           var url = "HTMLPage.htm";

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

      }

      </script>
</head>
<body>
      <form id="form1" runat="server">
      <div>
            <asp:Label ID="Label1" runat="server" Height="91px" Text="Label" Width="314px"></asp:Label>
            <asp:Button ID="Button1" runat="server" Height="89px" OnClick="Button1_Click" Text="Send"
                  Width="163px" />
            <asp:Button ID="Button2" runat="server" Height="89px" OnClick="Button1_Click" Text="Clear"
                  Width="163px" />
            <asp:Button ID="Button3" runat="server" Height="89px" Text="Open Child"
                  Width="163px" OnClientClick="OpenTestWindow()" />
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton></div>
      </form>
</body>
</html>

Default.aspx.cs
-----------------

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
      protected void Page_Load(object sender, EventArgs e)
      {

      }
      protected void Button1_Click(object sender, EventArgs e)
      {
            System.Web.UI.WebControls.Button btn;

            btn = (System.Web.UI.WebControls.Button)sender;

            if (btn.Text == "Send")
            {
                  this.Label1.Text = "I have posted back";
            }
            else
            {
                  this.Label1.Text = "I have been cleared";
            }
      }
      protected void LinkButton1_Click(object sender, EventArgs e)
      {
            this.Label1.Text = "The link button was used";
      }
}

HTMLPage.htm - (the child page)
-----------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
      <title>Untitled Page</title>

      <script language="JavaScript" type="text/javascript">

      var m_Parent = dialogArguments;

      function callParent() {
           m_Parent.__doPostBack('LinkButton1','')
           window.close();
      }

      </script>

</head>
<body>

<span onclick="callParent()">Call the Parent</span>
</body>
</html>

I hope this helps

Mark

--
Wandering through a world full of wonder

Re: access to parent window from dialog

Kiran Beladiya

23:22 21 Jul '06

Hi Mark,
Sorry for late reply...
I saw very nice chat on interesting topic of both u guys..

Mark, you are right,
Using buttons it seems that .NET sets all the buttons to be of type submit and there wasn't a __doPostBack method in the client side JavaScript

But when?
-> If there is no validator or if you don't explicitly pass javascript in OnClientClick in server side page...Means no extra action is taken on Submit button click...then the page sent to browser have no _doPostback function rendered in its javascript.

So, For forcing the page to render the _doPostback function i set MaintainScrollPosition attibute in page tag..so the page renders javascript code to maintain scroll position which forces to render the postback function too

This is my own thinking..why _doPostback is not rendererd sometime..
If you have another answer fill free to reply

Kiran

1.33/5

Re: access to parent window from dialog

mburnie

6:55 14 Aug '06

Sorry for the slow response, I've been on holiday for the last 3 weeks Smile

Kiran Beladiya wrote:
This is my own thinking..why _doPostback is not rendererd sometime..

I think that the __doPostback function is only used when the control which caused the postback is trying to pass additional information, not normally associated with the control, or if the control would not normally cause a postback at all (i.e. a select list).

For instance a submit button wouldn't normally require a __doPostback call as ASP.NET can pick up which control caused the postback from the information in the Server.Request object. If you added client side validation then the __doPostback might be used (not sure exactly as I haven't had a chance to test it).

But a select list or a link button would require a __doPostback call as they do not normally cause the form to postback to the server.

Hope this helps

cheers Mark

--
Wandering through a world full of wonder

3.83/5

Re: access to parent window from dialog

Paul Peeters

10:13 23 Aug '06

To make sure the __doPostBack function and associated hidden form fields __EVENTTARGET and __EVENTARGUMENT are included in the rendered page you can override the OnInit function as follows:

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
ClientScript.GetPostBackEventReference(this, "");
}

In a normal scenario you would use the string - which is "__doPostBack('__Page','')" - that GetPostBackEventReference returns, but nobody says you have to.

Hope this helps,
Paul Peeters

2.00/5

Re: access to parent window from dialog

anhtn

16:47 5 Jun '08

I sorry, I want to ask you some question about window.showmodaldialog. I'm using IE7 and it has security to protect, When I run window.shomModalDialog, the location of the window IE7 is also show, so I can see link address to web but I cannot type any words into it, I made its location by location=no . I can use popup which it don't show location, can't I? Thanks very much.
Sign In·View Thread·PermaLink

Re: access to parent window from dialog

mburnie

0:32 6 Jun '08

Hi

As far as I'm aware the showModalDialog method does not accept a location parameter, among the optional features array, unless you are referring to the url parameter. Using the following example on my machine (IE7) the modal dialog opens fine without displaying a location bar.

<pre>window.showModalDialog(url, window,"dialogHeight: 300px; dialogWidth: 600px; dialogTop: 190px; dialogLeft: 220px; edge: Raised; center: Yes; help: No; resizable: No; status: No;");</pre>

If by popup you mean a DHMTL popup then you can place whatever you want within it. The window.createPopup() method is also very flexible as you populate it with html (though it can't use text boxes), but like the showModalDialog it is IE specific and does not work with other browsers.

Hope that helps

Mark

--
Wandering through a world full of wonder

Re: access to parent window from dialog

mayurmv

18:20 1 Sep '08

http://developmentzone.blogspot.com/2008/08/aspnet-modal-dialog-with-postback.html[^] http://developmentzone.blogspot.com/2008/09/aspnet-javascript-modal-dialog.html[^]
Sign In·View Thread·PermaLink	2.00/5

Last Visit: 16:42 23 Nov '09 Last Update: 16:42 23 Nov '09

Introduction

Background

How to open Modal Dialog window and How to get return value from it?

Important thing: making post back from javascript

Announcement