91肏比,日本毛视频,91手机视频在线

如何在SPA Angular應用程序中使用FastCube .NET

翻譯|使用教程|編輯：楊鵬連|2021-05-06 10:07:42.533|閱讀 295 次

概述：報表生成器FastReport的許多用戶需要在Angular Web應用程序中顯示他們的報表，我們在本文中使用FR Core Web Report in Single Page Application Angular 7中討論了這些內(nèi)容。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

FastReport.Mono 是一款為Mono Framework設計的功能全面的報表生成工具。FastReport.Mono 是一個多平臺的報表解決方法。它可以應用于Windows, Linux, Mac OS X，以及任何支持Xamarin Mono的操作系統(tǒng)。

在FastReport Mono 2021.1的新版本中，添加了新條形碼-Deutsche Post Leitcode。將RTF轉換為報告對象的算法已得到顯著改進。并且還添加了用于轉換數(shù)字的新功能。歡迎下載體驗。（點擊下方按鈕下載）

點擊下載 FastReport.Mono v2021.1 新版本

用于創(chuàng)建單頁應用程序的最受歡迎的框架之一是Angular。它基于MVC模板，從而簡化了此類應用程序的開發(fā)和測試。報表生成器FastReport的許多用戶需要在Angular Web應用程序中顯示他們的報表，我們在本文中使用FR Core Web Report in Single Page Application Angular 7中討論了這些內(nèi)容。現(xiàn)在，在網(wǎng)頁上，我們不僅可以顯示報告，還可以顯示來自FastCube .NET的數(shù)據(jù)立方體。讓我們看看如何去做。

最初，應該已經(jīng)安裝：平臺Node.js和NET Core SDK 2.0或更高版本。

您可以使用sdk中的模板創(chuàng)建應用程序。為此，請在命令行中鍵入命令：

dotnet new angular -o FCubeAngular

此命令將創(chuàng)建一個演示應用程序，準備啟動。我們要做的就是添加我們的功能。現(xiàn)在，在命令行中，借助命令，使用創(chuàng)建的應用程序轉到目錄：

cd FCubeAngular

并使用以下命令安裝javascript軟件包：

npm install

在開始使用我們的Web應用程序之前，有必要使用FastCube庫準備Nuget軟件包。打開FastCube.Core.sln解決方案并構造該對象。您將獲得兩個軟件包-FastCube.Web.2020.2.1.nupkg和FastCube.Core.2020.2.1.nupkg。應該將它們放置在本地目錄中，您以后將其用作Nuget程序包的本地源。

現(xiàn)在，您可以啟動之前創(chuàng)建的項目。我們可以立即開始安裝FastCube軟件包。打開Nuget程序包管理器。在窗口的右上角，您可以看到一個齒輪圖標，它會打開軟件包源的設置。單擊它并添加一個新的程序包源–包含我們的FastCube程序包的目錄：

在下拉列表中選擇添加的軟件包源，然后安裝軟件包：

通過添加以下代碼，在Configure（）方法中的Startup.cs文件中插入FastCube：

app.UseFastCube();

我們的應用程序已經(jīng)包含控制器WeatherForecastController。讓我們向其中添加我們的web方法：

 [HttpGet("[action]")]
 public IActionResult ShowCube()
 {
 Cube cube = new Cube();
 Slice slice = new Slice()
 {
 Cube = cube
 };
 FilterManager filterManager = new FilterManager()
 {
 Cube = cube
 };
 WebGrid grid;
 grid = new WebSliceGrid()
 {
 Slice = slice
 };
 
 ViewBag.WebGrid = grid;
 
 cube.SourceType = SourceType.File;
 cube.Load(Path.Combine("C:\\Users\\FR\\Downloads\\fastcube-net-master\\Demos\\Data\\", "Cubes", "calculated_measures.mdc"));
 return View();
 }

如果在返回的顯示上遇到問題，請檢查從中繼承控制器的類。它必須是Controller，而不是BaseController。

