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

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

转帖|使用教程|编辑：鲍佳佳|2020-08-14 09:28:48.917|阅读 315 次

概述：ActiveReports作为一款专注于 .NET 和 .NET Core 平台的报表控件.本主题描述了如何使用ASP .NET MVC Core应用程序创建Web设计器示例。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

相关链接：

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

点击下载ActiveReports最新试用版

选择带有默认.NET Core和ASP .NET Core 3.1选项的Empty项目模板。主题描述了使用ASP .NET MVC Core和ASP .NET MVC创建Web Designer示例。

ASP .NET MVC核心

使用ASP .NET MVC Core应用程序创建Web设计器示例的步骤如下（接上文点击此处查阅）：

11、复制以下设计器文件/文件夹，并将其粘贴到示例项目wwwroot子文件夹中：

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

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

12、在解决方案资源管理器中，右键单击wwwroot，然后选择添加>新建项。

13、选择“ HTML页面”项目类型，输入index.html，然后单击“添加”。

14、在解决方案资源管理器中，找到新添加的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>

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

16、如果您不想打开空白报告，而是要打开资源子文件夹中的现有报告之一（在上面的步骤12中添加），则需要在createDesignerOptions（）函数调用之后在index.html中添加带有报告名称的以下行：

index.html
designerOptions.reportInfo.id = "MyReport.rdlx";

17、如果在步骤14中将file-dialog.css和file-dialog.js复制到示例项目wwwroot子文件夹，则可以插入示例对话框以保存报告。
需要在index.html中执行以下步骤才能插入对话框组件：
i. 在标记中，在web-designer.css附近添加file-dialog.css：

<link rel="stylesheet" href="file-dialog.css" />
<link rel="stylesheet" href="web-designer.css" />

ii. 在标记中，在web-designer.js附近添加file-dialog.js：

<script src="file-dialog.js"></script>
<script src="web-designer.js"></script>

iii. 在设计器根div和对话框根div附近：

<!-- designer root div -->
< div id="designer-id" style="width: 100%; height: 100%;"></div>
<!-- save as dialog root div -->
< div id="save-as-dialog-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 9999;"></div>

iv. 修改呈现设计器应用程序的<script>标记内容：

<script>
var showElement = function (id) {
if (!id) return;
($('#' + id)).css('display', 'block');
};
var hideElement = function (id) {
if (!id) return;
($('#' + id)).css('display', 'none');
};
var designerId = 'designer-id';
var saveAsDialogId = 'save-as-dialog-id';
function onSaveAs(options) {
showElement(saveAsDialogId);
// render save-as dialog
fileDialog.createSaveReportAsDialog(saveAsDialogId, {
locale: options.locale,
api: {
getReportsList: function () {
return baseServerApi.getReportsList()
.then(function (reportsList) {
return reportsList.map(function (reportInfo) {
return { path: reportInfo.Name };
});
});
},
saveReport: function (saveOptions) {
return baseServerApi.saveNewReport({
name: saveOptions.path,
content: options.reportInfo.content,
}).then(function (saveResult) {
return { id: saveResult.Id };
});
},
},
reportInfo: {
path: options.reportInfo.name,
},
onSuccess: function (saveResult) {
hideElement(saveAsDialogId);
options.onSuccess({ id: saveResult.id, name: saveResult.path });
},
onClose: function () {
hideElement(saveAsDialogId);
},
});
};
// create designer options
var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
// enable showing save-as button
designerOptions.saveAsButton.visible = true;
// specify behavior on save-as
designerOptions.onSaveAs = onSaveAs;
// render designer application
GrapeCity.ActiveReports.WebDesigner.renderApplication(designerId, designerOptions);
</script>

您会获得一个带有插入的示例另存为对话框的设计器。这种简约的设计器可用于编辑现有报告，而无需添加新数据集。但是，如果您需要创建全新的报告，添加数据集和预览设计器中的报告，请参阅Web Designer API主题。

这就是如何使用ASP .NET MVC Core创建Web 设计器的完整内容了如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询