ActiveReports作为一款专注于 .NET 和 .NET Core 平台的 表控件.本主题描述了如何使用ASP .NET MVC Core应用程序创建Web设计器示例。
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 optionsvar designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);// render designer applicationGrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);</script></body></html>
15、构建您的解决方案（构建>构建解决方案）并运行它。 在浏览器中打开带有空白RDL 告的WebDesigner。
16、如果您不想打开空白 告，而是要打开资源子文件夹中的现有 告之一（在上面的步骤12中添加），则需要在createDesignerOptions（）函数调用之后在index.html中添加带有 告名称的以下行：
index.htmldesignerOptions.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 dialogfileDialog.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 optionsvar designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);// enable showing save-as buttondesignerOptions.saveAsButton.visible = true;// specify behavior on save-asdesignerOptions.onSaveAs = onSaveAs;// render designer applicationGrapeCity.ActiveReports.WebDesigner.renderApplication(designerId, designerOptions);</script>
这就是如何使用ASP .NET MVC Core创建Web 设计器的完整内容了如果你对我们的产品感兴趣或者有任何疑问，欢迎咨询
在线客服>>
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！