Blue Theme Orange Theme Green Theme Red Theme
 
Nevron Chart
Home | Forums | Videos | Advertise | Certifications | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
Nevron Chart
Search :       Advanced Search »
Home » Web Forms » Modal Popup Dialog Window in ASP.NET

Modal Popup Dialog Window in ASP.NET

This sample show you how to create modal popup dialog window in ASP.NET that passes and returns multiple parameters.

Page Views : 320330
Downloads : 0
Rating :
 Rate it
Level : Beginner
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
 
DevExpress Free UI Controls
Become a Sponsor
Team Foundation Server Hosting
Become a Sponsor
 Tag Cloud
 Latest Jobs
More ... 
 Latest Interview Questions
More ... 

This sample creates parent and child webforms. The child webform is called modally by the parent passing multiple values to the child form. The child form displays the passed values allowing them to be edited and then returns the altered values back to the parent when finished. The child form is modal to only the parent form. To make the child modal to the entire desktop, see the below final note.
Scope: ASP, ASP.NET, C#, Csharp, VB.NET, Visual Basic, Java

1. Open a New Web project in Visual Studio
2.
Create two New WebForm pages named ParentWebForm and ChildWebForm
3.
Open the HTML surface for the ParentWebForm
4.
Locate the yellow line
5.
Delete all code EXCEPT the yellow line
6.
Insert the following HTML below the existing yellow line

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
HTML>
<HEAD>
<title>Parent Webform</title>
<script language="javascript">
function
OpenChild()
{
var ParmA = retvalA.value;
var ParmB = retvalB.value;
var ParmC = retvalC.value;
var MyArgs = new Array(ParmA, ParmB, ParmC);
var WinSettings = "center:yes;resizable:no;dialogHeight:300px"
// ALTER BELOW LINE - supply correct URL for Child Form
var MyArgs = window.showModalDialog("http://localhost/ModalWin/ChildWebForm.aspx", MyArgs, WinSettings);
if (MyArgs == null)
{
window.alert("Nothing returned from child. No changes made to input boxes");
}
else
{
retvalA.value=MyArgs[0].toString();
retvalB.value=MyArgs[1].toString();
retvalC.value=MyArgs[2].toString();
}
}
</script>
</HEAD>
<body>
<P><INPUT id="retvalA" type="text" value="AAA"></P>
<P><INPUT id="retvalB" type="text" value="BBB"></P>
<P><INPUT id="retvalC" type="text" value="CCC"></P>
<P><BUTTON onclick="OpenChild()" type="button">Open Child Window</BUTTON></P>
</body>
</
HTML>

7. In the above code, locate the line saying //ALTER BELOW LINE
8. Supply the correct URL for your Child Webform
9. Open the HTML surface for the ChildWebForm
10. Locate the yellow line
11. Delete all code EXCEPT the yellow line
12. Insert the following HTML below the existing yellow line

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
HTML>
<HEAD>
<TITLE>Child Webform</TITLE>
<script language="javascript">
function
Done() {
var ParmA = tbParamA.value;
var ParmB = tbParamB.value;
var ParmC = tbParamC.value;
var MyArgs = new Array(ParmA, ParmB, ParmC);
window.returnValue = MyArgs;
window.close();
}
function doInit() {
var ParmA = "Aparm";
var ParmB = "Bparm";
var ParmC = "Cparm";
var MyArgs = new Array(ParmA, ParmB, ParmC);
MyArgs = window.dialogArguments;
tbParamA.value = MyArgs[0].toString();
tbParamB.value = MyArgs[1].toString();
tbParamC.value = MyArgs[2].toString();
}
</script>
</HEAD>
<BODY onload="doInit()">
<P>Param A:<INPUT id="tbParamA" TYPE="text"></P>
<P>Param B:<INPUT ID="tbParamB" TYPE="text"></P>
<P>Param C:<INPUT ID="tbParamC" TYPE="text"></P>
<BUTTON onclick="Done()" type="button">OK</BUTTON>
</BODY>
</
HTML>

13. Set the project StartUp page to be the Parent Webform
14. Run the project.

Final Note: To make the child modal to the entire desktop, you'll need add code to the child which uses <body onblur="this.focus">.

Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post Here.
Login to add your contents and source code to this article
 Article Extensions
