Whenever
we build any web applications it can have requirements to work with
popup windows. For example: To pick a date for a date field in an aspx
page, we can place a calendar control on a popup so that user can select
a date from the calendar instead of typing himself, a simple date
picker control. This article will help you understand some of tasks that
we more often do with popup windows.
Refreshing a parent page from a popup ASP.Net pageThere
are situations where we will be required to populate the information’s
entered on the popups to the parent page and refresh the parent page so
that it can be accessed in the server side. The below example will help
us in achieving it.
The below example will populate the entered
name in the child.aspx(popup) to the parent(Parent.aspx) and submit the
page to the server.
Parent.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Parent.aspx.cs" Inherits="Parent" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script language="javascript">
function OpenWindow(strChildPageUrl)
{
var testwindow = window.open(strChildPageUrl,"Child","width=400px,height=400px,
top=0,left=0,scrollbars=1");
}
</script>
</head>
<body>
<form runat="Server">
<div>
<asp:textbox id="txtName" runat="server"></asp:textbox>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click"
Text="Get Value" />
<input type="button" id="Button1" value="Enter Name"
onclick="OpenWindow('Child.aspx')" />
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Parent : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
protected void Button2_Click(object sender, EventArgs e)
{
if (txtName.Text != "")
Response.Write(txtName.Text);
}
}
child.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Child.aspx.cs"
Inherits="Child" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript">
function SubmitToParent()
{
window.opener.document.forms[0].txtName.value =
document.getElementById('txtChildName').value;
window.opener.document.forms[0].submit();
self.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtChildName" runat="server"></asp:TextBox>
<input type="button" id="Button1" value="Submit to Parent"
onclick="SubmitToParent()" />
</div>
</form>
</body>
</html>
Window.Open Clears Parent page and writes [Object]
Sometimes we will have requirements to open an asp.net page as a popup
when we click a hyperlink. Consider the below code,
<a href="javascript:window.open('http:/google.com')"> google</a>
The above code will clear the existing content on the page and will
output only [Object]. This behaviour is because the actual return value of
Window.Open function is the window object itself.
To prevent the above behaviour and have the parent page without
clearing its existing content we need to change the above code similar to below,
<a href="javascript:void(window.open('http:/google.com'))"> google</a>
or
<a href="#" onclick="javascript:window.open('http:/google.com');
return false;"> google</a>
Opening ASP.Net Popup window in specific location of the screen
Opening ASP.Net Popup window in specific location of the screen
Sometimes we would like to open our popup window on
specific location on our screen. This can be done by MoveTo()
method of the window object.
function OpenWindow(strChildPageUrl)
{
var testwindow = window.open(strChildPageUrl,"Child",
"width=400px,height=400px,top=0,left=0,scrollbars=1");
testwindow.moveTo(100,0);
}
