This post is a continuation of a series. Please look at the end of this post for more information
In previous posts we have seen how to print a page using Javascript in a normal web page. In this post I will be providing some examples on how to print the page or a part of page when the page includes Master Page also.
In previous posts, we have design a web page which is similar to a news postal page. It will show latest news into the page with header, footer and menu. Let us design the same page with the same concept. The following code shows the master page (MasterPage.Master) snippet:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="Printing.MasterPage" %>
<!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>Print with Master Page Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div id="header">
<div style="height:60px;">
<div style="float:left;background-color:#2E9AFE;width:25%;height:100%;">
<h1 style="margin:0px;">TrueWins Media</h1>
<strong>Thursday, February 12, 2011 </strong>
</div>
<div style="float:left;background-color:#FF8000;width:75%;height:100%;">
Advertisement
</div>
</div>
<div style="height:20px;background-color:#AC5A5A;">
<ul class="newsMenu" style="height:10px;">
<li><a href="http://www.truewins.com/default.aspx">Home</a></li>
<li><a href="http://www.truewins.com/news.aspx">News</a></li>
<li><a href="http://www.truewins.com/views.aspx">Views</a></li>
<li><a href="http://www.truewins.com/business.aspx">Business</a></li>
<li><a href="http://www.truewins.com/cricket.aspx">Cricket</a></li>
<li><a href="http://www.truewins.com/lifestyle.aspx">Lifestyle</a></li>
<li><a href="http://www.truewins.com/photos.aspx">Photos</a></li>
<li><a href="http://www.truewins.com/audio.aspx">Video</a></li>
<li><a href="http://www.truewins.com/events.aspx">Events</a></li>
<li><a href="http://www.truewins.com/entertainment.aspx">entertainment</a></li>
<li><a href="http://www.truewins.com/weather.aspx">Weather</a></li>
<li><a href="http://www.truewins.com/epaper.aspx">ePaper</a></li>
<li><a href="http://www.truewins.com/classifieds.aspx">Classifieds</a></li>
</ul>
</div>
<div><marquee class="spotlight" scrollamount="1">Sensex opens up by 75 points on firm global cues || Goldman Sachs warns against investing in India, China || Investors cheer Axis Bank Q3 nos; scrip jumps 5.62 pc || Sensex gains for 2nd day; rises by 210 pts || Oil supplies from Iran not hurt by payments issue: Essar || SEBI effect: ADAG stocks rattled || Sensex snaps 2-day falling streak on selective buying; up 22 pts</marquee></div>
</div>
<div id="content">
<div style="float:right;">
<ul class="buttonMenu">
<li><a href="#" onclick="PrintContent()">Print</a></li>
<li><a href="http://www.truewins.com/default.aspx">Email</a></li>
<li><a href="http://www.truewins.com/default.aspx">Comment</a></li>
<li><a href="http://www.truewins.com/default.aspx">Share</a></li>
</ul>
<div style="height:250px;width:250px;background-color:#6BD451;text-align:center;border:solid 1px black;">
<p style="padding-top:100px;D:\Blog\ImageShow\Images-size:medium;">Advertisement</p>
</div>
<div id="RelatedTopics">
<span style="D:\Blog\ImageShow\Images-size:13px;D:\Blog\ImageShow\Images-weight:bold">Related Topics</span>
<ul style="text-align:left;margin-left:20px;margin-top:5px;">
<li><a href="#">Petrol price should have been hiked by Rs 3.72, says IOC</a></li>
<li><a href="#">Oil price over $100 'not unrealistic', says Iran</a></li>
<li><a href="#">Oil price over $100 'not unrealistic', says Iran</a></li>
<li><a href="#">ADAG-SEBI settlement charge at record Rs 50 cr</a></li>
</ul>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<div>
<ul>
<li><a href="http://www.truewins.com/default.aspx">Home</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/news.aspx">News</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/views.aspx">Views</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/business.aspx">Business</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/cricket.aspx">Cricket</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/lifestyle.aspx">Lifestyle</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/photos.aspx">Photos</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/audio.aspx">Video</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/events.aspx">Events</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/entertainment.aspx">entertainment</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/weather.aspx">Weather</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/epaper.aspx">ePaper</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/classifieds.aspx">Classifieds</a></li>
</ul>
</div>
<div>
<ul style="margin:0px;">
<li><a href="http://www.truewins.com/AbountUs.aspx" target="_blank">About us</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/ContactUs.aspx" target="_blank">Contact us</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/Careers.aspx" target="_blank">Careers</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/privacypolicy.aspx" target="_blank">Policy</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/Disclaimer.aspx" target="_blank">Disclaimer</a></li>
<li>|</li>
<li><a href="http://www.truewins.com/sitemap/sitemap.aspx" target="_blank">Sitemap</a></li>
</ul>
<div>Copyright © 2011 TrueWins Media Limited. All Rights Reserved.</div>
</div>
</div>
</form>
</body>
</html>There is no c# code as we are doing nothing with code behind. The next one is the content page script (MasterPagePrint.aspx) which is using this master page.<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="MasterPagePrint.aspx.cs" Inherits="Printing.MasterPagePrint" Theme="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="news">
<h3 id="Title">Sensex rises in noon trade</h3>
<div id="newsRelatedAd" style="width:700px;height:100px;background-color:#FE2EF7">Advertisement</div>
<p>A benchmark index of Indian equities markets Tuesday rose in noon trade, helped by strong earnings reported by corporates. Gainers in front-line stocks were led by IT and telecom firms. The 30-scrip sensitive index (Sensex) of the Bombay Stock Exchange (BSE), which opened at 18,983.2 points, was ruling at 19,008.28 points -- up 126.03 points or 0.67 % from its previous close at 18,882.25 points.</p>
<p>The 50-scrip S&P CNX Nifty of the National Stock Exchange too was in the green, trading 36.55 points or 0.65 % higher at 5,691.3 points.</p>
<p>Broader markets were, however, trading dull, with the BSE midcap index ruling 0.24 % up and the BSE smallcap index trading 0.34 % higher.</p>
<p>Realty, power and energy stocks saw some selling, while gains were seen in IT and telecom scrips.</p>
<p>The market breadth was positive, with 1,431 stocks advancing compared to 1,133 scrips on the decline, while 107 stocks remained unchanged.</p>
<p>Among gainers on the Sensex were TCS, Wipro, Cipla and Tata Motors, while the losers included Tata Power, Reliance Infra, Jindal Steel and DLF.</p>
<p>Most other Asian stock markets were ruling higher Tuesday, except the Chinese stocks markets which continued to loose after the Chinese central bank's latest move to tighten monetary policy cast a gloom on trading.</p>
<p>The Chinese Shanghai Composite index shed 0.44 % to trade at 2,694.68 points, while Hong Kong's Hang Seng was ruling 0.75 % higher at 24,339.27 points.</p>
<p>The Japanese Nikkei closed flat at 10,518.98 points.</p>
</div>
</asp:Content>As you see in these scripts, we have header, footer and in the right side we have some advertisement and related links. The output of the screen looks like – |
| Page layout which uses Master Page |
Our requirement is to print the news details which shows in the content page using Javascript.
Normally in real scenario, the master page will have a print button (as it is common place) to print whatever shows on the content page. In our example also, we have a print button in the master page and that needs be used to print the web page content coded in the content page.
If you look at the master page print button script (line #43), I am calling a Javascript function PrintContent() which required to be implemented to print the content web page information.
Include this Javascript function in the Master Page
<script language="javascript" type="text/javascript">
function PrintContent() {
printWindow = window.open("", "mywindow", "location=0,status=0,scrollbars=1,resizable=1");
var strContent = "<html><head>";
strContent = strContent + "<title" + ">Print Preview</title>";
strContent = strContent + "<link href=\"App_Themes/Default/Default.css\" type=\"text/css\" rel=\"stylesheet\" />";
strContent = strContent + "</head><body>";
strContent = strContent + "<div style='width:100%;text-align:right;'>";
strContent = strContent + "<input type='button' id='btnPrint' value='Print' style='width:100px' onclick='window.print()' />";
strContent = strContent + "<input type='button' id='btnCancel' value='Cancel' style='width:100px' onclick='window.close()' />";
strContent = strContent + "</div>";
strContent = strContent + "<div style='width:100%;'>";
var newsDiv = document.createElement('div');
newsDiv.innerHTML = document.getElementById('news').innerHTML;
for (var i = 0; i < newsDiv.childNodes.length; i++) {
if (newsDiv.childNodes[i].id == 'newsRelatedAd')
newsDiv.childNodes[i].className = "Invisible"; //newsDiv.removeChild(newsDiv.childNodes[i]);
}
strContent = strContent + newsDiv.innerHTML;
strContent = strContent + "</div>";
strContent = strContent + "</body>";
printWindow.document.write(strContent);
printWindow.document.close();
printWindow.focus();
}
</script>The output of the print will be as follows  |
| Print output from the Content Page (Printing from Master Page) |
The Next post will provide more in depth understanding of how to print different parts of page using Javascript when Master Page, User Control, used
download the source code here
The other links on How to print Web Page Using Javascript:
- Web page printing using Javascript
- How to show Preview before Printing a Page using Javascript
- Appling style for the Print Preview using Javascript
- Removing unnecessary contents from the Normal page when Preview for Print
- Using window.onafterprint(), window.onbeforeprint() Javascript functions (IE Only)
- How to print Content Page Information from Master Page using Javascript
- Printing different parts of page using Javascript when Master Page, User Controls used
- Printing Single Page GridView with Preview
- Printing Multi Page GridView with Preview - 1
- Printing Multi Page GridView with Preview - 2
- Adding & Removing GridView columns in the Print Preview using JavaScript
Brilliant! Just the code I was looking for!
Thnx