單頁應用程序的概念正在尋找越來越多的支持者。最着名的單頁框架之一是Angular,它是一個單頁 的JavaScript應用程序框架。Angular的第一個版本基於JavaScript,但是所有後續版本都已經在使用TypeScript,並且與第一個版 本完全不同。在AngularJS上創建新應用程序沒有任何意義,因此我們將使用當前版本的Angular 7。
Microsoft成功地將Angular和ASP結合起來。Net Core MVC。因此,使用ASP .Net Core MVC的實現 ,在單頁面應用程序中顯示報表相對容易。
Node.js安裝
要在Angular框架上開始開發,您需要預先安裝一個平臺,以便在服務器端執行JavaScript代碼。它 叫做Node.js。
您還需要安裝.Net Core SDK 2.0或更新版本。但是,如果您安裝了Microsoft Visual Studio 2017 ,則無需執行此操作。
如何創建應用程序?
有兩種方法 - 在Visual Studio中創建新項目或從命令行運行命令。
對於第一個選項,您必須在Visual Studio擴展中安裝Angular應用程序模板。
第二個更簡單。爲您的應用程序創建一個文件夾 在Windows命令行中,使用cd命令轉到創建的文件 夾並執行以下命令:
dotnet new angular -o AngularFRCore
如您所知,AngularFRCore是項目的名稱。創建應用程序後,您需要安裝typescript庫。我們將使用 Node.js npm平臺庫安裝程序執行此操作。在控制檯執行了創建應用程序的命令,在應用程序目錄中運行另一個命令:
npm install -g typescript
現在,打開項目,沒有解決方案文件,它將在您第一次啓動項目時創建。
我們的演示應用程序的目標是展示如何在單頁應用程序中使用FastReport.Core。讓我們將 FastReport庫添加到我們的項目中。打開NuGet包管理器。在右上角,您可以選擇數據包的來源。我們對本地源感興趣,但首先需要 配置它。爲此,請單擊右上角的齒輪圖標。我們使用包設置本地文件夾的路徑:
默認情況下,此文件夾是:C:\ Program Files(x86)\ FastReports \ FastReport.Net \ Nugets。
通過安裝FastReport.Net,您可以獲得上述包裝中的現成包裝。讓我們回到包管理器:
現在有兩個包,安裝它們。 要在應用程序中使用FastReport,需要在Startup.cs文件中添加 一行代碼:
public void Configure(IApplicationBuilder app, IHostingEnvironment env) { … app.UseFastReport(); …}
如果您瀏覽項目樹,可以從MVC應用程序中看到我們熟悉的控制器和模型目錄。可以使用幾乎未改變 的MVC .Net Core應用程序作爲後端。Controllers文件夾中已有一個 - SampleDataController。隨意清除課程內容 - 我們將創建 自己的方法:
[HttpGet("[action]")] public IActionResult ShowReport(string name) { WebReport WebReport = new WebReport(); WebReport.Width = "1000"; WebReport.Height = "1000"; WebReport.Report.Load(String.Format("App_Data/{0}.frx", name)); // Load the report into the WebReport object System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source dataSet.ReadXml("App_Data/nwind.xml"); // Open the xml database WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report ViewBag.WebReport = WebReport; // pass the report to View return View(); }
如果您已經熟悉FastReport.Core,那麼此方法沒有任何新內容。我們創建了Web報表對象,將報表 模板加載到其中,創建並註冊了數據源並將報表傳遞給視圖。此方法有一個參數 - 我們用於加載所需報表模板的報表的名稱。
FastReport.Net集包含一個帶有演示報表的文件夾:
C:\ Program Files(x86)\ FastReports \ FastReport.Net \ Demos \ Reports
我們將從中獲取幾個模板和一個nwind.xml數據庫。但首先,在項目根目錄中創建App_Data文件夾。 現在從上面的文件夾中將文件拖入其中:
Barcode.frx,Master-Detail.frx,Matrix.frx,nwind.xml。
下一步是爲此方法創建一個視圖。
我們的項目中沒有Views文件夾。在項目根目錄中創建它。在此文件夾中,添加另一個名爲 SampleData的文件夾。最後,在此文件夾中,我們創建了一個新視圖 - ShowReport.chtml,其中包含以下內容:
@await ViewBag.WebReport.Render()
在異步模式下,我們正在等待生成報表的HTML版本。
所以,我們準備了一個與Angular一起提供的後端。我們來看看ClientApp文件夾。這是一個單頁的 應用程序。我們對src - > app目錄感興趣。以下是負責顯示內容的主要文件 - 頁面模板及其類型腳本處理程序。主頁模板是 app.component.html。我們將完全編輯它:
FastReport.Core Demo Select a report and click the button Matrix Master-Detail Barcode
首先,我們爲不同的報表顯示三個單選按鈕。每個按鈕都訂閱了Click事件,我們通過該事件設置報 表變量的值。該函數將報表的名稱作爲參數。通過這種方式,我們組織了所需報表模板的選擇。這是一個相當原始的實現,但爲了 演示報表,不再需要它。
下面,我們展示了一個名爲ShowReport的按鈕,它也使用Clicked()處理程序訂閱了click事件。 注意條件* ngIf =“show”的div。如果show變量爲true,則將執行內部變量中的代碼。在我們的例子中,將顯示框架。這樣做是爲 了在最初加載頁面時不顯示空框架。此外,當我們選擇報告並單擊“顯示報表”按鈕時,將顯示包含報表的框架。
在框架屬性中,我們從變量url設置源。有趣的是,我們在safeUrl函數的幫助下“規範化”這個變 量,並通過管道應用它。此函數將檢查URL的安全性和有效字符,並將其顯示爲正確的格式。我們稍後會詳細介紹它。
現在,查看app.component.ts組件腳本,該腳本負責處理上面討論的模板:
import { Component } from '@angular/core'; @Component( { selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) export class AppComponent { title = 'app'; show: boolean = false; url: string; report: string; Clicked() { if (this.report != null) { this.show = true; this.url = "api/SampleData/ShowReport?name=" + this.report; } }}
以下是我們在頁面模板中看到的show和url變量。以及變量報表,其中包含所選報表的名稱。 Clicked()函數將show變量設置爲true,並在url變量中設置報表的路徑。
現在我們將創建safeUrl函數,我們在管道中使用變量url。在app目錄文件safeUrl.pipe.ts中:
import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'safeUrl' }) export class SafeUrlPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) { } transform(url) { return this.sanitizer.bypassSecurityTrustResourceUrl(url); }}
要在頁面模板中使用此函數,請在app.module.ts中添加此管道模塊的聲明:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { SafeUrlPipe } from "./safeUrl.pipe"; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, SafeUrlPipe ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
這樣就完成了演示應用程序的工作。運行應用程序:
首先,您需要選擇其中一個報表,然後單擊按鈕:
現在選擇另一個報表並單擊按鈕:
因此,您已經看到在Angular單頁面應用程序中使用FastReport.Core報告生成器並不比通常的ASP .Net Core應用程序困難得多 。
相關鏈接: