當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

將Telerik Reporting嵌入到您的 ASP.NET Core Web 應(yīng)用程序中
2021-09-24 14:38:34

本教程教你如何從 Telerik Reporting REST 服務(wù)獲取報(bào)告,并將它們顯示在 ASP.NET Core 應(yīng)用程序中。

這篇博文演示了如何在 ASP.NET Core 3+ Web 應(yīng)用程序中嵌入 Telerik HTML5 報(bào)告查看器(或簡稱查看器)并托管 Telerik 報(bào)告 REST 服務(wù)(或簡稱服務(wù))。以下是我將要討論的主題:

什么是 HTML5 報(bào)告查看器?
什么是報(bào)告 REST 服務(wù)?
如何在 ASP.NET Core Web 應(yīng)用程序中托管報(bào)告 REST 服務(wù)?
如何請求報(bào)告文檔并將其顯示在 HTML5 報(bào)告查看器中?
什么是 HTML5 報(bào)告查看器?
查看器的目的是在網(wǎng)頁上顯示報(bào)表文檔。在幕后,查看器是一個基于 jQuery 的自定義小部件。小部件是功能豐富的有狀態(tài)插件,具有完整的生命周期以及方法和事件。查看器的布局存儲在支持移動和桌面瀏覽器并且完全可定制的 HTML 模板中。與Kendo UI 小部件類似,查看器的默認(rèn) HTML 模板支持預(yù)定義主題和自定義主題。

什么是報(bào)告 REST 服務(wù)?
我提到查看器顯示報(bào)告文檔。但是,報(bào)表文檔是報(bào)表引擎的輸出。

?

?

?

查看器不能自己完成處理和呈現(xiàn)工作,這就是報(bào)告 REST 服務(wù)的用武之地。該服務(wù)包裝報(bào)告引擎并通過 HTTP 公開其功能,因此查看器可以訪問它。在高級抽象中描述的查看器-服務(wù)交互的常見場景是:

  1. 查看器通過提供報(bào)告定義的唯一標(biāo)識符(例如,文件名MyReport.trdx)來請求報(bào)告文檔
  2. 該服務(wù)搜索請求的報(bào)告定義并指示報(bào)告引擎處理并將其呈現(xiàn)為 HTML5 報(bào)告文檔
  3. 服務(wù)將生成的結(jié)果返回給查看器
  4. 查看器向用戶顯示報(bào)表文檔

為方便起見,該服務(wù)還可以提供所有必需的 HTML5 報(bào)告查看器小部件資源 - JavaScript、CSS 和 HTML 模板文件。

如何在 ASP.NET Core Web 應(yīng)用程序中托管報(bào)告 REST 服務(wù)?
由于查看器在沒有服務(wù)的情況下無法運(yùn)行,讓我們先回顧一下托管服務(wù)的步驟。對于這篇文章,我假設(shè)顯示報(bào)告的項(xiàng)目也是服務(wù)項(xiàng)目。這樣我就不必配置跨域資源共享 (CORS)。但是,如果您需要在解決方案中使用單獨(dú)的項(xiàng)目,這里有一篇很好的文章,解釋了如何在 ASP.NET Core 中啟用 CORS。

如果您沒有現(xiàn)有的 ASP.NET Core Web 應(yīng)用程序,請按照以下步驟創(chuàng)建一個:

  1. 啟動 Visual Studio 2019
  2. 打開文件>新建>項(xiàng)目...
  3. 選擇ASP.NET Core Web 應(yīng)用程序,然后單擊下一步
  4. 輸入您的項(xiàng)目名稱,然后單擊創(chuàng)建
  5. 框架版本選擇.NET CoreASP.NET Core 3.1
  6. 選擇Web 應(yīng)用程序模板并單擊創(chuàng)建

要在此項(xiàng)目或其他現(xiàn)有項(xiàng)目中托管報(bào)告 REST 服務(wù),請從位于https://nuget.telerik.com/nuget的 Telerik NuGet 提要添加 NuGet 包Telerik.Reporting.Services.AspNetCore。

