logo
small logo
  • Producto
  • Comprar
  • Ayuda
  • About
  • Consola de usarios Ayuda
    • en
    • de
    • JP
    • ZH
  • Página principal
  • /
  • Blogs
  • /
  • Cómo usar FastCube .NET en la aplicación SPA Angular
  • Cómo utilizar FastCube .NET en la aplicación SP .NET Core

    6 de mayo de 2021

    1. Sobre FastCube El generador de informes FastReport .NET cubre casi todas las necesidades de

    read more
  • Cómo utilizar FastCube .NET en la aplicación Vue SPA

    14 de abril de 2021

    El marco Vue.js es actualmente muy popular y está en línea con Angular. Ya hemos

    read more
  • La compilación de FastCube.Core para .NET 5.0

    10 de mayo de 2021

    En el mundo moderno, las herramientas de análisis OLAP de Cuba tienen una demanda especial.

    read more
  • How to use FastCube .NET in React application

    1 de octubre de 2021

    UPD: Applies to the versions of FastCube .NET before 2022.1. License packages are now available

    read more
  • Cómo actualizar el informe web FastReport.Core

    21 de septiembre de 2020

    A veces es necesario actualizar el informe, por ejemplo, si ingresa un nuevo valor de

    read more

Cómo usar FastCube .NET en la aplicación SPA Angular

19 de abril de 2021

Uno de los marcos más populares para crear aplicaciones de una sola página es Angular. Se basa en la plantilla MVC, que simplifica el desarrollo y la prueba de dicha aplicación. Muchos usuarios del generador de informes FastReport necesitan mostrar sus informes en aplicaciones web Angular, que discutimos en el artículo usando FR Core Web Report en la aplicación de página única Angular 7. Ahora, en la página web podemos mostrar no solo el informe sino también el cubo de datos de FastCube .NET. Veamos cómo hacerlo.

Inicialmente, debería haber instalado: plataforma Node.js y NET Core SDK 2.0, o mejor más reciente.

Puede crear una aplicación utilizando una plantilla de sdk. Para hacer eso, escriba un comando en una línea de comando:

dotnet new angular -o FCubeAngular

Este comando crea una aplicación de demostración lista para comenzar. Todo lo que tenemos que hacer es agregar nuestro funcional. Ahora en la línea de comando vamos al catálogo con la aplicación creada con la ayuda de un comando:

cd FCubeAngular

e instale paquetes de javascript con un comando:

npm install

Antes de comenzar a trabajar con nuestra aplicación web, tenemos que preparar paquetes Nuget con bibliotecas FastCube. Abra la solución FastCube.Core.sln y construya el objeto. Obtendrá dos paquetes: FastCube.Web.2020.2.1.nupkg y FastCube.Core.2020.2.1.nupkg. Deben colocarse en un directorio local, que luego usará como fuente local de paquetes Nuget.

Ahora puede iniciar el proyecto que había creado antes. Podemos comenzar a instalar paquetes FastCube de inmediato. Abra el administrador de paquetes Nuget. En la esquina superior derecha de la ventana puede ver un icono de engranaje, abre la configuración de las fuentes del paquete. Haga clic en él y agregue una nueva fuente de paquetes: el directorio con nuestros paquetes FastCube:

Setting of package sources

Seleccione la fuente del paquete agregado en la lista desplegable e instale los paquetes:

Package installation

Conecte FastCube en el archivo Startup.cs en el método Configure () agregando un código:

app.UseFastCube();

Nuestra aplicación ya contiene el controlador WeatherForecastController. Agreguemos nuestro método 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();
 }

Si tiene problemas con la pantalla devuelta, verifique la clase de la que se hereda el controlador. Debe ser Controller, no BaseController.

Ahora consideremos el método web que agregamos. Los objetos Cube y Slice están conectados porque, de hecho, un segmento es parte de un cubo. Para generar una tabla cruzada interactiva, se utiliza el objeto WebGrid. Puede generar tanto un segmento WebCubeGrid como un cubo WebSliceGrid. Descarguemos el cubo que habíamos creado anteriormente en la versión de escritorio de FastCube .NET.

Para mostrarlo, necesitaremos una vista. Esto se puede hacer haciendo clic con el botón derecho en la firma del método ShowCube. La vista contendrá una sola línea de código:

 @await ViewBag.WebGrid.Render()

Vayamos a una aplicación SPA ubicada en el directorio ClientApp. Tenemos que agregar nuestro componente al directorio de la aplicación. Mostrará un iframe con la vista que habíamos creado anteriormente. Agregue un subdirectorio de cubo en el directorio de la aplicación. Agregue dos archivos en él: cube.component.html y cube.component.ts. El primero es una pantalla, el segundo es un controlador.

El archivo cube.component.html:

<!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>

Tenga en cuenta la función safeUrl, que transforma la URL en un modo seguro. Lo agregaremos más tarde.

El botón activa la función Click, que instala el indicador show para mostrar el marco y establece la URL en el método ShowCube en el controlador en el backend.

Esta es la implementación de la función Click en el archivo cube.component.ts:

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";
 }
}

Ahora añadamos la función de transformar el enlace al modo normal: agregue el archivo safeUrl.pipe.ts en el mismo directorio:

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);
 }
}

El componente y la función agregados deben registrarse en el archivo 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 { }

Además, agregamos un nuevo encabezado al menú en el archivo 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>

La aplicación está lista. Ejecutémoslo:

The application is running

Este sencillo ejemplo muestra cómo se puede mostrar un cubo de datos basado en bibliotecas FastCube en una aplicación Angular de una sola página. Ahora, la aplicación web le proporciona una herramienta conveniente para el análisis de datos. Puede agregar o eliminar medidas, hechos o filtrar sus datos.

about product comprar
avatar
Dmitriy Fedyashov
Technical Writer
Fast Reports Team: Dmitriy Fedyashov - Technical Writer at Fast Reports
.NET FastCube OLAP MVC WebReport Angular SPA

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Comprar
  • Descargar
  • Documentación
  • Opiniones de usuarios
  • Cómo desinstalar nuestros productos
  • FAQ
  • Toturial en vídeo
  • Foro
  • Documentación técnica
  • Nuestras noticias
  • Quiénes somos
  • Socios
  • Extended licensing
  • Contactos

© 1998-2023 by Fast Reports Inc.

  • Privacidad