65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 ASP.NET 和 MVC 进行 Web 报表

JBartlau
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.33/5 (2投票s)

2023年4月18日

CPOL

6分钟阅读

viewsIcon

9200

将 List & Label 集成到现有的 ASP.NET MVC 应用程序中

引言

每个应用程序都会处理数据。在几乎所有情况下，如何分析和可视化这些数据的问题迟早会出现。尤其是在 Web 应用程序中，软件通常使用网格来以或多或少可用或不可用的方式表示数据。

然而，当涉及到需要打印或以多种格式归档以供以后使用的发票或复杂的政府表格等文档时，就无法绕过报表工具。这些通常与组件套件捆绑在一起。对于更高级的应用程序，例如复杂的表单、PDF 模板或类似的任何内容，强烈建议使用专门的报表解决方案。

在本文中，我将向您展示如何将 List & Label 集成到现有的 ASP.NET MVC 应用程序中。我们将了解前端和后端技术，并包含 Web 报表设计器和 Web 报表查看器。这很简单——让我们开始吧。

为什么要为 ASP.NET 使用 Web 报表工具？

Web 报表工具使开发人员能够轻松快速地创建基于应用程序数据库中存储的数据的高质量报表。它们提供了一个用户友好的界面，允许开发人员和最终用户定义报表布局。这包括表格、图表和其他视觉元素，而无需深入了解 SQL 或数据库设计。这些工具还可以轻松处理复杂的查询、数据聚合和筛选，从而更轻松地检索和组织报表所需的数据。

报表工具通常提供一系列导出选项，例如 PDF、Excel 或 HTML。这允许用户以他们喜欢的格式查看和共享报表。

在评估报表工具时，您需要确保它们支持您的应用程序使用的技术。特别是，该工具应该能够与您正在使用的前端无缝集成。在后端，相同的数据源应该能够同时为应用程序和报表提供数据。在这方面，灵活性是查看这些类型工具时的一切。

介绍报表工具 List & Label

List & Label 符合所有这些要求。Web 报表设计器和 Web 报表查看器都作为 Web 组件提供，这项技术在前端具有最大的灵活性。当然，所有常见的 JavaScript 框架，如 Angular、React 和 Vue.js 都有支持。一个简单的 HTML 页面也是一个选项。

在后端，您可以绑定几乎任何数据源。数据提供程序适用于所有流行的 SQL 数据库，如 Microsoft SQL Server、Oracle、MySQL、SQLite、DB2 等。此外，对象结构或 JSON 或 XML 等 Web 格式也是可能的选项。 点击此处 查看可用数据源。

支持的导出格式涵盖所有主要标准

  • 从 PDF 到 Word 和 Excel
  • 各种图像格式（包括 SVG）
  • 文本文件格式，如 CSV、XML
  • JSON 以及 XHTML

你得到什么

让我们先快速概述一下您将获得什么。Web 报表设计器是一个免费的 Web 组件，提供丰富的设计选项。您可以使用文本对象和图形元素，如线条、矩形等。但您还可以使用相当高级的功能，例如功能齐全的 PDF 渲染（在需要处理预构建表单时非常方便）、大量条形码和可视化效果，如仪表或图表。对于报表运行时的自定义，报表参数允许动态过滤。

Charts with report parameters

带报表参数的图表

Web 报表查看器是报表工具的一个组成部分。可以通过单击预览图标直接从 Web 报表设计器中访问它。如果您不希望最终用户更改报表的设计，也可以单独运行它。如果您的报表使用报表参数，则在单独的交互式面板中进行配置。

Charts with report parameters in the viewer

查看器中的带报表参数的图表

将 Web 报表设计器添加到现有的 ASP.NET MVC 应用程序

为了了解如何将这些控件添加到您的 ASP.NET 应用程序，这里有一个快速演练。

首先，必须将对两个程序集 combit.ListLabel??.dll 和 combit.ListLabel??.Web.dll 的引用添加到项目中（其中 ?? 对应于版本号）。也可以通过添加相应的 NuGet 包 来实现。

这些程序集引入了以下依赖项

  • Newtonsoft.Json 版本 13.0.1 或更高版本
  • System.CodeDom 版本 5.0.0 或更高版本
  • 来自 Microsoft 的 System.Drawing.Common
  • 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();
}

接下来，找到 Web 应用程序在 startup.cs 文件中的 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://: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://:44382/WebReportViewer" 
                    defaultProject="..." />

其中 defaultProject 是要渲染的项目文件。对于这两个控件，您还可以使用 MVC 扩展，如果您使用经典视图，这些扩展允许使用简单的 Razor 语法。有关更深入的介绍，请参阅 Web 报表教程。

总结

使用预构建的组件可以轻松添加数据可视化和表单打印。当涉及到高级功能时，就需要专门的组件。如果您正在寻找一个 Web 报表工具来支持您的 ASP.NET 应用程序，请务必查看 List & Label。为了帮助您入门，这里有一个 报表工具比较。

历史

  • 2023 年 4 月 18 日：初始版本
© . All rights reserved.