服務(wù)包會將自己的依賴項(xiàng)添加到項(xiàng)目中,例如Microsoft.AspNet.Core.Mvc.NewtonsoftJson。要激活NewtonsoftJson包依賴項(xiàng),請打開Startup.cs并將ConfigureServices方法中的services.AddRazorPages行更改為:

services.AddRazorPages().AddNewtonsoftJson();

在此行的正下方添加用于最小報(bào)告 REST 服務(wù)實(shí)現(xiàn)的配置代碼(也添加適當(dāng)?shù)氖褂茫?/p>

services.TryAddSingleton<IReportServiceConfiguration>(
    sp => new ReportServiceConfiguration
    {
        Storage = new FileStorage(),
        ReportSourceResolver = new UriReportSourceResolver(
            System.IO.Path.Combine(
                sp.GetService<IWebHostEnvironment>().ContentRootPath,
                "Reports"))
    });

上面的存儲配置指定服務(wù)將其內(nèi)部狀態(tài)對象和臨時(shí)文件保存在文件系統(tǒng)上。還提供其他存儲選項(xiàng)。

該ReportSourceResolver選項(xiàng)指示服務(wù)來搜索內(nèi)部報(bào)告定義文件報(bào)告應(yīng)用程序文件夾。有關(guān)將報(bào)告標(biāo)識符解析為特定報(bào)告定義的更多方法,請查看完整的 REST 服務(wù)報(bào)告源解析器參考。

該報(bào)告文件夾不存在,但你會在某一時(shí)刻創(chuàng)建,因?yàn)槟阈枰砑訄?bào)表定義文件存在。我從 Telerik Reporting 安裝文件夾 - C:Program Files (x86)ProgressTelerik Reporting R2 2020Report DesignerExamples 中獲取了我的報(bào)告定義(Report Catalog.trdp),但您可以使用獨(dú)立報(bào)告創(chuàng)建一個新的設(shè)計(jì)師。有了報(bào)告定義后,您需要將其添加到您的項(xiàng)目中:

  1. 在項(xiàng)目的根目錄中創(chuàng)建一個名為Reports的文件夾
  2. 將您的報(bào)告定義文件復(fù)制到其中

同樣在ConfigureServices方法中,通過添加以下內(nèi)容確保為 API 控制器配置了應(yīng)用程序:

services.AddControllers();

并通過將以下行 (?endpoints.MapControllers();)添加Configure方法映射這些控制器端點(diǎn)

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
});

下一步是創(chuàng)建實(shí)際的ReportsController類,它是服務(wù)的本質(zhì):

  1. 將新的Controllers文件夾添加到項(xiàng)目的根目錄
  2. 右鍵單擊Controllers文件夾并選擇添加>控制器...
  3. 選擇API Controller - Empty模板,然后單擊添加
  4. 將新控制器命名為 ReportsController.cs并單擊添加

將新控制器的內(nèi)容更改為:

using Microsoft.AspNetCore.Mvc;
using Telerik.Reporting.Services;
using Telerik.Reporting.Services.AspNetCore;
 
namespace AspNetCoreReportViewerSample.Controllers
{
    [Route("api/reports")]
    public class ReportsController : ReportsControllerBase
    {
        public ReportsController(IReportServiceConfiguration reportServiceConfiguration)
            : base(reportServiceConfiguration)
        {
        }
    }
}

字符串API /報(bào)告內(nèi)部路由屬性映射將被用于訪問該控制器的URL。該服務(wù)現(xiàn)已準(zhǔn)備就緒,正在等待為您的報(bào)告提供服務(wù)。

還有多種其他配置選項(xiàng),包括如何使用帶有連接字符串的配置文件等等。要深入研究該主題,請?jiān)L問設(shè)置報(bào)告 REST 服務(wù)的完整參考。

如何請求報(bào)告文檔并將其顯示在 HTML5 報(bào)告查看器中?
使用我之前選擇的Web 應(yīng)用程序項(xiàng)目模板,我的應(yīng)用程序的登錄頁面是Pages/Index.cshtml。此頁面使用存儲在Pages/Shared/_Layout.cshtml 中的通用布局。默認(rèn)情況下,公共布局引用了 jQuery。如果您的應(yīng)用程序尚未引用 jQuery,您可以從jQuery CDN鏈接它。

