Asp.Net webform popup in a new window – with a changed title text

Recently came across with a small issue which actually took lot of valuable time of my team mate as it may sound simple but was really tricky.

Issue description: You have a webform. On click of a button you need to open a popup window but title of the popup window should be changed. by default title is the url of the popup window.

Solution:

<pre><%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="PilotProject._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type ="text/javascript" >

function Test() {
        var popup = window.open('', 'name', 'height=200,width=300');
var doc = popup.document;
doc.write('<html><head><title>New popup title </title>');
doc.write('<link rel="stylesheet" href="js.css">');
doc.write('</head><body><p>New window in a popup.</p>');
doc.write('<p><a href="javascript:self.close()">close</a> the popup.</p>');
doc.write('</body></html>');
doc.close();
} </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
      <asp:Button ID="btntest" runat ="server" OnClientClick="Test();" Text ="Test" />
</asp:Content>

Output looks like below. PLease note the different title bar text on the popup window.

Thing to notice here is that we are inserting a new html document in the popup window.and new <title> tage is also included.

Caution: If you are trying to do this in form which already has a title then it will throw an error saying that you cannot have two title
tags in a document. Though it will work it works fine if your webform has a master page with a title. Strange but it works 🙂

UPDATE: As i mentioned if you will try  to open a popup page without master page using javascript then it will throw an error for multiple <title> tags.

It happens because i was keeping the script in Head section of the parent page. If you keep the script in a .js file and include a reference in the parent page it will work fine. or just keep the script tag in <body> section.

Here is the code- without master page.

Parent.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="PilotProject.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 id="Head1" runat="server">
    <title>Parent</title>
    <script src="Scripts/Common.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnTest" Text="Test" runat="server" OnClientClick="OpenPop();" />
    </div>
    </form>
</body>
</html>

Here is the script to be included in a separate tag.

Common.js:

function OpenPop() {
    var popup = window.open('', 'name', 'width:300,height:400');
    if (popup != null) {
        var doc = popup.document;
        doc.write('<html><head> <title>I am new pop up</title></head>');
        doc.write('<body>New Window in pop up <a href="javascript:self.close();">Close this</a> </body>');
        doc.write('</html>');
        doc.close();
    }
}

The new popup window will have the new title.
Thanks Robin for your input on this!
I hope it helps!

Advertisements

About saxenapraveen

I work with Microsoft and have 12 years of experience in developing,designing and leading reliable and scalable solutions for cloud and device ready businesses.

Posted on August 29, 2012, in .NET, Asp.Net WebForms, C#, Javascript and tagged , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: