MVC prints the table and places the table content to some views for printing.

Suppose there is a lot of content on a page, and we just want to print the table content on the page, window. the print () method prints the content of the entire page. How can we print only the content of the table?

 

Since window. print () only prints the content of the entire page, why not place the table in a partial view and call the window. print () method in some views.

 

The Model is simple:

public class Student    {        public int Id { get; set; }        public string Name { get; set; }        public decimal Score { get; set; }    }

The Home controller has an Action method that returns the collection of Student to some views:

public class HomeController : Controller    {        public ActionResult Index()        {            return View();        }        public ActionResult PrintStudent()        {            var result = new List<Student>            {                new Student(){Id = 1, Name = "darren", Score = 90.9M},                new Student(){Id = 2, Name = "smith", Score = 91.8M},                new Student(){Id = 3, Name = "kathy", Score = 98.6M}            };            return PartialView(result);        }    }

In the strong type view Home/PrintStudent. cshtml, call the window. print () method:

@ Model IEnumerable <MvcApplication1.Models. student> <style type = "text/css">. c {width: 100%; border: 1px solid green; border-collapse: collapse ;}. c td {padding: 2px; border: 1px solid green ;} </style> <style>/* Hide the print button when printing */@ media only print {a {display: none ;}} </style> <a href = "#" onclick = "window. print (); return false; "> Print the table </a> <table class =" c "> <thead> <tr> <th> NO. </th> <th> name </th> <th>> score </th> </tr> </thead> <tbody> @ foreach (var student in Model) {<tr> <td> @ student. id </td> <td> @ student. name </td> <td> @ student. score </td> </tr >}</tbody> </table> <a href = "#" onclick = "window. print (); return false; "> print the table </a>

In the Home/Index. cshtml view, click the button to bring up some view content:

@ {ViewBag. Title = "Index"; Layout = "~ /Views/Shared/_ Layout. cshtml ";}< button id =" p "> Print the determined content </button> @ section scripts {<script type =" text/javascript ">$ (function () {$ ('# p '). click (function () {$. ajax ({url: '@ Url. action ("PrintStudent", "Home") ', success: function (data) {if (judgePopupBlocked) {alert ("the browser is disabled. The pop-up window is displayed, please allow the pop-up window ");} var popUpWindow = window. open (); if (popUpWindow) {signature (popup000000000000document.body0000.html (data);} else {alert ("the browser is disabled. The pop-up window is displayed, please allow the pop-up window ") ;}}}) ;}}); // determine whether the browser has blocked the pop-up window function judgePopupBlocked () {var w = window. open (null, "", "width = 1, height = 1"); try {w. close (); return false;} catch (e) {return true ;}</script>}

Click "Print confirmed content:

 

In the disable dialog box, click "Print confirmed content" again:

 

Click "print table ":