[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5492
  • Last Modified:

ASP.net Master page - print content only

Hi
My ASP.net master page has three content panes, imaginably called content1, content2, content3
User wants a "Print" button, so I added
                <a href="JavaScript:window.print();">Print this page</a>
This prints the whole pages, whereas I'd like it to only print the content3 area (other areas are menus, logo)
Help please. I would rather not have to have a "printer friendly" version with another copy of page.
Thanks
0
rwallacej
Asked:
rwallacej
  • 5
  • 2
1 Solution
 
Sinoj SebastianCommented:
You have to make separate CSS for print and screen

<style type="text/css" media="print">
// CSS for printing
// hide your menu and all here
</style>

<style type="text/css" media="screen">
// CSS for Browser
// use you usual CSS here
</style>
0
 
rwallacejAuthor Commented:
can you elaborate a bit please?  say this is the "master page" and I want to print ContentPlaceHolder2
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="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 runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        This is the links here
    </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        ...this is what I want to print...
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
Sinoj SebastianCommented:
give an Id to the first div
    <div id="links">
        This is the links here
    </div>
Now you need to remove this div from printout. right?

<style type="text/css" media="print">
   #links { display:none }
</style>

Now print the page from your browser
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="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 runat="server">
    <title>Untitled Page</title>
    <style type="text/css" media="print">
       #links { display:none }
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="links">
        This is the links here
    </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        ...this is what I want to print...
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Open in new window

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
rwallacejAuthor Commented:
HI,
your example works great. Thank-you.
My problem is now that when I put it onto the "real" page, my left panel does not appear in view mode !
any ideas?
thanks
0
 
rwallacejAuthor Commented:
this may be as the "real" page uses an external stylesheet, I see the "media" section in your style - how do I apply this to external css?
0
 
rwallacejAuthor Commented:
tis OK, I'm sorted
0
 
rwallacejAuthor Commented:
great solution
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now