logo
small logo
  • Produkte
  • Shop
  • Support
  • Über uns
  • Customer panel Support
    • en
    • de
    • JP
    • ZH
  • Home
  • /
  • Articles
  • /
  • How to use WebReport in the Knockout.js application
  • Wie ein WebReport-Objekt in FastReport.Core aktualisieren

    21. September 2020

    Manchmal gibt es eine Aufgabe, den Report zu aktualisieren, z. B. wenn Sie einen neuen

    read more
  • Wie verwendet man FastCube .NET in der Knockout SPA.js Anwendung

    21. Juli 2021

    Um den Cube von Daten zu ableiten, werden wir eine SPA Anwendung mit Knockout.js schaffen

    read more
  • Wie wird das Objekt WebReport in ASP .Net Core App verwendet?

    17. Januar 2018

    Neulich veröffentlichte Fast Reports eine neue Bibliothek für die Arbeit mit dem Framework ASP .Net

    read more
  • Lokalisation von den Online Designer und Web Bericht

    15. August 2017

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 public ActionResult Index(string language) { WebReport webReport = new WebReport(); //ein Exemplar der Klasse WebReport

    read more
  • How to hide unnecessary items from the Web Report toolbar

    3. Juni 2020

    Most advanced report generators let us generate reports for web applications. When displaying reports to

    read more

How to use WebReport in the Knockout.js application

29. Juli 2019

The Knockout.js library is used to create web applications. Due to the support of this library in Microsoft Visual Studio, we can use TypeScript and backend based on ASP .Net Core MVC. The last means that we will be able to use FastReport.Net reports. It remains only to display the report in the client application. That is exactly we will do in this article.

To use knockout with .Net Core, you must have .Net Core SDK 2.0 or MS Visual Studio installed. By default, the application template with the knockout library is not available to you. Therefore, you need to install it with just one command. At the Windows command promt, enter:

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

After that, you can create a spa application based on knockout. In the desired folder, open the command line and enter the command:

dotnet new knockout –o KnockWebReport

After creating the application, go to the folder with the created application and restore the necessary packages using the command:

npm install

Now you can open the created project. Our goal is to create a Web report of FastReport. Therefore, we install the FastReport packages. To do this, open the package manager and configure the local package source to the Nuget folder in the FastReport.Net installation directory. After that, we have a set of FastReport packages available for installation. Install FastReport.Core and FastReport.Web.

Add the App_Data folder to the wwwroot directory. In it we place the database file for reports:

 

Let's use the existing SampleDataController controller. Remove all the methods from it and add our own:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using System.IO;
 
namespace KnockWebReport.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 [HttpGet("[action]")]
 public IActionResult ShowReport(string name)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}", name)))); // Load the report into the WebReport object
 
 System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source
 dataSet.ReadXml(System.IO.Path.Combine(webRoot, "App_Data/nwind.xml")); // Open the xml database
 WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 public async Task<IActionResult> Upload(List<IFormFile> files)
 {
 long size = files.Sum(f => f.Length);
 var webRoot = _env.WebRootPath;
 var filePath = System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}", files[0].FileName)));
 
 if (files[0].Length > 0)
 {
 using (var stream = new FileStream(filePath, FileMode.Create))
 {
 await files[0].CopyToAsync(stream);
 stream.Close();
 }
 }
 Task.WaitAll();
 return Content(Path.GetFileName(filePath));
 }
 }
}

 The ShowReport method loads the specified report template into the WebReport object and displays it. And the Upload method gets the file from the client, saves it to the server and returns the name of the saved file.

For the ShowReport method we create a view:

 

With the following code:

1
 @await ViewBag.WebReport.Render()

 We now turn to the client application. It is located in the ClientApp folder:

 

Let’s use the home page to display the report. Edit the code in the file home-page.html:

1
2
3
4
5
6
<div id="app">
 <input type="file" id="FileName" accept=".frx" 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 display the button that opens the standard open file window. And also, depending on the value of the logical parameter ‘show’, we output the frame with the web object of the report.

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/ShowReport?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. POST request is executed, as a result of which we receive the name of the saved file from the server. Next, assign the url variable to the path of the report display method, taking into account the report name received. As a result, we get a web report.

Let's run our application and see what we have.

Select the report file in frx format.

 And we get a report on your web page.

Thus, we were convinced that displaying the FastReport.Net report in a knockout-based web application is easy. 

about product buy
avatar
Dmitriy Fedyashov
Technical Writer
Fast Reports Team: Dmitriy Fedyashov - Technical Writer at Fast Reports
.NET FastReport WebReport Knockout

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
  • Shop
  • Download
  • Dokumentation
  • Referenzen
  • Informationen zur Deinstallation unserer Produkte
  • FAQ
  • Tutorial Video
  • Forum
  • Support SLA
  • Articles
  • Unsere Nachrichten
  • Presse über uns
  • Partner
  • Außergewöhnliche Lizenzierung
  • Kontakte

© 1998-2023 by Fast Reports Inc.

  • Datenschutz

Trustpilot