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

應用程式已準備就緒。讓我們執行它：