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

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

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 newnstall 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 数据包的文件夹：

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

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 变量，同时考虑到接收到的 告名称。最后，我们将得到一个 络立方体。让我们启动我们的应用程序并确保这一点。

句还想要更多吗以您点击阅读【FastReport的 表2020最新资源盘点】，查找需要的教程资源。让人兴奋的是FastReport的.NET 表正在 火热销售中！低至3701元型态起！> >查看价格详情

标签：