如何在 React 应用程序中使用 FastCube.Net？

要使用 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)FastReportsFastCube.Net ProfessionalNuget 文件夹中。

在下拉列表中选择添加的包源并安装包：

我们在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最新资源盘点】，查找需要的教程资源。

标签：