要對公共布局頁面進(jìn)行整潔的組織,請將自定義部分添加到_Layout.cshtml的head元素,稍后您將使用它來添加查看器的 Kendo UI 主題:

<head>
    ...
 
    @RenderSection("Head", required: false)
</head>

Pages/Index.cshtml 中,您需要一個div元素來容納查看器。此元素應(yīng)具有唯一的id屬性值,稍后將在查看器的 JavaScript 中使用該值。還需要通過 CSS 文件或內(nèi)聯(lián)樣式設(shè)置div元素的尺寸,否則查看器在頁面上將不可見:

<div id="reportViewer1" style="width:940px; height:1300px">
</div>

之前準(zhǔn)備的自定義Head部分中添加指向所需 Kendo UI 主題的鏈接

@section Head {
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css" rel="stylesheet" />
}

最后,在Scripts部分添加到查看器小部件的 JavaScript 文件的鏈接,并調(diào)用telerik_ReportViewer方法。

腳本節(jié)將幫助插入觀眾腳本公共布局文件中提及的jQuery后。然后,查看器將能夠找到其 jQuery 依賴項(xiàng)并使用telerik_ReportViewer方法擴(kuò)展全局 jQuery 對象實(shí)例。

Telerik_ReportViewer是一個 jQuery 擴(kuò)展方法,用于創(chuàng)建和配置查看器對象。在此示例中,查看器對象是在#reportViewer1?div元素內(nèi)創(chuàng)建的。的serviceUrl匹配的URL?ReportsController路線和報(bào)告期權(quán)價(jià)值是報(bào)告定義的文件名:

@section Scripts {
    <script src="/api/reports/resources/js/telerikReportViewer"></script>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceUrl: "api/reports",
                    reportSource: {
                        report: "Report Catalog.trdp"
                    },
                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                    scale: 1.0
                });
        });
    </script>
}

以上是查看器對象的最低要求配置。有關(guān)配置選項(xiàng)、方法和事件的完整列表,請前往HTML5 報(bào)告查看器文檔。

這是最終的Index.cshtml 的樣子:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
 
@section Head {
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css" rel="stylesheet" />
}
 
<div class="text-center">
    <div id="reportViewer1" style="width:940px; height:1300px">
    </div>
</div>
 
@section Scripts {
    <script src="/api/reports/resources/js/telerikReportViewer"></script>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceUrl: "api/reports",
                    reportSource: {
                        report: "Report Catalog.trdp"
                    },
                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                    scale: 1.0
                });
        });
    </script>
}

剩下的就是F5在 Visual Studio 中按下并觀察 HTML5 報(bào)告查看器將如何從服務(wù)請求Report Catalog.trdp報(bào)告。該服務(wù)將指示報(bào)表引擎以 HTML5 格式呈現(xiàn)報(bào)表定義并將其作為報(bào)表文檔返回給查看器。如果一切按預(yù)期進(jìn)行,您會發(fā)現(xiàn)自己正在查看類似的屏幕:

?

?

如果遇到任何問題,請按F12以檢查瀏覽器控制臺中的錯誤并使用Fiddler記錄網(wǎng)絡(luò)流量。如果您決定聯(lián)系我們傳奇的支持團(tuán)隊(duì),所有這些信息都將非常有價(jià)值。

您可以從telerik/reporting-samples GitHub 存儲庫下載示例應(yīng)用程序。

嘗試過 Telerik DevCraft?
您可以選擇Telerik Reporting 和Telerik Report Server 作為單獨(dú)的產(chǎn)品,也可以將它們作為出色的 Telerik DevCraft 捆綁包的一部分來使用。

?

來自:https://www.telerik.com/blogs/embedding-beautiful-reporting-aspnet-core-web-applications

?

本文摘自 :https://www.cnblogs.com/

開通會員,享受整站包年服務(wù)立即開通 >