FastCube使您能够分析数据并构建汇总表（数据切片），以及轻松、即时地创建各种报表和图表。它是高效分析数据阵列的便利工具。ReactJs 库已广泛用于单页应用程序的 Web 开发。之前我们已经介绍了如何在 React SPA 应用程序中显示报告和在线报告设计器。现在可以在网页上显示来自 FastCube.Core 的多维数据集和数据切片。让我们考虑如何做到这一点。
立即点击获取FastCube.Net 2021最新安装包+用户手册
要使用 React 前端部分创建 ASP .Net Core 应用程序，您可以使用 .Net SDK 中的模板。在命令行中运行：
dotnet new react -o MyReactApp
此命令将创建一个演示应用程序，我们可以使用它来显示多维数据集。当然，为此，您必须安装 .NET Core SDK。此外，该应用程序将需要 Node.js。
转到创建的应用程序的目录：
cd MyReactApp
并使用以下命令安装 javascript 包：
npm install
让我们开始使用创建的 Web 应用程序。首先，让我们安装 FastCube 软件包。打开 Nuget 包管理器。在窗口的右上角，你会看到一个齿轮图标，它打开包源的设置。单击它并添加一个新的包源，一个包含我们 FastCube 包的文件夹，位于 C:\Program Files (x86)\FastReports\FastCube.Net Professional\Nuget 文件夹中。
在下拉列表中选择添加的包源并安装包：
我们在Startup.cs文件中连接FastCube，在Configure()方法中添加代码：
app.UseFastCube();
我们的应用程序已经包含 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(); }
Cube 和 Slice 对象是相关的，因为实际上，切片是多维数据集的一部分。WebGrid 对象用于显示交互式交叉表。它可以显示 WebCubeGrid 切片和 WebSliceGrid 多维数据集。在我们的示例中，我们加载了之前在 FastCube .NET 桌面版本中创建的多维数据集。
注意控制器继承的类。它应该是 Controller，而不是 BaseController。
现在让我们为这个方法创建一个视图。这可以通过右键单击 ShowCube 方法签名来完成。该视图将包含一行代码：
@await ViewBag.WebGrid.Render()
现在让我们转到位于 ClientApp 文件夹中的 SPA 应用程序。我们需要将我们的组件添加到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>
);
}
}
应用程序已准备就绪。让我们运行它：
