How to use FastCube .NET in the SPA application Knockout.js

To output the data cube, we will create a SPA application by means of Knockout.js (library for creating web apps). With the help of this library, we will be able to use TypeScript for the frontend part of our application and also ASP.NET Core MVC for the backend part. With it, we will be able to use FastCube .NET reports.

To use Knockout.js together with .NET Core, we need to have pre-installed .NET Core SDK 2.0 or MS Visual Studio. Initially, the application template with the usage of Knockout.js will not be accessible. Install it using the command. For this go to the command line and enter the command:

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

After that, you can create an SPA application based on Knockout.js. In the folder we need, open the command prompt and enter the command:

dotnet new knockout –o KnockWebReport

After creating the application, go to the folder with the created application and install the necessary packets using the command:

npm install

Before working with our web application, prepare Nuget packets with FastCube libraries. To do this, open the FastCube.Core.sln solution and execute the build. You will get two packets as a result - FastCube. Web.2020.2.1.nupkg and FastCube.Core.2020.2.1.nupkg. Place them into any local folder that we will use as a local source of Nuget packets.

Now you can run the created project. Let's start by installing the FastCube packets. Open the packets manager Nuget. In the upper-right corner of the window, you will see the gear icon - it opens the packets source settings. Click on it and add a new packet source - the folder with our FastCube packets:

Now select the added packets sources from the list and install them:

Add the folder App_Data in the catalogue wwwroot. Here the ”Cubes” will be stored:

Connect FastCube in the Startup.cs file. Add the code to the Configure() method:

app.UseFastCube();

Our application contains a SampleDataController controller. Let's add the following method to it:

 [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);
 }

Here we use Cube and Slice objects. To display the data, a WebGrid object is used, which can receive data from Cube or from Slice using the corresponding inherited WebCubeGrid and WebSliceGrid objects.

For the method ShowCube create a “view”:

This view will contain only one line of code:

@await ViewBag.WebReport.Render()

Next, we need to configure the client application. It is located in the ClientApp folder:

In our case, we will use the home page to output the cube. Edit the code in the file 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>

We will display a button that opens a window of the file selection. And also, depending on the value of the logical parameter show, we output a frame with a web report object.

Now we will write a script for this template in the home-page.ts file:

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') };

In this script, we implemented the function of uploading a file to the server. A POST request is executed, and we receive the name of the saved file from the server as a result. Next, we assign the url variable the path to the report display method, taking into account the received report name. Finally, we will get a web-cube. Let's launch our application and make sure of this.

Select the file in the mdc format.

And we get the cube to our web page.

As you may have noticed, work with FastCube .NET in Knockout.js is very simple, especially if you need to output a cube in a web application.