创建一个简单的Web设计器

选择带有默认.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设计器示例的步骤如下：
1、打开Microsoft Visual Studio 2019并创建一个新的ASP .NET Core Web应用程序项目。

2、选择带有默认.NET Core和ASP .NET Core 3.1选项的Empty项目模板。

3、在解决方案资源管理器中，右键单击“依赖关系”，然后转到“管理NuGet程序包”。

4、在出现的窗口中，浏览并输入Microsoft.AspNetCore.StaticFiles，选择最新版本，然后单击安装。

5、在出现的窗口中，浏览并输入GrapeCity.ActiveReports.Aspnetcore.Designer，然后单击安装。
6、在出现的窗口中，浏览并输入Microsoft.AspNetCore.StaticFiles，选择最新版本，然后单击安装。

7、在出现的“许可证接受”对话框中，单击“我接受”。

8、在解决方案资源管理器中，找到Startup.cs并按如下所示修改其内容：

Startup.cs

html

                            using System.IO;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using GrapeCity.ActiveReports.Aspnetcore.Designer;
namespace WebDesignerSample
{
        public class Startup
        {
                // resources (reports, themes, images) location
                private static readonly DirectoryInfo ResourcesRootDirectory = new DirectoryInfo(".\\resources\\");
                public void ConfigureServices(IServiceCollection services)
                {
                        // web designer services
                        services.AddDesigner();
                }
                public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                {
                        // web designer middleware
                        app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory));
                        // static files middlewares
                        app.UseDefaultFiles();
                        app.UseStaticFiles();
                }
        }
}

9、在示例项目根目录中创建“ resources”文件夹；您可以将现有的报告，主题和图像放在此文件夹中。

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

npm install @grapecity/ar-designer

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

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

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

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

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

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

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

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

index.html

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">
    <!-- No Virtual Directory -->
    <base href="/">
    <!-- designer-related css -->
    <link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
    <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
    <link rel="stylesheet" href="web-designer.css" />
</head>
<body>
    <!-- designer-related js -->
    <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();
 
    /* Optional: Save Report */
    designerOptions.saveButton.visible = true;
 
    /* Optional: Save Report As */
    designerOptions.saveAsButton.visible = true;
 
    /* Optional: Open Report */
    designerOptions.openButton.visible = true;

    /* Optional: Add/Edit/Remove Data Sets */
     designerOptions.dataTab.dataSets.canModify = true;
             
    /* Optional: Add/Edit/Remove Data Sources */
    designerOptions.dataTab.dataSources.canModify = true;
 
    // 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";

ASP .NET Core MVC

1、使用ASP .NET Core MVC应用程序创建Web设计器示例的步骤如下：

打开Microsoft Visual Studio 2019并创建一个 ASP .NET Core Web Application 空Web应用程序项目。

Configure your new project dialog

2、在解决方案资源管理器中，右键单击“引用”，然后转到“管理NuGet程序包”。

3、在出现的窗口中，转到在线> nuget.org。

Create a new ASP.NET core web application dialog

4、在右上角搜索框中，输入Microsoft ASP.NET MVC并安装此软件包。

在出现的“许可证接受”对话框中，单击“我接受”。

9、在搜索框中输入Microsoft.AspNetCore.StaticFiles。
但是，此软件包应该已经在上一步中与Microsoft.AspNetCore.StaticFiles一起安装。

Nuget Package Manager dialog

因此，所有必需的软件包都已安装。现在，让我们在下一步中添加设计器包。
10、在NuGet软件包管理器的搜索框中，输入GrapeCity.ActiveReports.Aspnetcore.Designer，然后单击“安装”。
11、在出现的“预览更改”对话框中，单击“确定”。
12、在出现的“许可证接受”对话框中，单击“我接受”。
13、在解决方案资源管理器中，右键单击您的项目，然后转到添加>新建项...。

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

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

C#代码

                            using System.IO;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using GrapeCity.ActiveReports.Aspnetcore.Designer;
namespace WebDesignerSample
{
        public class Startup
        {
                // resources (reports, themes, images) location
                private static readonly DirectoryInfo ResourcesRootDirectory = new DirectoryInfo(".\\resources\\");
                public void ConfigureServices(IServiceCollection services)
                {
                        // web designer services
                        services.AddDesigner();
                }
                public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                {
                        // web designer middleware
                        app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory));
                        // static files middlewares
                        app.UseDefaultFiles();
                        app.UseStaticFiles();
                }
        }
}

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

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

npm install @grapecity/ar-designer

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

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

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

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

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

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

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

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

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

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

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">
    <!-- No Virtual Directory -->
    <base href="/">
    <!-- designer-related css -->
    <link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
    <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
    <link rel="stylesheet" href="web-designer.css" />
</head>
<body>
    <!-- designer-related js -->
    <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();
 
    /* Optional: Save Report */
    designerOptions.saveButton.visible = true;
 
    /* Optional: Save Report As */
    designerOptions.saveAsButton.visible = true;
 
    /* Optional: Open Report */
    designerOptions.openButton.visible = true;

    /* Optional: Add/Edit/Remove Data Sets */
     designerOptions.dataTab.dataSets.canModify = true;
             
    /* Optional: Add/Edit/Remove Data Sources */
    designerOptions.dataTab.dataSources.canModify = true;
 
    // render designer application
    GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
    </script>
</body>
</html>

Page tree

创建一个简单的Web设计器

ASP .NET Core MVC