How to use a modal popup window in ASP.NET and pass data between the main window and the popup window.
I’m using Visual Studio Premium 2013 and the Ajax Control Toolkit.
1. Download the Ajax Control Toolkit from
https://ajaxcontroltoolkit.codeplex.com/[
^], and add it to Visual Studio's Toolbox. Instructions are under the site's
documentation tab.
2. In Visual Studio, go to File -> New -> Web Site
3. Choose "ASP.NET Web Forms Site"
4. In Solution Explorer, right-click the newly-created project and select Add -> Web Form. Specify "Main" for the item's name.
5. With Main.aspx up in design mode, add the ToolScriptManager control from the Ajax Control Kit toolbox items.
6. For my example, I created two textboxes and a "Popup" button on the Main page. One textbox contains the text "This is from Main". The second textbox will be filled in after the popup window is closed.
In Main.aspx, add a JavaScript "clicked" function and the various controls as shown in the source code below (which is the complete source for Main.aspx):
<![CDATA[
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script type="text/javascript">
function clicked()
{
location.reload();
}
</script>
<form id="form1" runat="server">
<div>
<asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server" xmlns:asp="#unknown">
</asp:toolkitscriptmanager>
<asp:textbox id="TextBox1" runat="server" xmlns:asp="#unknown">This is from Main</asp:textbox><br />
<asp:textbox id="TextBox2" runat="server" xmlns:asp="#unknown"></asp:textbox><br />
<asp:button id="Button1" runat="server" text="Popup" xmlns:asp="#unknown" />
<asp:modalpopupextender id="ModalPopupExtender1" runat="server" cancelcontrolid="Button2" xmlns:asp="#unknown">
TargetControlID="Button1" PopupControlID="Panel1" OnCancelScript="clicked()"></asp:modalpopupextender>
<asp:panel id="Panel1" runat="server" cssclass="Popup" align="center" style="display:none" xmlns:asp="#unknown">
<iframe style=" width: 350px; height: 300px;" id="irm1" src="Popup.aspx" runat="server"></iframe>
<br />
<asp:button id="Button2" runat="server" text="Close" />
</asp:panel>
</div>
</form>
</body>
</html>
7. In Solution Explorer, right-click the newly created project and select Add -> Web Form. Specify "Popup" for the item's name.
8. For my example, I inserted a literal string and created two textboxes on the Popup page. One textbox contains the text obtained from Main's textbox. The second textbox contains the text "Goodbye" and gets populated in Main's other textbox when the popup window is closed.
In Popup.aspx, add the various controls as shown in the source code below (which is the complete source for Popup.aspx):
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Hello!
<br /><asp:textbox id="TextBox1" runat="server" xmlns:asp="#unknown"></asp:textbox><br />
<asp:textbox id="TextBox2" runat="server" xmlns:asp="#unknown">Goodbye</asp:textbox>
</div>
</form>
</body>
</html>
9. In Solution Explorer, right-click Main.aspx and select View Code.
In the Page_Load method, enter the two lines that deal with the textboxes. The complete source for Main.aspx.cs is shown below:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Main : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Session["TBMain"] = TextBox1.Text;
TextBox2.Text = (string)Session["TBpopup"];
}
}
10. In Solution Explorer, right-click Popup.aspx and choose View Code.
In the Page_Load method, enter the two lines that deal with the textboxes. The complete source for Popup.aspx.cs is shown below:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Popup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = (string)Session["TBMain"];
Session["TBpopup"] = TextBox2.Text;
}
}
11. In Solution Explorer, right-click Main.aspx and choose Set As Start Page.
12. Press CTRL+F5 to test your site.
Submit an article or tip