Introduction

In my previous article, you learned about how to create a Model Popup in ASP.NET Application by using Ajax.

But my previous article was about opening a Panel in Model Popup, it might be possible that you want to use too many items or classes in the Model Popup in that case using a Panel can become hectic, in those cases you need to use a New WebForm as a Popup so my this article will show you how you can open a New Web Form in the Model Popup.

Step 1. If you are working on the previous application that was created in my previous article then you don't need to Add New add a new Ajax Toolkit for this article, and if you are Creating a New Web Application then first of all add an Ajax Toolkit that can be either downloaded from the Ajax Website or can be taken from the Zip File that I had provided at the beginning of this Article.

Ajax control

After attaching the Toolkit with the application you need to register this in your application which can be done by writing this code.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Step 2. Now you need to add a new Web Page to your application that you want to open as a Model Popup.

After adding the Web Page create a Form in the Web Page that will be filled by the End User in the Popup Window.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication26.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td>
                    <asp:Label ID="Label1" runat="server" CssClass="lbl" Text="First Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label2" runat="server" CssClass="lbl" Text="Middle Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label3" runat="server" CssClass="lbl" Text="Last Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label4" runat="server" CssClass="lbl" Text="Gender"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label5" runat="server" CssClass="lbl" Text="Age"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox5" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label6" runat="server" CssClass="lbl" Text="City"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox6" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label7" runat="server" CssClass="lbl" Text="State"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox7" runat="server" Font-Size="14px"></asp:TextBox>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Now our work on the second Web Form is completed, we need to show it in the Model Popup of the first Web Page.

Step 3. Now, the next step is to add the Script Manager to your application so that you can use the Tools of Ajax.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

Now we can call the ModelPopupExtender in our application.

<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
    CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>

In ModelPopupExtender we pass a few IDs such as which ID will be used to open the Popup, which ID will be used to close the Popup, and on which ID Popup is to be open.

Step 4. Here I used a Panel as a Popup and two buttons for opening and closing the application.

Under the Panel, you need to add the IFrame that will be used to open the Web Form in the Panel.

<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style="display:none">
    <iframe style="width: 350px; height: 300px;" id="irm1" src="WebForm2.aspx" runat="server"></iframe>
    <br/>
    <asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>

As you can see I had shown the IFrame inside the Panel, that's because we can't use an IFrame directly in the popup so for that we need a Panel and inside the Panel our Web Form will be opened, but don't worry; it will not at all disturb the working of your second Web Form, you can think a Panel as a container of IFrame and IFrame as container of WebForm. the second WebForm name would be provided in the "src" of IFrame.

But still now the Closing Button for the Popup will be provided in the Panel only otherwise "Your Popup will not be opened in the output window", that's because you need to call the closing button on the same WebForm on which Popup is to be shown.

Step 5. Your complete code would be as follows.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication26.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .Background {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }
        .Popup {
            background-color: #FFFFFF;
            border-width: 3px;
            border-style: solid;
            border-color: black;
            padding-top: 10px;
            padding-left: 10px;
            width: 400px;
            height: 350px;
        }
        .lbl {
            font-size: 16px;
            font-style: italic;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" />
        <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
            CancelControlID="Button2" BackgroundCssClass="Background">
        </cc1:ModalPopupExtender>
        <asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style="display:none">
            <iframe style="width: 350px; height: 300px;" id="irm1" src="WebForm2.aspx" runat="server"></iframe>
            <br/>
            <asp:Button ID="Button2" runat="server" Text="Close" />
        </asp:Panel>
    </form>
</body>
</html>

Output

Now you can run your program and will see the output.

Show modal popup

Now a Popup Window will be opened where the data will be shown that you had provided in the second Web Form.

Registration page