如何在 SPA 应用 Knockout.js 中使用 FastCube .NET？-控件新闻-慧都网

如何在 SPA 应用 Knockout.js 中使用 FastCube .NET？

翻译|使用教程|编辑：杨鹏连|2021-07-30 14:38:51.740|阅读 173 次

概述：为了输出数据立方体，我们将通过 Knockout.js（用于创建 Web 应用程序的库）创建一个 SPA 应用程序。

FastCube使您能够分析数据并构建汇总表（数据切片），以及轻松、即时地创建各种报表和图表。它是高效分析数据阵列的便利工具。

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

FastCube.Net在线下单立享75折起！赶紧加入购物清单吧！

为了输出数据立方体，我们将通过 Knockout.js（用于创建 Web 应用程序的库）创建一个 SPA 应用程序。在这个库的帮助下，我们将能够在应用程序的前端部分使用 TypeScript，在后端部分使用 ASP.NET Core MVC。有了它，我们将能够使用 FastCube .NET 报告。

要将 Knockout.js 与 .NET Core 一起使用，我们需要预先安装 .NET Core SDK 2.0 或 MS Visual Studio。最初，使用 Knockout.js 的应用程序模板将无法访问。使用命令安装它。为此，请转到命令行并输入命令：

dotnet new — install Microsoft.AspNetCore.SpaTemplates::*

之后，您可以创建基于 Knockout.js 的 SPA 应用程序。在我们需要的文件夹中，打开命令提示符，输入命令：

dotnet new knockout –o KnockWebReport

创建应用程序后，转到包含创建的应用程序的文件夹并使用以下命令安装必要的数据包：

npm install

在使用我们的 Web 应用程序之前，使用 FastCube 库准备 Nuget 数据包。为此，请打开 FastCube.Core.sln 解决方案并执行构建。结果你会得到两个数据包——FastCube。Web.2020.2.1.nupkg 和 FastCube.Core.2020.2.1.nupkg。将它们放入我们将用作 Nuget 数据包的本地源的任何本地文件夹中。

现在您可以运行创建的项目。让我们从安装 FastCube 数据包开始。打开数据包管理器 Nuget。在窗口的右上角，您将看到齿轮图标 - 它打开数据包源设置。单击它并添加一个新的数据包源 - 包含我们的 FastCube 数据包的文件夹：

现在从列表中选择添加的数据包源并安装它们：

在目录 wwwroot 中添加文件夹 App_Data。这里将存储“立方体”：

在 Startup.cs 文件中连接 FastCube。将代码添加到 Configure() 方法中：

app.UseFastCube();

我们的应用程序包含一个 SampleDataController 控制器。让我们向其中添加以下方法：

 [HttpGet("[action]")]
 public IActionResult ShowCube(string name)
 {
 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(_env.WebRootPath,(String.Format("App_Data/{0}",name))));
 return View(cube);
 }

这里我们使用 Cube 和 Slice 对象。为了显示数据，使用了 WebGrid 对象，该对象可以使用相应的继承 WebCubeGrid 和 WebSliceGrid 对象从 Cube 或 Slice 接收数据。
对于 ShowCube 方法创建一个“view”：

此视图将仅包含一行代码：

@await ViewBag.WebReport.Render()

接下来，我们需要配置客户端应用程序。它位于 ClientApp 文件夹中：

在我们的例子中，我们将使用主页输出多维数据集。编辑文件 home-page.html 中的代码：

<div id="app">
 <input type="file" id="FileName" accept=".mdc" data-bind="event: { change: upload($element.files[0]) }" />
</div>
<div data-bind="if: show">
 <iframe id="report" height="1000" width="1000" data-bind="attr: {src: url}"></iframe>
</div>

我们将显示一个按钮，打开文件选择窗口。而且，根据逻辑参数 show 的值，我们输出一个带有 Web 报告对象的框架。
现在我们将在 home-page.ts 文件中为此模板编写脚本：

import * as ko from 'knockout';
 
class HomePageViewModel {
 public show = ko.observable(false);
 public url = ko.observable('');
 
 upload(file: Blob) {
 var files = new FormData();
 files.append("files", file)
 console.log(files);
 if (file != null) {
 fetch('api/SampleData/Upload', {
 method: 'POST',
 body: files
 })
 .then(response => response.text())
 .then(data => {
 this.url("api/SampleData/ShowCube?name=" + data)
 });
 this.show(true);
 }
 }
}
 
export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

在这个脚本中，我们实现了上传文件到服务器的功能。执行 POST 请求，结果我们从服务器收到保存文件的名称。接下来，我们将报告显示方法的路径分配给 url 变量，同时考虑到接收到的报告名称。最后，我们将得到一个网络立方体。让我们启动我们的应用程序并确保这一点。