logo
small logo
  • Products
  • Buy
  • Support
  • About
  • Customer panel Support
    • en
    • de
    • JP
    • ZH
  • Home
  • /
  • Articles
  • /
  • How to use FastCube .NET in the SPA application Knockout.js
  • How to use FastCube .NET in the SPA Angular application

    April 19, 2021

    One of the most popular frameworks for creating single-page applications is Angular. It is based

    read more
  • How to use FastCube .NET in ASP .NET Core application

    May 6, 2021

    1. About FastCube Report generator FastReport .NET covers nearly all requirements of users in report

    read more
  • How to use WebReport with ASP .NET Web Core application

    January 17, 2018

    Recently FastReport introduced a new library under the .NET - FastReport Core platform. This is

    read more
  • How to use FastReport Core Web Report in Angular 7

    April 29, 2019

    The concept of one-page apps is finding an increasing number of supporters. One of the

    read more
  • How to use FastCube .NET in Vue SPA application

    April 14, 2021

    The Vue.js framework is currently very popular and stands in line with Angular. We have

    read more

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

July 21, 2021

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:

Packets sources configuration

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

Packets sources configuration

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

wwwroot directory

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”:

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:

The client application configuring

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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.

Launch a Web-cube

Select the file in the mdc format.

Selection a file

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.

about product buy
avatar
German Bagaevski
QA
Fast Reports Team: German Bagaevski - Quality Assurance at Fast Reports
.NET FastCube OLAP ASP.NET MVC Core WebReport Knockout SPA

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Buy
  • Download
  • Documentation
  • Testimonials
  • How to uninstall
  • FAQ
  • Tutorial Video
  • Forum
  • Support SLA
  • Articles
  • Our News
  • Press about us
  • Resellers
  • Extended licensing
  • Contact us

© 1998-2023 by Fast Reports Inc.

  • Privacy Policy

Trustpilot