Modal Popup Dialog Window in ASP.NET


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.

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">


Reference : click here

Advertisements

14 thoughts on “Modal Popup Dialog Window in ASP.NET

  1. This fine working.

    I am new in ASP.NET using VB.

    I create dialog window , Button1.Attributes.Add(“onclick”, “window.showModalDialog(‘Default2.aspx’,’dialogWidth:200px, dialogHeight:125px, status:no, center:yes’)”)

    When default2.aspx open how to close it and how to retrive selected value using vb.net not in javascript.

    Please send me.

  2. This is good contain with example. You gave real exmple so its easy to understand.I think fresher should refer ur blog for their query……

  3. this is not working fine with FireFox. e.g. status, address bars does not hide in FireFox.
    Would you plz tell me solution for this issue.
    Thanks in advance.

  4. This is an honest post. This post give really quality data.I’m definitely progressing to look at it.Really terribly helpful tips are provided here.thank you such a lot.Keep up the great work.

  5. hi there, its not working for me initially its working fine till i dont open the child web form page, when ever i click on the button to open the child web form , the desired windows get opened but with out any data in it(like a blank page). plz suggest how to sort out this situation.

    Thanks
    Daman

  6. Hello, i read your blog from time to time and i own a similar one and i was just curious if you get a lot of
    spam remarks? If so how do you prevent it, any plugin or anything you can recommend?
    I get so much lately it’s driving me insane so any help is very much appreciated.

    1. Tanya,
      Yes I do get lots of spam and all. but I own my blog with wordpress. so it has already spam protector with it. so i need not to do anything for it.

  7. Have you ever thought about writing an ebook or guest authoring on other sites?
    I have a blog based on the same topics you discuss and would really
    like to have you share some stories/information.
    I know my readers would appreciate your work. If you are even remotely interested, feel free to send me an email.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s