ActiveReports 17 新特性-新Web设计器组件-Blazor

ActiveReports 现在提供了一个新的网页设计器组件——Blazor Designer，一个集成在 Blazor 框架中的 JavaScript 控件。并且提供
       使用 .NET 代码处理服务器端的用户交互
         为开发人员提供用于打开报告、处理事件和自定义 UI 的 C# API

页面加载方法:

1. @page "/"
   
2. @inject IJSRuntime JSRuntime
   
3. <PageTitle>Index</PageTitle>
   
4. 
   
5. <link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
   
6. <div id="designerContainer">
   
7.     <ReportDesigner @ref="_designer" RpxSettings="@_rpx" AppBarSettings="@_appBar" DataSettings="@_data" PreviewSettings="@_preview" />
   
8. </div>
   
9. @code {
   
10.     private ReportDesigner _designer;
    
11.     private ReportViewer _viewer;
    
12. 
    
13.     private RpxSettings _rpx;
    
14.     private AppBarSettings _appBar;
    
15.     private DataSettings _data;
    
16.     private PreviewSettings _preview;
    
17. 
    
18.     public Index()
    
19.     {
    
20.         _rpx = new RpxSettings
    
21.         {
    
22.             Enabled = true
    
23.         };
    
24.         _appBar = new AppBarSettings
    
25.         {
    
26.             OpenButton = new OpenButton { Visible = true }
    
27.         };
    
28.         _data = new DataSettings
    
29.         {
    
30.             DataSets = new DataSets { CanModify = true },
    
31.             DataSources = new DataSources { CanModify = true }
    
32.         };
    
33.         _preview = new PreviewSettings
    
34.         {
    
35.             OpenViewer = OpenViewer
    
36.         };
    
37.     }
    
38. 
    
39.     private async void OpenViewer(ViewerSettings settings)
    
40.     {
    
41.         if(_viewer != null)
    
42.         {
    
43.             await _viewer.OpenReport(settings.DocumentInfo.Id);
    
44.             return;
    
45.         }
    
46. 
    
47.         _viewer = new ReportViewer();
    
48. 
    
49.         var initOptions = new InitializationOptions();
    
50.         initOptions.ReportID = settings.DocumentInfo.Id;
    
51.         initOptions.PanelsLocation = PanelsLocation.toolbar;
    
52. 
    
53.         initOptions.ReportLoaded = (reportInfo) =>
    
54.         {
    
55. 
    
56.         };
    
57. 
    
58.         await _viewer.Render(JSRuntime, settings.Element, initOptions);
    
59.     }
    
60. }

复制代码

而且针对这个，我们也有专门的API去控制页面
具体可以参考如下链接:
https://www.grapecity.com/active ... ner-api-blazor.html

参考的Demo可以参考git代码示例:
https://github.com/activereports ... ples/BlazorDesigner