Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Print-friendly ASP.NET MVC 3 view

I want to create print friendly version of my ASP.NET MVC 3 view how can I do this ? Also, what if I need to make print friendly version of few parts of the view ?

Regards.

like image 646
DotnetSparrow Avatar asked Apr 06 '11 08:04

DotnetSparrow


2 Answers

I use the same views, but have 2 CSS files (one with media="screen" and the other with media"print").

In the print CSS file I use CSS to hide all the irrelevant DOM elements using display:none;.

Example MVC View:

<html>
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
    <link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
    <div id="pageHeader">This will not be shown in print - menubar, etc.</div>
    <h1>Title</h1>
    <p>Text</p>
</body>
</html>

Example print.css file:

#pageHeader {
    display: none;
}

Have a look at this good 'A List Apart' article on CSS for printing: http://www.alistapart.com/articles/goingtoprint/

like image 129
Mark Keats Avatar answered Nov 08 '22 17:11

Mark Keats


I would do this just via CSS and not anything to do with MVC.

Just define a separate style sheet just for print. For example

<link rel="stylesheet" type="text/css" href="print.css" media="print" /> 

The advantage of doing it this ways is:

  • That's what CSS was meant for rendering the same content differently for different devices
  • Less work, you do not have to maintain 2 MVC views
  • Easier for the user, not matter what page they are on, they just press the print button on their browser and it will work, they do not have to click a separate printer friendly version link.
  • Changes you make to the CSS will be site wide, for example in your CSS for print if you do not want to print the logo or menu you define it one in your CSS and all pages will apply that style.
like image 7
Daveo Avatar answered Nov 08 '22 15:11

Daveo