Jak używać FastCube.NET w aplikacji React

UPD: Aktualne do wersji FastReport .NET 2022.2. Pakiety licencyjne są teraz dostępne na naszym Server NuGet

Biblioteka ReactJs znalazła szerokie zastosowanie w tworzeniu aplikacji internetowych typu single-page. Wcześniej przyjrzeliśmy się, jak wyświetlać raporty i projektant raportów online w aplikacji React SPA. Teraz możliwe jest wyświetlanie kostek i plastrów danych z FastCube.Core na stronie internetowej. Przyjrzyjmy się, jak to zrobić.

Aby stworzyć aplikację ASP .NET Core z frontendem React, możesz użyć szablonu w .NET SDK. W wierszu poleceń uruchom:

dotnet new react -o MyReactApp

To polecenie utworzy aplikację demonstracyjną, którą będziemy mogli wykorzystać do wyświetlenia kostki. Oczywiście, aby to zrobić, musisz mieć zainstalowane .NET Core SDK. Ponadto, do uruchomienia aplikacji potrzebny będzie Node.js.

Przejdź do katalogu, w którym znajduje się utworzona aplikacja:

cd MyReactApp

i zainstaluj pakiety javascript za pomocą polecenia:

npm install

Przejdźmy do pracy z utworzoną przez nas aplikacją internetową. Zacznij od zainstalowania pakietów FastCube. Otwórz menedżera pakietów Nuget. W prawym górnym rogu okna zobaczysz ikonę koła zębatego - otworzy ona ustawienia źródła pakietu. Kliknij na niego i dodaj nowe źródło pakietów - folder z naszymi pakietami FastCube, które znajdują się w folderze C:/Program Files (x86)/FastReports/FastCube.Net Professional/Nuget.

Wybierz dodane źródło pakietów z listy rozwijanej i zainstaluj pakiety:

Podłącz FastCube w pliku Startup.cs w metodzie Configure():

app.UseFastCube();

Nasza aplikacja zawiera już kontroler WeatherForecastController. Dodajmy do niej naszą metodę webową:

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

Obiekty Cube i Slice są powiązane, ponieważ w rzeczywistości plaster jest częścią kostki. Obiekt WebGrid jest używany do wyświetlania interaktywnej tabeli krzyżowej. Może wyświetlać zarówno wycinek WebCubeGrid jak i kostkę WebSliceGrid. W naszym przykładzie wczytaliśmy kostkę, którą wcześniej utworzyliśmy w desktopowej wersji FastCube .NET.

Zwróć uwagę na klasę, po której dziedziczy kontroler. Powinno być Controller, a nie BaseController.

Teraz utwórz widok dla tej metody. Można to zrobić przez kliknięcie prawym przyciskiem myszy na znak ShowCube. Widok będzie zawierał jedną linię kodu:

@await ViewBag.WebGrid.Render()

Teraz przejdźmy do aplikacji SPA, która znajduje się w folderze ClientApp. Następnie do folderu src->components dodajemy swój komponent. Wyświetli on iframe z widokiem, który stworzyliśmy powyżej. Dodaj plik Cube.js z następującym kodem:

import React, { Component } from 'react';
export class Cube extends Component {
 static getCube() { 
 return { __html: '<iframe width="1000" height="1000" src="weatherforecast/ShowCube" />' };
 }
 render() {
 return (
 < div dangerouslySetInnerHTML={Cube.getCube()} />
 );
 } 
}

Tutaj wszystko jest jasne. Wyświetlamy iframe, która odwołuje się do metody w kontrolerze.

Teraz należy dodać komponent do struktury aplikacji App.js:

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { Cube } from './components/Cube';
 
import './custom.css'
 
export default class App extends Component {
 static displayName = App.name;
 
 render () {
 return (
 <Layout>
 <Route exact path='/' component={Home} />
 <Route path='/counter' component={Counter} />
 <Route path='/fetch-data' component={FetchData} />
 <Route path='/cube' component={Cube} />
 </Layout>
 );
 }
}

Ponadto należy dodać nowy element menu w pliku NavMenu.js:

import React, { Component } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';
 
export class NavMenu extends Component {
 static displayName = NavMenu.name;
 
 constructor (props) {
 super(props);
 
 this.toggleNavbar = this.toggleNavbar.bind(this);
 this.state = {
 collapsed: true
 };
 }
 
 toggleNavbar () {
 this.setState({
 collapsed: !this.state.collapsed
 });
 }
 
 render () {
 return (
 <header>
 <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
 <Container>
 <NavbarBrand tag={Link} to="/">FastCubeReact</NavbarBrand>
 <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
 <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
 <ul className="navbar-nav flex-grow">
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/cube">Cube</NavLink>
 </NavItem>
 </ul>
 </Collapse>
 </Container>
 </Navbar>
 </header>
 );
 }
}
 

Aplikacja jest gotowa. Odpalmy ją:

W ten sposób można wyświetlić kostkę internetową za pomocą FastCube.NET w aplikacji React SPA.