CodeBetter.Com
CodeBetter.Com
RSS 2.0 via Feedburner
           Do you Twitter? Follow us @CodeBetter

Raymond Lewallen

Framework Design, Agile Coach, President Oklahoma City Developers Group, Microsoft MVP C#, TDD, Continuous Integration, Patterns and Practices, Domain Driven Design, Speaker, VB.Net, C# and Sql Server

Making modal dialog windows work in ASP.Net the easy way

This is an old solution to an old problem, but since somebody asked me if I knew how to solve this problem, I thought I'd post the solution here to make it easier for people to find in the future.

The problem has to do with ASP.Net and modal windows (windows opened by parent windows using 'window.showModalDialog()'). If you've ever launched a modal window and issued a postback by clicking a button or tried to redirect, you know that it always opens a brand new window, and that is super annoying and unusable.

So, if you want to know how to use modal windows in Asp.Net and not have them keep opening new windows, the solution (and I my friend will can testify this simple solution works) does work. There are much more elaborate solutions posted out on the internet, but trust me, its just this easy, even though slightly inconvenient.

First, in the HEAD of EACH PAGE that will be as a modal window or called from a modal window, you have to have the following:

<script language="javascript">window.name="DefaultPage"</script>

This name you give each page MUST be unique for each page.

Now, just set the target of the form in your page to target the name of the page the form exists on, like such:

<form id="form1" runat="server" target="DefaultPage"

With a completely new and blank page, the whole thing would look like this:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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">window.name="DefaultPage"</script>
</head>
<body>
    <form id="form1" runat="server" target="DefaultPage">
    <div>
    
    </div>
    </form>
</body>
</html>



Comments

Firoz Ansari said:

You can also put <base target="_self"> inside the HEAD element of the
child(popup) window to stop open new instance of window.
Visit @
http://www.dotnetjunkies.com/tutorial/a72fcfd7-3874-408a-8fce-541bec74c704.dcik

Firoz Ansari
# December 8, 2005 11:22 PM

Raymond Lewallen said:

Firoz,

I had read that somewhere before a long time ago, and for whatever reason I could not get it to work correctly. By the time I figured out the solution that I'm using now, shown above, I had changed enough stuff about how my modal windows were working that maybe now your solution will work for me. I can see how your solution is easier to maintain, for sure.
# December 9, 2005 9:36 AM

Brendan Tompkins said:

Man, this has always been a problem for me. The issue I see with your solution is that the window isn't modal? And you really don't have any communication with the calling page this way...

I've proposed other solutions too, but they have problems as well. Ugh. Really should be a better way to create a modal window baked in to the browsers or at least give us an ASP.NET control that handles this elegantly.
# December 9, 2005 9:40 AM

Raymond Lewallen said:

On the contrary, it is an actual modal window, opened with window.showModalDialog. I use javascript to handle moving variables and data back and forth between parents and modals. I really don't like doing it this way, having to use javascript, but for now, its all we've got and its working.
# December 9, 2005 10:04 AM

Brendan Tompkins said:

Oh, okay. Sorry I misunderstood. I should look at this. I've proposed another method here:

http://codebetter.com/blogs/brendan.tompkins/archive/2005/08/22/131048.aspx

That uses divs... The nice thing about this, is that all of your controls are in the same class as the calling page, and you can reference them easily without using JS... But as I said, there are issues with that too. Dragging doesn't work all that well cross browser, and it's not truly modal..

# December 9, 2005 10:25 AM

John Papa said:

Ray .. I found that in addition to your code I had to put the <base target="_self"> within the <HEAD></HEAD> section. Then it all worked like a champ (or chump) :-)

Thanks.
# December 9, 2005 11:37 AM

John Papa said:

Hey Brendan ... I looked at your solution (pretty cool by the way) .... and I ran the demo. But it appears that this demo does not prevent the user from clicking on controls in the background (thus not acting modally). Am I running the wrong demo?
# December 9, 2005 11:41 AM

