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

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 文件夹中：

<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/ShowCubeame=" + data) }); this.show(true); } }}export default { viewModel: HomePageViewModel, template: require('./home-page.html') }; 

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