Feel Tech Evolution: Working With PopUp In ASP.net

Wednesday, 22 February 2012

Working With PopUp In ASP.net

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 page

There 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);

}

Wednesday, 22 February 2012

Working With PopUp In ASP.net

No comments :