.NET的报表控件ActiveReports教程：如何使用ASP .NET MVC创建Web 设计器（二）-控件新闻-慧都网

.NET的报表控件ActiveReports教程：如何使用ASP .NET MVC创建Web 设计器（二）

转帖|使用教程|编辑：鲍佳佳|2020-08-18 11:38:52.790|阅读 308 次

概述：在上文中我们讲到如何使用ASP .NET MVC Core应用程序创建Web设计器示例，本文我们主要讲如何通过ASP .NET MVC应用程序创建Web设计器示例。

相关链接：

ActiveReports 是一款专注于 .NET 和 .NET Core 平台的报表控件。通过拖拽式报表设计器，可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据钻取、精准套打等类型报表，全面满足 WinForm、ASP.NET、ASP.NET MVC、WPF 平台中各种报表的开发需要。同时，通过丰富的 API 可以灵活的实现报表创建、加载和运行时的个性化自定义需求。点击这里获取更多产品详情>>

点击下载ActiveReports最新试用版

点击这里查看上篇文章

11、在出现的“预览更改”对话框中，单击“确定”。
12、在出现的“许可证接受”对话框中，单击“我接受”。
13、在解决方案资源管理器中，右键单击您的项目，然后转到添加>新建项...。

在出现的窗口中，转到“代码”>“类”，输入Startup.cs，然后单击“添加”。

修改新添加的Startup.cs的内容，如下所示：

using System;
using System.IO;
using System.Linq;
using System.Web;
using GrapeCity.ActiveReports.Aspnet.Designer;
using Owin;
using Microsoft.Owin;
using Microsoft.Owin.StaticFiles;
using Microsoft.Owin.FileSystems;
using System.Web.Mvc;
using System.Web.Routing;
[assembly: OwinStartup(typeof(AspNetDesignerSample.Startup))]
namespace AspNetDesignerSample
{
public class Startup
{
// resources (reports, themes, images) location
private static readonly DirectoryInfo ResourcesRootDirectory =
new DirectoryInfo(String.Format("{0}.\\resources\\", HttpRuntime.AppDomainAppPath));
public void Configuration(IAppBuilder app)
{
// web designer middleware
app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory));
// static files middlewares
var fileSystem = new PhysicalFileSystem(String.Format("{0}.\\wwwroot\\", HttpRuntime.AppDomainAppPath));
app.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new[] { "index.html" }, FileSystem = fileSystem });
app.UseStaticFiles(new StaticFileOptions { FileSystem = fileSystem });
}
}
}

14、在示例项目根目录中创建“ resources”文件夹；您可以放置现有的报告，主题，

15、在命令行中使用以下命令从NPM下载并安装与WebDesigner相关的文件和文件夹：

npm install @grapecity/ar-designer

设计器文件/文件夹将下载到您当前的目录中：

..\node_modules\@grapecity\ar-designer\dist

16、在示例项目根目录中创建“ wwwroot”文件夹。复制以下与WebDesigner相关的基本文件，并将其粘贴到示例项目wwwroot子文件夹中：

baseServerApi.js
web-designer.css
web-designer.js
vendor folder

如果您想使用我们的示例对话框组件来保存报告，也可以选择复制file-dialog.css和file-dialog.js。

17、在“解决方案资源管理器”顶部栏中，选中“显示所有文件”。

右键单击wwwroot，然后选择“包含在项目中”。

18、右键单击wwwroot，然后选择添加>新建项...：

在出现的窗口中，转到Web> HTML页面，输入index.html，然后单击添加。

在解决方案资源管理器中，找到新添加的index.html并按如下所示修改其内容：

<!DOCTYPE html>
<html>
<head>
<title>Web Designer Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- designer-related css -->
<link rel="stylesheet" href="vendor/css/materialdesignicons.min.css" media="all" type="text/css" />
<link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
<link rel="stylesheet" href="vendor/css/font-awesome.min.css">
<link rel="stylesheet" href="vendor/css/ionicons.min.css">
<link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
<link rel="stylesheet" href="web-designer.css" />
</head>
<body class="theme-blue">
<!-- designer-related js -->
<script src="vendor/js/jquery.min.js"></script>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="baseServerApi.js"></script>
<script src="web-designer.js"></script>
<!-- designer root div -->
<div id="designer-id" style="width: 100%; height: 100%;"></div>
<script>
// create designer options
var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
// render designer application
GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
</script>
</body>
</html>

构建您的解决方案并运行它。在浏览器中打开带有空白RDL报告的WebDesigner。

现在ActiveReports最高优惠19039，团队授权更是低至34748元！点击这里获取更多优惠>>