Baskaran Ramasamy: Asp.net Web Form in the Model Popup(Ajax Tool Kit).

Asp.net Web Form in the Model Popup(Ajax Tool Kit).

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.

After attaching the Toolkit with the Application you need to register this in your Application that 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>

</head>

<body>

<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, now we just need to show it in the Model Popup of first Web Page.

Step 3

Now 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 few ID's like which ID will be used to open the Popup, which ID will be used to close the Popup, on which ID Popup is to be open.

Step 4

Here I had used Panel as 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">

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

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

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

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

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

Baskaran Ramasamy

Friday, 1 April 2016

Asp.net Web Form in the Model Popup(Ajax Tool Kit).

No comments: