Wie man FastCube .NET in einer React-Anwendung verwendet

UPD: Gilt für die Versionen von FastCube .NET vor 2022.1. Lizenzpakete sind jetzt auf unserem NuGet-Server.

Die ReactJs-Bibliothek ist in der Webentwicklung von Single-Page-Anwendungen weit verbreitet. Wir haben uns bereits angesehen, wie man Berichte und den Online-Berichtsdesigner in einer React SPA-Anwendung anzeigt. Jetzt ist es möglich, Cubes und Slices von Daten aus FastCube.Core auf einer Webseite anzuzeigen. Schauen wir uns an, wie man das macht.

Um eine ASP .NET Core-Anwendung mit einem React-Frontend zu erstellen, können Sie die Vorlage im .NET SDK verwenden. Führen Sie in der Befehlszeile:

dotnet new react -o MyReactApp

Mit diesem Befehl wird eine Demoanwendung erstellt, mit der wir das Cube anzeigen können. Dazu müssen Sie natürlich das .NET Core SDK installiert haben. Außerdem benötigen Sie Node.js, um die Anwendung auszuführen.

Navigieren Sie zum Verzeichnis der erstellten Anwendung:

cd MyReactApp

und installieren Sie die Javascript-Pakete mit dem Befehl:

npm install

Erste Schritte mit der erstellten Webanwendung. Beginnen Sie mit der Installation der FastCube-Pakete. Öffnen Sie den Nuget-Paketmanager. In der oberen rechten Ecke des Fensters sehen Sie ein Zahnradsymbol - damit öffnen Sie die Einstellungen der Paketquellen. Klicken Sie darauf und fügen Sie eine neue Paketquelle hinzu - einen Ordner mit unseren FastCube-Paketen, die sich im Ordner C:\Program Files (x86)\FastReports\FastCube.Net Professional\Nuget befinden.

Wählen Sie die hinzugefügte Paketquelle aus der Dropdown-Liste und installieren Sie die Pakete:

Verbinden Sie FastCube in der Datei Startup.cs in der Methode Configure() und fügen den Code hinzu:

app.UseFastCube();

Unsere Anwendung enthält bereits einen WeatherForecastController. Fügen wir unsere Web-Methode hinzu:

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

Die Objekte Cube und Slice sind miteinander verknüpft, da ein Slice ein Teil eines Cubes ist. Ein WebGrid-Objekt wird verwendet, um eine interaktive Kreuztabelle anzuzeigen. Es kann sowohl ein WebCubeGrid-Slice als auch einen WebSliceGrid-Cube anzeigen. In unserem Beispiel haben wir das Cube geladen, das wir zuvor in der Desktop-Version von FastCube .NET erzeugt haben.

Beachten Sie die Klasse, von der der Controller geerbt wird. Es sollte Controller heißen, nicht BaseController.

Erstellen Sie nun eine Ansicht für diese Methode. Dazu klicken Sie mit der rechten Maustaste auf die Signatur der Methode ShowCube. Die Ansicht wird eine einzige Codezeile enthalten:

@await ViewBag.WebGrid.Render()

Gehen Sie nun zur SPA-Anwendung über, die sich im Ordner ClientApp befindet. Wir müssen unsere Komponente dem Ordner src->components hinzufügen. Es wird der iframe mit der oben erstellten Ansicht angezeigt. Fügen Sie eine Datei Cube.js mit folgendem Code hinzu:

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

Hier ist es ganz einfach. Wir zeigen einen iframe an, der auf eine Methode in einem Controller verweist.

Nun muss die Komponente zur App.js-Anwendungsstruktur hinzugefügt werden:

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

Sie müssen auch einen neuen Menüpunkt in der Datei NavMenu.js hinzufügen:

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

Die Anwendung ist fertig. Lassen wir es laufen:

So können Sie Ihren Webcube mit FastCube.NET in einer React SPA-Anwendung anzeigen.