MVC prints a table and places the table content in some views for printing. mvc views

MVC prints a table and places the table content in some views for printing. mvc views
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 ":

A part of the content is printed in an excel table. Later, some content needs to be added, but the printer cannot print the added content. In EXCEL, select your table, including the added content. Go to the menu, select "print area" under "file", and "set print area ",
How can I print two parts of an excel table on a piece of paper? There are two methods you like:
1. Copy the table
2. In the print setting (depending on the printer type, some may not work), set one paper partition, and then print two copies.