CODEWITHSUNDEEP
asp.netcssasp.net-mvc-3printing
DotnetSparrow
DotnetSparrow

Reputation: 27996

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.

Upvotes: 15

Views: 17198

Answers (2)

Daveo
Daveo

Reputation: 19872

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.

Upvotes: 7

Mark Keats
Mark Keats

Reputation: 1400

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/

Upvotes: 18

Related Questions