目录
介绍
每个应用程序都处理数据。在几乎所有情况下,如何分析和可视化这些数据的问题迟早会出现。特别是在Web应用程序中,软件通常使用网格,这些网格允许或多或少地表示数据。
但是,当涉及到需要以多种格式打印或存档以备后用的发票或复杂的政府表格等文档时,报告工具是没有办法的。它们通常与组件套件捆绑在一起。对于更高级的应用程序,例如复杂的表单、PDF模板或类似的东西,强烈建议使用专门的报告解决方案。
在本文中,我将向您展示如何将List & Label集成到现有的ASP.NET MVC应用程序中。我们将介绍前端和后端技术,并包括Web报表设计器和Web报表查看器。这很简单——让我们开始吧。
为什么要使用网络报告工具进行ASP.NET?
Web报告工具使开发人员能够根据存储在应用程序数据库中的数据轻松快速地创建高质量的报告。它们提供了一个用户友好的界面,允许开发人员和最终用户定义报表布局。这包括表格、图表和其他视觉元素,而无需深入了解SQL或数据库设计。这些工具还可以轻松处理复杂的查询、数据聚合和筛选,从而更轻松地检索和组织报告所需的数据。
报告工具通常提供一系列导出选项,例如PDF、Excel或HTML。这样,用户就可以以自己喜欢的格式查看和共享报表。
在评估报告工具时,需要确保它们支持应用程序使用的技术。特别是,该工具应该能够与您正在使用的前端无缝集成。在后端,同一数据源应该能够同时为应用程序和报告提供数据。关于这一点,在查看这些类型的工具时,灵活性就是一切。
报告工具列表和标签简介
List & Label勾选了所有这些框。Web报表设计器和Web报表查看器都可作为Web组件使用,该技术可在前端实现最大的灵活性。当然,支持所有常见的JavaScript框架,如Angular,React和Vue.js。一个简单的HTML页面也是一种选择。
在后端,您将能够绑定任何数据源。数据提供程序可用于所有流行的SQL数据库,如Microsoft SQL Server,Oracle,MySQL,SQLite,DB2等。此外,对象结构或Web格式(如JSON或XML)也是可能的选项。单击此处查看可用的数据源。
支持的导出格式涵盖所有主要标准:
- 从PDF到Word和Excel
- 多种图像格式(包括SVG)
- 文本文件格式,如CSV、XML
- JSON和XHTML
你得到什么
让我们先快速了解一下你得到什么。Web报表设计器是一个免版税的Web组件,提供丰富的设计选项。您可以使用文本对象和图形元素,例如线条、矩形等。但您也可以访问相当高级的功能,例如成熟的PDF渲染(当您需要使用预构建的表单时非常方便)、大量条形码和可视化效果(例如仪表或图表)。对于在报表运行时进行的自定义,报表参数允许动态筛选。
带有报表参数的图表
Web报表查看器是报表工具的一个组成部分。通过单击预览图标,可以直接从Web报表设计器访问它。如果不希望最终用户更改报表的设计,也可以独立运行它。如果报表使用报表参数,则会在单独的交互式面板中配置这些参数。
查看器中带有报表参数的图表
将Web报表设计器添加到现有ASP.NET MVC应用
若要了解如何将这些控件添加到ASP.NET应用,下面是一个快速演练。
首先,对两个程序集的引用combit.ListLabel??.dll 和 combit.ListLabel??. Web.dll 必须将添加到项目中(其中??对应于版本号)。这也可以通过添加相应的 NuGet包来实现。
这些程序集引入了以下依赖项:
- Newtonsoft.Json版本13.0.1或更高版本
- System.CodeDom版本5.0.0或更高版本
- System.Drawing.Common与Microsoft相比
- Microsoft.AspNetCore.Mvc.NewtonsoftJson及其特定的.NET版本
接下来,在Web应用程序代码中找到该builder.Services.AddControllersWithViews();行,并将其替换为builder.Services.AddControllersWithViews().AddNewtonsoftJson();。
然后在应用中创建一个新控制器,并从该WebReportDesignerController类派生它。这提供了许多可重写的方法,其中OnProvideListLabel方法是最重要的方法。可能的覆盖可以是:
public override void OnProvideListLabel(ProvideListLabelContext provideListLabelContext)
{
ListLabel ll = new ListLabel();
ll.LicensingInfo = "<ToDo: insert your license here>"
var dataSource = GetDataProvider(provideListLabelContext.RepositoryItemId);
ll.DataSource = dataSource;
provideListLabelContext.NewInstance = ll;
}
还需要提供文件存储库。此概念允许在数据库中存储报告文件和其他资源。该产品随附了许多用于此概念的样品。最简单的实现是:
public override void OnProvideRepository
(ProvideRepositoryContext provideFileRepositoryContext)
{
provideFileRepositoryContext.FileRepository = DefaultSettings.GetRepository();
}
接下来,在startup.cs中找到Web应用的Configure方法并添加:
app.UseWebReportDesigner();
并在ConfigureServices方法中添加:
services.AddWebReportDesigner();
在后端就是这样——你已经创建了一个指向你的数据的链接,并为List & Label提供了一个存储库。在前端,您只需要一个特殊的标记,您希望Web报表设计器出现在该标记的位置。在纯HTML中,这可能看起来像这样(其中??对应于List & Label版本号):
<html>
<head>
<title>WebReportDesigner</title>
<script src='combit-webreportdesigner-??.0.min.js' />
</head>
<body>
<ll-webreportdesigner backendurl="https://localhost:44382/WebReportDesigner" />
</body>
</html>
这个简单的概念可以很容易地适应各种前端技术。GitHub上还有一个存储库,展示了如何为Angular,Blazor,经典MVC,React或Vue.js执行此操作。这是List & Label的现成演示。
将Web报表查看器添加到组合中
添加查看器也同样简单。您只需要一个额外的控制器,这次派生自WebReportViewerController。它具有与设计器相同的可重写内容。您甚至可以重复使用完全相同的方法,因为两者都使用相同的签名。对于该Configure方法,请添加:
app.UseWebReportViewer();
这就是后端。HTML也非常简单——这一次,您使用这样的ll-webreportviewer标签:
<ll-webreportviewer backendUrl="https://localhost:44382/WebReportViewer"
defaultProject="..." />
其中defaultProject是要呈现的项目文件。对于这两个控件,如果使用的是经典视图,还可以使用允许简单Razor语法的MVC扩展。如需更深入的了解,请参阅 Web报告教程。
结束语
使用预构建的组件可以轻松添加数据可视化和表单打印。当涉及到高级功能时,专用组件开始发挥作用。如果您正在寻找一个网络报告工具来支持您的ASP.NET应用程序,请务必查看列表和标签。为了让您抢占先机,以下是报告工具的比较。
https://www.codeproject.com/Articles/5358779/Web-Reporting-Using-ASP-NET-and-MVC