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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.