ActiveReports 支持与 ASP.Net MVC 中集成并使用JSViewer用来展示报表。本节就来分享如何展示将ActiveReports 集成到MVC 项目中。
在新建项目之前要确定已经安装了 Node.js
1.打开 Visual Studio 新建项目
注意
2. 安装ActiveReports Viewer MVC Nuget 包
添加步骤如图,右键单击项目名称->管理 Nuget程序包→输入 GrapeCity.ActiveReports.Aspnet.Viewer ,选择安装
ASP.NET MVC 添加需要的引用:GrapeCity.ActiveReports.Aspnet.Viewer
如果是.Net Core 项目安装:GrapeCity.ActiveReports.AspnetCore.Viewer
3. 在项目中,添加新建项,在新建项的选择栏中选择>>OWINStartupClass
在Startup1.cs中输入以下代码信息:
注意
3. 添加一个新的Reports文件夹,存放设计好的报表或添加新的报表文件
4. 添加 Scripts 文件夹,用于存放JSViewer 需要的js 和 css引用文件
获取 JSViewer需要的资源文件
- 在VS 程序包管理控制台中输入命令:npm install @grapecity/ar-viewer,安装完成后可在新建"项目路径下"找到node_modules 文件夹,然后将所有文件拷贝到 Scripts路径
2 设置js和css 文件属性 复制到输出目录 为始终复制,生成操作为嵌入的资源
5. 修改Views中Home 的Index页面的内容,您也可以新建View添加 JSViewer
- 定义div用于绑定JSViewer
<link href="~/Scripts/jsViewer.min.css" rel="stylesheet" /> <script src="~/Scripts/jsViewer.min.js"></script> </head> <body> <!--Add the DIV element that will contain the JSViewer in the target HTML page--> <div style="float:right;width:100% ;height:800px" id="viewerContainer"> </div> </body>
2. 添加 js脚本用于初始化JSViewer
完整页面的代码:
到这儿基本的步骤就完成了,可以直接跑起来运行了。
预览效果:
6. 常见问题
如果运行后报一个No license的错,这是由于项目中缺失licenses.licx文件导致的,可通过以下方式添加 License.licx文件
- 在项目中添加新项,后选择 Webform 项
- 安装 grapecity.activereports.web Nuget 包
- 将 WebForm1.aspx 切到设计模式后,将左侧工具箱的 ActiveReports 14节点下的 WebViewer 拖拽到 设计区域中。这样会自动生成License.licx文件,注意这个文件自动生成如果没有必要千万不要修改。
- 在项目中添加新项,后选择 Webform 项
2. 如果运行后发现JSViewer 工具栏被遮挡,可修改 Views→ Share→Layout.cshtml 模板页的,删除不必要的 div元素。
3. JSViewer 默认是加载 Custom.json 文件设置工具栏等资源的语言的,所以如果要本地化 JSViewer资源,可修改此文件后在 JSViewer初始化过程中
4、如果出现 "未找到报表文件 RdlReport1.rdlx"
注意
如需寻求在线帮助,请访问 ActiveReports 求助中心
如需了解更多ActiveReports产品特性,请访问 ActiveReports 官方网站
ActiveReports 官方技术交流群:109783140
下载产品体验产品功能:http://www.gcpowertools.com.cn/products/download.aspx?pid=16