ASP.NET MVC打印表格并实现部分视图表格打印

假设在一个页面上有众多内容,而我们只想把该页面上的表格内容打印出来,window.print()方法会把整个页面的内容打印出来,如何做到只打印表格内容呢?

既然window.print()只会打印整页的内容,何不把表格放在一个部分视图中,在部分视图中再调用window.print()方法。

Model很简单:

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

Home控制器中有一个Action方法返回Student的集合到部分视图:

    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);
        }
    }

在Home/PrintStudent.cshtml这个强类型视图中调用window.print()方法:

@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>
    /* 打印的时候让打印按钮隐藏 */
    @@media only print {
        a {
            display: none;
        }
    }
</style>

<a href="#" rel="external nofollow"  rel="external nofollow"  onclick="window.print();return false;">打印表格</a>
<table class="c">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>分数</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="#" rel="external nofollow"  rel="external nofollow"  onclick="window.print();return false;">打印表格</a>

在Home/Index.cshtml视图中,点击按钮,弹出部分视图内容:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<button id="p">打印已经确定好的内容</button>

@section scripts
{
    <script type="text/javascript">
        $(function() {
            $('#p').click(function() {
                $.ajax({
                    url: '@Url.Action("PrintStudent","Home")',
                    success: function(data) {
                        if (judgePopupBlocked) {
                            alert("浏览器禁用弹出窗口了,请允许弹出窗口");
                        }
                        var popUpWindow = window.open();
                        if (popUpWindow) {
                            $(popUpWindow.document.body).html(data);
                        } else {
                            alert("浏览器禁用弹出窗口了,请允许弹出窗口");
                        }
                    }
                });
            });
        });

        //判断浏览器是否阻止了弹出窗口
        function judgePopupBlocked() {
            var w = window.open(null, "", "width=1,height=1");
            try {
                w.close();
                return false;
            } catch (e) {
                return true;
            }
        }
    </script>
}

点击"打印已经确定好的内容"按钮:

取消禁用弹出窗口,再次点击"打印已经确定好的内容"按钮:

点击"打印表格":

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

(0)

