码迷,mamicode.com
首页 > 其他好文 > 详细

欢迎使用CSDN-markdown编辑器

时间:2015-08-12 13:24:23      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:mvc   devexpress   报表   report   

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

欢迎使用CSDN-markdown编辑器

标签:mvc   devexpress   报表   report   

原文地址:http://blog.csdn.net/wuwo333/article/details/47441181

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!