Raymond Lewallen said:

That's interesting John, because I don't use the <base target="_self"> in the HEAD, and mine still works fine. Disclaimer: "It works on my machine."
# December 9, 2005 11:49 AM

John Papa said:

Ray ... Ah, I see now. I had to include this tag:

<works bluemoon="yes" mymachine="yes" onSundays="yes" sometimesOnMondays="yes" onDayGamesOnGrass="yes"/>

:-)
# December 9, 2005 12:46 PM

Brendan Tompkins said:

John,

Thanks, yes..that's what I was saying about it not really being modal. That's about where my JavaScript skills end unfortounately.. Wish someone like componentart would make a real modal window..

# December 9, 2005 1:56 PM

Firoz Ansari said:

As I have also put my comment in Brendan blog, showing modal dialog with DIV/JavaScript has its own problem.
1. Its look really annoying when you move DIV dialog box over any window control like dropdown/listbox control.
2. You always have to pre-render content of your modal dialog box before showing parent page. Or otherwise you have post back whole page to get new content of child window. In most scenario developer always wants to render content of child window based on some selection of parent page.
3. Its require more JavaScript effort to disable all controls of parent page when child window is opened.
4. I usually ended with mess up when code implementation is placed in single place for both pages (parent & child). showModalDialog allow me to have clean separation of code for both pages (parent & child).

Regards,
Firoz Ansari
# December 10, 2005 12:27 AM

Simon D said:

Thanks Ray, this worked perfectly for me. I thought I was oing to have a nightmare getting my page to work the way I needed it, but god bless google and your blog :)
# January 14, 2006 8:04 AM

WebMaster said:

Thanks Helped alot
# January 18, 2006 2:23 PM

Parag said:

Thanks !
This is an excellent solution without lot of fancy window.opener , etc
I had tried target =_self which did not work !
# April 19, 2006 2:14 PM

Alan said:

Nice one. Thanks for this solution.
# June 23, 2006 10:42 AM

Stephan Smetsers said:

Hi,

I have created a true MVC-pattern for ASP.NET that allows dialogs windows in ASP.NET just like you would do when using WinForms.

I am using a technique called server-side-blocked calls (server-side AJAX).

On my website there are four demos online and also a recording of a live-coding-example (executable desktoprecording).

http://www.inchl.nl

The framework is freeware and is currently being applied in several projects.

It's real cool, please tell all your friends about it!

It has saved me a lot of developping time.

Kind regards,

Stephan Smetsers

stephansmetsers@hotmail.com

http://www.inchl.nl

# September 27, 2006 5:13 PM

mjp said:

Thanks mate, I've been googling all day to find a workaround for my showmodalwindow page with ajax - the moment I dropped an updatepanel on the page it all went pearshaped ;-).

Adding

<script type="text/javascript">window.name="MyPage"</script>

to the head, and

target="MyPage"

to the form tag sorted everything.

# October 10, 2006 2:40 AM

Nadeem Iqbal said:

Its work perfectly, even in AJAX compliance page

Thanks and keep it up, its worth

# May 2, 2007 5:17 AM

Andre said:

Thanks, this was a perfect solution for a very frustrating problem.

# November 1, 2007 6:08 AM

Leave a Comment

(required)  
(optional)
(required)  

Enter the numbers above:
Add

About Raymond Lewallen

Working primarily in the public sector during his career, Raymond has designed and built several high profile enterprise level applications for all levels of the government. Raymond now works as a solutions architect for EMC. Raymond is an agile coach, Microsoft MVP C# and also president of the Oklahoma City Developers Group and Oklahoma Agile Developers Group. Raymond spends a lot of his time learning and teaching such things as Test Driven Development, Domain Driven Design, Design Patterns and Extreme Programming practices and principles, to name a few. Raymond is also an advocate of Alt.Net. Raymond is primarily a framework guy, so don't ask him anything about UI :) Check out Devlicio.us!