現(xiàn)在讓我們考慮我們添加的Web方法。多維數(shù)據(jù)集和切片對象已連接，因為實際上，切片是多維數(shù)據(jù)集的一部分。要輸出交互式交叉表，請使用WebGrid對象。它可以同時輸出WebCubeGrid切片和WebSliceGrid多維數(shù)據(jù)集。我們下載早期在桌面版FastCube .NET中創(chuàng)建的多維數(shù)據(jù)集。

要顯示它，我們將需要一個視圖。可以通過右鍵單擊ShowCube方法簽名來完成。該視圖將包含單個代碼行：

 @await ViewBag.WebGrid.Render()

讓我們轉到位于ClientApp目錄中的SPA應用程序。我們需要將組件添加到app目錄中。它將顯示帶有我們上面創(chuàng)建的視圖的iframe。在app目錄中添加一個多維數(shù)據(jù)集子目錄。向其中添加兩個文件：cube.component.html和cube.component.ts。第一個是顯示器，第二個是控制器。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title></title>
</head>
<body>
 <input type="button" (click)="Clicked()" value="Show Report" />
 <div *ngIf="show">
 <iframe id="report" height="1000" width="1000" [src]="url | safeUrl"></iframe>
 </div>
</body>
</html>

注意函數(shù)safeUrl，它將URL轉換為安全模式。我們將在以后添加。

該按鈕將激活Click功能，該功能將安裝show標志以顯示框架，并在后端的控制器中將url設置為ShowCube方法。

這是cube.component.ts文件中Click函數(shù)的實現(xiàn)：

import { Component } from '@angular/core';
 
@Component({
 selector: 'app-cube-component',
 templateUrl: './cube.component.html'
})
export class CubeComponent {
 public show: boolean = false;
 public url: string;
 
 Clicked() {
 this.show = true;
 this.url = "/WeatherForecast/ShowCube";
 }
}

現(xiàn)在，我們添加了將鏈接轉換為普通模式的功能–將文件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 { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { CubeComponent } from './cube/cube.component';
import { SafeUrlPipe } from './cube/safeUrl.pipe';
 
@NgModule({
 declarations: [
 AppComponent,
 NavMenuComponent,
 HomeComponent,
 CounterComponent,
 FetchDataComponent,
 CubeComponent,
 SafeUrlPipe
 ],
 imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
 HttpClientModule,
 FormsModule,
 RouterModule.forRoot([
 { path: '', component: HomeComponent, pathMatch: 'full' },
 { path: 'counter', component: CounterComponent },
 { path: 'fetch-data', component: FetchDataComponent },
 { path: 'cube', component: CubeComponent }
 ])
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

另外，我們在文件nav-menu.component.html的菜單中添加一個新標題：

<header>
 <nav
 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
 >
 <div class="container">
 <a class="navbar-brand" [routerLink]="['/']">FRCoreAngular</a>
 <button
 class="navbar-toggler"
 type="button"
 data-toggle="collapse"
 data-target=".navbar-collapse"
 aria-label="Toggle navigation"
 [attr.aria-expanded]="isExpanded"
 (click)="toggle()"
 >
 <span class="navbar-toggler-icon"></span>
 </button>
 <div
 class="navbar-collapse collapse d-sm-inline-flex justify-content-end"
 [ngClass]="{ show: isExpanded }"
 >
 <ul class="navbar-nav flex-grow">
 <li class="nav-item"
 [routerLinkActive]="['link-active']"
 [routerLinkActiveOptions]="{ exact: true }">
 <a class="nav-link text-dark" [routerLink]="['/']">Home</a>
 </li>
 <li class="nav-item" [routerLinkActive]="['link-active']">
 <a class="nav-link text-dark" [routerLink]="['/counter']">Counter</a>
 </li>
 <li class="nav-item" [routerLinkActive]="['link-active']">
 <a class="nav-link text-dark" [routerLink]="['/fetch-data']">Fetch data</a>
 </li>
 <li class="nav-item" [routerLinkActive]="['link-active']">
 <a class="nav-link text-dark" [routerLink]="['/cube']">Cube</a>
 </li>
 </ul>
 </div>
 </div>
 </nav>
</header>

該應用程序已準備就緒。我們運行它：