相关推荐

  • asp.net 打印控件使用方法

    打印的效果及控制性虽然不是很好,但是也能勉强使用,应付一般的打印还是 可以的了.代码如下所示: 代码 复制代码 代码如下: //调用PrintControl.ExecWB(?,?)实现直接打印和打印预览功能.(直接用系统提供的print()方法打印无法隐藏某些区域) //preview:是否显示预览.null/false:不显示,true:显示 function printPage(preview) { try { var content=window.document.body.innerHT

  • asp.net css控制打印功能方法实例

    复制代码 代码如下: <style type="text/css">@media print//表示打印的时候.{    #nok{display:none;}//表示 id 为nok 的控件不显示.}</style> <div style="text-align: right;" id="nok">                已经上了                <%=shke.ToString(

  • .net 页面指定区域打印的方法

    使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内.详细如下: 复制代码 代码如下: <style media=print type="text/css">.noprint{visibility:hidden}</style>要打印的内容.哈哈!<p class="noprint">将不打印的代码放在这里.</p><a href="javascrīpt:window.p

  • ASP.NET网页打印(只打印相关内容/自写功能)

    昨晚朋友要求在前段时间完成的新闻的网站上加上一个功能,就是在每篇新闻浏览的页面, 加一个打印铵钮.让用户一点打印,能把整篇文章打印.一开始建议朋友,叫用户使用IE浏览器的打印功能,但是朋友说,那个打印功能是把页面的不相关的内容也打印了,用户只想打印整篇文章即可. 既然要改,照做就是了.没有这方面经验,在网上找到很多相关的ASP.NET打印例子,要么太过复杂,要么效果不太理想.最后还是结合这诸多的例子,改写一个合适的功能. 下面是改写的地方,首先在文章浏览的.aspx页面,添加一个Div,并加上r

  • 代码实现打印功能(asp.net+javascript)

    一.在服务器端实现 1.这个是在本页面上的.cs文件里写的 复制代码 代码如下: if (resultInt > 0) { //清除验证码 ,显示执行结果,并转向新的地址 Session["YanZhengMa"] = ""; String caoCode = "if(confirm('提交成功,是否打印'))" + "{" + "window.location.href='printTKZ.aspx?type

  • .net下实现Word动态填加数据打印

    今天研究了一下.net下实现Word动态填加数据打印的做法,觉得颇有收获~       以前做过Excel相关的东西,所以对OFFICE的COM有一些了解,很顺利的找到了需要引用的COM和其帮助文档~具体做法是在引用里添加 COM --------Microsoft word 11.0 object library, 然后引入命名空间: 复制代码 代码如下: using WordApplication = Microsoft.Office.Interop.Word.Application;  u

  • 关于ASP.NET页面打印技术的常用方法总结

    B/S结构导致了Web应用程序中打印的特殊性. • 程序运行在浏览器中,打印机在本地,而文件确可能在服务器上,导致了打印控制不是很灵活. • 格式如何控制和定制等,是我们开发中可能会面对的问题. 打印文档的生成 • 1.客户端脚本方式 一般情况下,主要使用JS 可以分析源页面的内容,将欲打印的页面元素提取出来,实现打印.通过分析源文档的内容,可以生成打印目标文档. 优点:客户端独立完成打印目标文档的生成,减轻服务器负荷; 缺点:源文档的分析操作复杂,并且源文档中的打印内容要有约定. • 2.服务

  • ASP.NET MVC打印表格并实现部分视图表格打印

    假设在一个页面上有众多内容,而我们只想把该页面上的表格内容打印出来,window.print()方法会把整个页面的内容打印出来,如何做到只打印表格内容呢? 既然window.print()只会打印整页的内容,何不把表格放在一个部分视图中,在部分视图中再调用window.print()方法. Model很简单: public class Student { public int Id { get; set; } public string Name { get; set; } public dec

  • ASP.NET MVC中Controller控制器向View视图传值的几种方式

    一.准备工作 创建一个ASP.NET MVC程序,然后在Models文件夹里面新添加Student实体类,用来模拟从Controller向View传递数据,Student类定义如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVCStudyDemo.Models { public class Student { public int ID { ge

  • ASP.NET MVC从控制器传递数据到视图的四种方式详解

    前奏 1. 在新建项目中的Models文件下,新建Products类: public class Products { public int Id { get; set; } public string Name { get; set; } public double Price { get; set; } } 2. 在控制器中实例化此类 var p = new Products() { Id = 1, Name = "饮料", Price = 2.5 }; 方式1:ViewData

  • 在ASP.NET MVC项目中使用RequireJS库的用法示例

    RequireJS 是一个前端模块化开发的流行工具,本身是一个Javascript的库文件,即require.js . RequireJs的主要功能: (1)实现js文件的异步加载,避免网页失去响应: (2)管理模块之间的依赖性,便于代码的编写和维护. 前端模块化开发现在有好多的工具,大体上分为两类,一类是像dojo之类的高大全,dojo v1.8之后已经内置了模块化开发组件:另一类是像require.js,sea.js 这种专心做模块化开发的工具. 从模块化划分的规则来区分,主要分为AMD.C

  • ASP.NET MVC小结之基础篇(一)

    前言:前几天要准备一个演讲,所以准备了MVC的一些基本的东西,以前也使用过MVC,但是只是使用,而不是去了解,所以趁着这个机会好好的把别人的MVC视频看了一下(是一个微软的MVP会员发布的视频,相信有些人都看过),整理除了这个笔记,共享一下子,基本MVC的所有东西都介绍了,但是都是很基础的东西.本来打算一篇发表完的,但是发现东西有点多,所以分成了两篇文章! 什么是ASP.NET MVC (1) ASP.NET MVC是微软官方提供的MVC模式编写ASP.NET Web应用程序的一个框架 (2)M

  • ASP.NET MVC把表格导出到Excel

    有关Model: namespace MvcApplication1.Models { public class Coach { public int Id { get; set; } public string Name { get; set; } } } HomeController中,借助GridView控件把内容导出到Excel: using System.Collections.Generic; using System.IO; using System.Linq; using Sys

  • ASP.NET MVC 微信JS-SDK认证

    ASP.NET MVC微信JS-SDK认证,具体内容: 写在前面 前阵子因为有个项目需要做微信自定义分享功能,因而去研究了下微信JS-SDK相关知识. 此文做个简单的记(tu)录(cao)... 开始 所有的东西都从文档开始:微信JSSDK说明文档 项目需要用到的是分享接口不过使用微信JS-SDK之前,需要做JS接口认证. 认证如下: 步骤一:绑定域名 步骤二:引入JS文件 步骤三:通过config接口注入权限验证配置 步骤四:通过ready接口处理成功验证 步骤五:通过error接口处理失败验

  • ASP.NET MVC页面重定向简单介绍

    在asp.net中页面重定向:Server.Execute("m2.aspx"); 服务器保存此页转向前的数据后,使页面转向到m2.aspx执行, 再返回本页继续执行.再将三者结果合并后返回给浏览器. 以上都是服务器端页面转向所以浏览器不出现页更改记录(显示的地址不会改变).因此,如果用户刷新此页,也许会出现一些其它意外情况. 此类页转向,可完成一些其它功能,比如访问到前一页面中的服务端控件. 一.Response.Redirect: 当浏览器请求aspx页面时,碰到Redirect(

  • 利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表

    jQuery dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器分页.查询.格式化等功能.dataTables 官网也提供了大量的演示和详细的文档进行说明,为了方便使用,这里进行详细说明. 去官网:https://www.datatables.net/ 下载最新版本是v1.10.12. 在页面引入: <link rel="stylesheet" href="~/Content_Admin/css/boots

  • ASP.NET MVC数组模型绑定详解

    在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type="text" name="[0].Name" /> <input type="text" name="[1].Name" /> <input type="text" name="[2].Name" />

随机推荐