亚洲精品亚洲人成在线观看麻豆,在线欧美视频一区,亚洲国产精品一区二区动图,色综合久久丁香婷婷

<rt id="rzmmt"></rt>

<track id="rzmmt"><ol id="rzmmt"></ol></track>

海量資源，盡在掌握

當(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)表文檔。在幕后，查看器是一個(gè)基于 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ù)交互的常見場景是：

查看器通過提供報(bào)告定義的唯一標(biāo)識符（例如，文件名MyReport.trdx）來請求報(bào)告文檔
該服務(wù)搜索請求的報(bào)告定義并指示報(bào)告引擎處理并將其呈現(xiàn)為 HTML5 報(bào)告文檔
服務(wù)將生成的結(jié)果返回給查看器
查看器向用戶顯示報(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)建一個(gè)：

啟動 Visual Studio 2019
打開文件>新建>項(xiàng)目...
選擇ASP.NET Core Web 應(yīng)用程序，然后單擊下一步
輸入您的項(xiàng)目名稱，然后單擊創(chuàng)建
框架版本選擇.NET Core和ASP.NET Core 3.1
選擇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)建一個(gè)新的設(shè)計(jì)師。有了報(bào)告定義后，您需要將其添加到您的項(xiàng)目中：

在項(xiàng)目的根目錄中創(chuàng)建一個(gè)名為Reports的文件夾
將您的報(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ì)：

將新的Controllers文件夾添加到項(xiàng)目的根目錄
右鍵單擊Controllers文件夾并選擇添加>控制器...
選擇API Controller - Empty模板，然后單擊添加
將新控制器命名為 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 中，您需要一個(gè)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是一個(gè) 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以檢查瀏覽器控制臺中的錯(cuò)誤并使用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ù)立即開通 >

推薦內(nèi)容