Contents added by uri Galuckix on Nov 24, 2011
Contents added by Edwin Cieza on Nov 01, 2009
dmasio maso!!!!
 [Top] Rate this article
 
 About the author
 
Frederick Volking
Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
Discover the top 5 tips for understanding .NET
Ricky Leeks presents the top 5 tips for understanding .NET Interoperability. Learn more.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
 
 Post a Feedback, Comment, or Question about this article
Subject:
Comment:
Discover the top 5 tips for understanding .NET Interop
Become a Sponsor
 Comments
FireFox by Ignacio On January 29, 2007
This example works perfectly with Internet Explorer, but it does not with FireFox 2.0 ¿any idea why or how to fix it?
Reply | Email | Modify 
Re: FireFox by alexis On June 24, 2007
I have a solution here: http://artlifenet.blogspot.com just clik on "aquí mismo" and download the code, please give me oyur feedback after test it
Reply | Email | Modify 
Re: Re: FireFox by duong On August 29, 2007
i not found
Reply | Email | Modify 
Re: FireFox by Roman On March 10, 2011
Hi, I have created a jQuery function: [B]showModalDialog [/B]which works on all major browsers: [B]IE, Chrome, Safari and Firefox[/B]. You can see the entire article on my blog: http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html
Reply | Email | Modify 
ary you ok? by peng On June 10, 2007
I'm fine
Reply | Email | Modify 
Modal Popup Dialog Window in ASP.NET by rocky On November 7, 2007
The code is great, it works perfect. But I want to find out a way to upload attachement file from child page and render the value to parent page. How do I do? Thanks. Rocky
Reply | Email | Modify 
HI by Camilo On January 8, 2008
Excellent code.
Reply | Email | Modify 
It works like a charm in Firefox by Evan On January 4, 2009
Safari too
Reply | Email | Modify 
vdfvfvdfvf by cvdfv On May 30, 2009
sdcdcd
Reply | Email | Modify 
User full by harish On August 5, 2009
Hi too much use full.

I have facing problem in ASP.net using C# application,
i was open the new window from window.showModalDialog
it was open properly but in this dialog box there is some button and server event there but when i click on but new again window is open that is not required i want to perform same operation on same page.

Thanks
Harish

Reply | Email | Modify 
asdfadf by Nguyen Thanh On August 16, 2009
dfadaf
Reply | Email | Modify 
__dopostback is not working by umesh On September 23, 2010
if (MyArgs == null)
{
window.alert("Nothing returned from child. No changes made to input boxes");
}
else
{
retvalA.value=MyArgs[0].toString();
retvalB.value=MyArgs[1].toString();
retvalC.value=MyArgs[2].toString();

__dopostback ('','');

}
Reply | Email | Modify 
How would I put these codes with a .master file by Michael On January 20, 2011
Hello Mr. Volking, I know that these codes work perfectly with .aspx pages with HTLM document type entries. But I am making a web site project with a Master.master, a Childmaster.master and a few .aspx pages. My question is this: The buttonlink use to open the modalPanel is located on the ChildMaster.master page. This buttonLink should open the modalPanel in every page if needed to send a message or contact me by email. It works fine when click but only in the Contact.aspx page. Where would I nest these codes ; the first part would I imagine put in the ChildMaster.master but this page has no <DocTYPE HTLM PUBLIC code(wich would give an error in Debugging mode). Would I need to put script language="javascript> under the Script run at server? The second part is about the same (no HTLM DocTYPE) so where would I put the codes needed to get the modalPanel to work with every pages? Thank you Michael D.
Reply | Email | Modify 
this is taken from asp alliance by hardik On July 4, 2011
this article is written from asp alliance site. the link for it is http://aspalliance.com/1060_How_to_Popup_a_Window_Using_DIV_Layer_in_ASPNET_1x2x.3. Please try to write your own article budy.
Reply | Email | Modify 
modal lookup by uelz On September 17, 2011
I just noticed that the above example only works if I remove the <form id="form1" runat="server"> in ASP.Net inline code of a webform (parent and child web forms).
Reply | Email | Modify 
6 Months Free & No Setup Fees ASP.NET Hosting!
 © 2012  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.