亚洲一区二区人妖,欧美另类丝袜,国产123

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

翻譯|使用教程|編輯：楊鵬連|2021-07-30 14:38:51.740|閱讀 162 次

概述：為了輸出數據立方體，我們將通過 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 變量，同時考慮到接收到的報告名稱。最后，我們將得到一個網絡立方體。讓我們啟動我們的應用程序并確保這一點。