MVC4使用Devexpress Report建立主从报表

最新推荐文章于 2021-09-01 14:46:27 发布

TMajier

最新推荐文章于 2021-09-01 14:46:27 发布

阅读量8.3k

点赞数 1

分类专栏： ASP.NET网站开发文章标签： mvc devexpress 报表 report

本文链接：https://blog.csdn.net/wuwo333/article/details/47441181

版权

ASP.NET网站开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

MVC4使用Devexpress Report建立主从报表

实现效果如下：
大一班学生列表大二班学生列表

其实Dev的功能非常强大，只需要知道方法后，我们可以很方便的进行操作！以上的功能只需要拖控件，设置属性即可！
1、建立MVC4网站项目
这里写图片描述

2、在项目中添加Report文件夹，也可以直接将报表建立在View文件夹下
这里写图片描述

3、在添加报表之前，先建立好需要使用的实体对象，方便在建立报表时候进行引用；建立ClassModel和StudentModel

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcDevReportTest.Models
{
    public class StudentModel
    {
        public string StudentName { get; set; }
        public string Sex { get; set; }
        public string Age { get; set; }
    }

    public class ClassModel
    {
        public string ClassName { get; set; }
        public List<StudentModel> StudentList { get; set; }
    }
}

4、在新建立的report文件夹下添加报表
这里写图片描述

这里写图片描述

5、为新报表绑定数据类型
这里写图片描述

这里写图片描述

这里写图片描述
6、在报表的Details中添加从报表，并且将数据源绑定为StudentList

7、设计报表并绑定数据，为DetailsReport添加ReportHeader和ReportFooter
这里写图片描述

设置Reprot为多列模式，Multi-Column设置为按数量排列；Column Count数量设置为3，即一行3列；Multi-ColumnLayout设置为AcrossThenDown，先横向排列再换行；
这里写图片描述

如果需要为每个班级分页，需要设置ReportFooter，并且将Pagebreak，换行符标记为
这里写图片描述

8、添加承载Report的Document

这里写图片描述

下面的CSS样式和JS代码需要手动复制到使用报表的位置！
这里写图片描述
这里需要注意，JS代码一定要加在Jquery之后，所以这里我加在了scripts节点中；
下面是Layout的代码；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@section scripts{
    @Html.DevExpress().GetStyleSheets(
    new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
    new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
    new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
    new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Report },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler },
    new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Spreadsheet },
    new StyleSheet { ExtensionSuite = ExtensionSuite.SpellChecker }
)
    @Html.DevExpress().GetScripts(
    new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
    new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
    new Script { ExtensionSuite = ExtensionSuite.GridView },
    new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
    new Script { ExtensionSuite = ExtensionSuite.Editors },
    new Script { ExtensionSuite = ExtensionSuite.Chart },
    new Script { ExtensionSuite = ExtensionSuite.Report },
    new Script { ExtensionSuite = ExtensionSuite.Scheduler },
    new Script { ExtensionSuite = ExtensionSuite.TreeList },
    new Script { ExtensionSuite = ExtensionSuite.Spreadsheet },
    new Script { ExtensionSuite = ExtensionSuite.SpellChecker }
)

    @Html.Action("DocumentViewerPartial")
}

还有很重要的一点，需要在webconfig中把embedRequiredClientLibraries设置为true
还有很重要的一点，需要在webconfig中把embedRequiredClientLibraries设置为true
还有很重要的一点，需要在webconfig中把embedRequiredClientLibraries设置为true

建立成功后，会在HomeController中添加报表相关的代码，如下所示；我们只需要将数据集合赋给Report即可

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DevExpress.Web.Mvc;
using MvcDevReportTest.Models;

namespace MvcDevReportTest.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }


        MvcDevReportTest.Report.XtraReport1 report = new MvcDevReportTest.Report.XtraReport1();

        public ActionResult DocumentViewerPartial()
        {
            List<ClassModel> modelList = new List<ClassModel>();
            modelList.Add(new ClassModel
            {
                ClassName = "大一班",
                StudentList = new List<StudentModel> { 
                 new StudentModel{
                  StudentName="小张",
                   Age="5岁",
                    Sex="男"
                 },   
                 new StudentModel{
                  StudentName="小张",
                   Age="5岁",
                    Sex="男"
                 },  
                 new StudentModel{
                  StudentName="小张",
                   Age="5岁",
                    Sex="男"
                 },   
                 new StudentModel{
                  StudentName="小张",
                   Age="5岁",
                    Sex="男"
                 }
                }
            });
            modelList.Add(new ClassModel
            {
                ClassName = "大二班",
                StudentList = new List<StudentModel> { 
                 new StudentModel{
                  StudentName="小牛",
                   Age="5岁",
                    Sex="男"
                 },   
                 new StudentModel{
                  StudentName="小牛",
                   Age="5岁",
                    Sex="男"
                 },  
                 new StudentModel{
                  StudentName="小牛",
                   Age="5岁",
                    Sex="男"
                 },   
                 new StudentModel{
                  StudentName="小牛",
                   Age="5岁",
                    Sex="男"
                 }
                }
            });

            report.DataSource = modelList;
            return PartialView("_DocumentViewerPartial", report);
        }

        public ActionResult DocumentViewerPartialExport()
        {
            return DocumentViewerExtension.ExportTo(report, Request);
        }
    }
}

这样就实现主从报表的设计了！我使用的是devexpress14.2.3版本！
代码如下：http://download.csdn.net/detail/wuwo333/8994635

TMajier

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
MVC4使用Devexpress Report建立主从报表

MVC4使用Devexpress Report建立主从报表实现效果如下：其实Dev的功能非常强大，只需要知道方法后，我们可以很方便的进行操作！以上的功能只需要拖控件，设置属性即可！ 1、建立MVC4网站项目 2、在项目中添加Report文件夹，也可以直接将报表建立在View文件夹下 3、在添加报表之前，先建立好需要使用的实体对象，方便在建立报表时候进行引用；建立ClassModel和Stu
复制链接

扫一扫