Как использовать FastCube .NET в приложении React

UPD: Актуально до версии FastCube .NET 2022.1. Теперь лицензионные пакеты доступны на нашем NuGet-сервере.

Библиотека ReactJs получила широчайшее распространение в веб разработке одностраничных приложений. Ранее мы уже рассматривали, как отображать отчеты и онлайн дизайнер отчетов в SPA приложении React. Теперь появилась возможность отображать на веб-странице кубы и срезы данных из FastCube.Core. Давайте рассмотрим, как это сделать.

Чтобы создать приложение ASP .NET Core с фронтенд частью на React вы можете воспользоваться шаблоном в .NET SDK. В командной строке выполните:

dotnet new react -o MyReactApp

Эта команда создаст демонстрационное приложение, которое мы сможем использовать для отображения куба. Конечно, у вас должен быть установлен .NET Core SDK для этого. Также, для работы приложения потребуется Node.js.

Перейдите в каталог созданного приложения:

cd MyReactApp

и установите javascript пакеты с помощью команды:

npm install

Приступаем к работе с созданным веб-приложением. Начнём с установки пакетов FastCube. Открываем менеджер пакетов Nuget. В правом верхнем углу окна вы увидите значок шестеренка - он открывает настройки источников пакетов. Нажимаем на него и добавляем новый источник пакетов - папку с нашими пакетами FastCube, которые расположены в папке C:\Program Files (x86)\FastReports\FastCube.Net Professional\Nuget.

Выбираем добавленный источник пакетов в выпадающем списке и устанавливаем пакеты:

Подключаем FastCube в файле Startup.cs в методе Configure() добавим код:

app.UseFastCube();

Наше приложение уже содержит контроллер WeatherForecastController. Давайте добавим в него свой веб-метод:

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

Объекты Cube и Slice связаны, так как, по сути, срез является частью куба. Для вывода интерактивной перекрестной таблицы используется объект WebGrid. Он может отображать, как срез WebCubeGrid, так и куб WebSliceGrid. В нашем примере мы загрузили куб, который ранее создали в десктоп версии FastCube .NET.

Обратите внимание на класс, от которого наследуется контроллер. Он должен быть Controller, а не BaseController.

Теперь создадим представление для этого метода. Это можно сделать с помощью правого клика по сигнатуре метода ShowCube. Представление будет содержать единственную строку кода:

@await ViewBag.WebGrid.Render()

Теперь перейдем к SPA приложению, которое располагается в папке ClientApp. Нам нужно добавить свой компонент в папку src->components. Он будет отображать iframe с представлением, которое мы создали выше. Добавляем файл Cube.js со следующим кодом:

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

Здесь все просто. Мы отображаем iframe, который ссылается на метод в контроллере.

Теперь нужно добавить компонент в структуру приложения 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>
 );
 }
}

А также нужно добавить новый пункт меню в файле 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>
 );
 }
}
 

Приложение готово. Давайте запустим его:

Таким образом, вы можете отображать ваш веб куб с помощью FastCube.NET в SPA приложении на React.