ShowModalDialog Example – How to Save Popup Form Information and Close the Modal Popup Window

In this article I will go through a technique that you can use when working with a modal popup that lets you store form information from your popup to later use with your main Web form.

In earlier articles I have covered some of the general functions and benefits of using the ShowModalDialog function that I will expand on this article. If you have questions about some of the code I’ve used in this article, then please take a look at my earlier articles that might help explain some of the concepts:

There are two straightforward ways that you can use to handle interactions between your modal popup (child) form and its instantiating (parent) form.

Pure HTML/JavaScript

For starters you can use pure HTML and JavaScript to set hidden text fields in your parent form with the information entered by a user in the child dialog form. This is a useful technique but you will need to escape and un-escape special characters that JavaScript can’t handle when you are passing client-entered values.

ASP.NET/JavaScript

Another method that you can use to store information from your modal child dialog form is to combine your Server-Side logic with your Client Side JavaScript logic. You can do so using a code-behind ASP.NET button click event in combination with the ASP.NET ClientScriptManager.RegisterClientScriptBlock Method.

Unlike the pure HTML/JavaScript method mentioned earlier, you don’t need to worry about client entered values breaking your JavaScript.

The basics of using this technique involves saving your popup form’s values into the ASP.NET session, or directly to your database and then invoking the JavaScript self.close() function call from your codebehind using the ClientScriptManager.RegisterClientScriptBlock Method.

Once the information entered by the user in the modal popup form has been saved and the popup has been closed, the information entered is available through the session state or database to the parent form. Then, when the user clicks the save button on the parent form, all of the information is available to be processed.

Code Example for Saving Modal Popup Form Field Information

The Main Page (Parent Page)

Here is the sample code for the Parent form page. Note that both examples are written in C#, but the VB looks quite similar. In an earlier example I have posted the VB versions of these pages.

When running this example:

first press the step #1 button to open the modal dialog form.
Then you can enter general text in the modal dialog’s text area and press the save button.
The modal dialog will close itself and set the text you entered into the ASP.NET session state.
When you press the button Save the Main Parent Form, the information entered from the child popup form will be retrieved from the ASP.NET session and will be shown in the read-only text area on the parent form.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
 protected void btnMainFormSaveEvent_Click(object sender, EventArgs e)
 {
 tbInformationFromModalPopup.Text = (string) Session["ModalSaveInformation"];
 }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
 <script language=javascript type="text/javascript">
 function openModalForm() {
 window.showModalDialog('CSharpModalChild.aspx', '', 'status:1; resizable:1; dialogWidth:900px; dialogHeight:500px; dialogTop=50px; dialogLeft:100px')
 }
</script>
</head>
<body>
 <form id="form1" runat="server">
 Step 1:
 <input id="Button1" type="button" value="Open Modal Dialog" onClick="openModalForm();" />
 <br />
 Step 2:
 <asp:Button ID="btnMainFormSaveEvent" runat="server" Text="Save the main Parent Form" OnClick="btnMainFormSaveEvent_Click" />
 <br />
 <asp:TextBox ID="tbInformationFromModalPopup" runat="server" ReadOnly=true 
 Height="92px" TextMode="MultiLine" Width="204px"></asp:TextBox>
 <br />
 </form>
</body>
</html>

The Modal Page (Child Page)

Here is the sample code for the child modal popup form. This page lets the user enter text into a form field and then when the Close Popup Form button is clicked, the modal popup form will save the text into the ASP.NET session state and then will register client-side JavaScript that will make the modal popup form close itself.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
 protected void Page_Load(object sender, EventArgs e)
 {
 if (!Page.IsPostBack)
 {
 txtInformationArea.Text = "New Page Load. Add Text Here.";
 }
 }
 protected void Button1_Click(object sender, EventArgs e)
 {
 // Perform Code Behind Actions Here
 // For Example Save form values to the Session or to your Database
 Session["ModalSaveInformation"] = "Form was submitted. Information from Text Area 1 here: " + txtInformationArea.Text;

 // Register the Script to close the current modal window.
 StringBuilder sb = new StringBuilder();
 sb.Append("<script type=\"text/javascript\">");
 sb.Append("self.close();</");
 sb.Append("script>");
 ClientScript.RegisterClientScriptBlock(Page.GetType(), "MyCloseScript", sb.ToString());
 // In VB.NET Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "MyCloseScript", sb.ToString(), True)

 }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
 <script language="javascript" type="text/javascript">
 </script>
 <base target="_self" />
</head>
<body onblur="alert('Please complete the form before you continue.');">
 <form id="form1" runat="server">
 <asp:TextBox ID="txtInformationArea" runat="server" Height="46px" 
 TextMode="MultiLine" Width="255px"></asp:TextBox>
 <br />
 <asp:Button ID="Button1" runat="server" Text="Close Popup Form" OnClick="Button1_Click" />
 </form>
</body>
</html>

ShowModalDialog Example – How to Save Popup Form Information and Close the Modal Popup Window