半岛外围网上直营

FastCube使您能够分析数据并构建汇总表（数据切片），以及轻松、即时地创建各种报表和图表。它是高效分析数据阵列的便利工具。ReactJs 库已广泛用于单页应用程序的 Web 开发。之前我们已经介绍了如何在 React SPA 应用程序中显示报告和在线报告设计器。现在可以在网页上显示来自 FastCube.Core 的多维数据集和数据切片。让我们考虑如何做到这一点。

立即点击获取FastCube.Net 2021最新安装包+用户手册

dotnet new react -o MyReactApp

此命令将创建一个演示应用程序，我们可以使用它来显示多维数据集。当然，为此，您必须安装 .NET Core SDK。此外，该应用程序将需要 Node.js。

转到创建的应用程序的目录：

cd MyReactApp

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

 应用程序已准备就绪。让我们运行它：

还想要更多吗？可以您点击阅读【FastReport的报表2020最新资源盘点】，查找需要的教程资源。