logo
small logo
  • Produkty
  • Zamów
  • Wsparcie techniczne
  • About
  • Customer panel Wsparcie techniczne
    • en
    • de
    • JP
    • ZH
  • Glówna strona
  • /
  • Articles
  • /
  • Jak wykorzystać FastCube .NET w aplikacji SPA Knockout.js
  • Jak używać FastCube .NET w aplikacji ASP .NET Core

    6 maja 2021

    1. O FastCube Generator raportów FastReport .NET spełnia prawie wszystkie wymagania użytkowników w zakresie tworzenia

    read more
  • Jak wykorzystać FastCube .NET w aplikacji SPA Angular

    19 kwietnia 2021

    Jednym z najpopularniejszych frameworków do tworzenia aplikacji typu single-page jest Angular. Jest on oparty o

    read more
  • Kompletacja FastCube.Core dla .NET 5.0

    10 maja 2021

    W dzisiejszych czasach narzędzia analityczne takie jak kostki OLAP są bardzo pożądane. Fast Report posiada

    read more
  • Jak utworzyć raport z kodu aplikacji internetowej

    16 lutego 2022

    Czasami tworzenie raportu może okazać się prawdziwym bólem głowy. Na przykład, gdy trzeba zarządzać zawartością

    read more
  • Jak używać FastCube.NET w aplikacji React

    1 października 2021

    UPD: Aktualne do wersji FastReport .NET 2022.2. Pakiety licencyjne są teraz dostępne na naszym Server

    read more

Jak wykorzystać FastCube .NET w aplikacji SPA Knockout.js

21 lipca 2021

Aby wyprowadzić kostkę danych, stworzymy aplikację SPA za pomocą Knockout.js (biblioteka do tworzenia aplikacji webowych). Z pomocą tej biblioteki będziemy mogli wykorzystać TypeScript dla części frontendowej naszej aplikacji, a także ASP.NET Core MVC dla części backendowej. Dzięki niej będziemy mogli korzystać z raportów FastCube .NET.

Aby używać Knockout.js razem z .NET Core, musimy mieć wstępnie zainstalowany .NET Core SDK 2.0 lub MS Visual Studio. Początkowo szablon aplikacji z wykorzystaniem Knockout.js nie będzie dostępny. Należy go zainstalować za pomocą polecenia. W tym celu należy przejść do wiersza poleceń i wpisać komendę:

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

Następnie możemy stworzyć aplikację SPA opartą na Knockout.js. W potrzebnym nam folderze otwieramy wiersz poleceń i wpisujemy komendę:

dotnet new knockout –o KnockWebReport

Po utworzeniu aplikacji należy przejść do folderu z utworzoną aplikacją i zainstalować niezbędne pakiety za pomocą polecenia:

npm install

Przed przystąpieniem do pracy z naszą aplikacją webową należy przygotować pakiety Nuget z bibliotekami FastCube. W tym celu otwórz FastCube.Core.sln i wykonaj build. W efekcie otrzymamy dwa pakiety - FastCube. Web.2020.2.1.nupkg i FastCube.Core.2020.2.1.nupkg. Umieść je w dowolnym lokalnym folderze, który użyjemy jako lokalnego źródła pakietów Nuget.

Teraz możesz uruchomić stworzony projekt. Zacznijmy od zainstalowania pakietów FastCube. Otwórz menedżera pakietów Nuget. W prawym górnym rogu okna zobaczysz ikonę koła zębatego - otwiera ona okno ustawień źródła pakietów. Kliknij na nią i dodaj nowe źródło pakietów - folder z naszymi pakietami FastCube:

Konfiguracja źródeł pakietów

Teraz wybierz z listy dodane źródła pakietów i zainstaluj je:

Konfiguracja źródeł pakietów

W katalogu wwwroot dodajemy folder App_Data. Tutaj będą przechowywane "Cubes":

katalog wwwroot

Podłącz FastCube podczas uruchamiania.plik cs. Dodaj kod do metody Configure():

app.UseFastCube();

Nasza aplikacja zawiera przykładowy Kontroler danych. Dodajmy do tego następującą metodę:

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

Wykorzystujemy tutaj obiekty Cube i Slice. Do wyświetlenia danych jest zastosowany obiekt WebGrid, który może odbierać dane z Cube lub z Slice przy pomocy odpowiednich dziedziczonych obiektów WebCubeGrid i WebSliceGrid.

Dla metody ShowCube wytworzyć "widok":

Utwórz"widok"

Widok ten będzie zawierał tylko jedną linię kodu:

@await ViewBag.WebReport.Render()

Następnie musimy skonfigurować aplikację kliencką. Znajduje się ona w folderze ClientApp:

Konfiguracja aplikacji klienckiej

W naszym przypadku, użyjemy strony głównej do wyprowadzenia kostki. Edytuj kod w pliku 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>

Wyświetlimy przycisk, który otworzy okno wyboru pliku. A także, w zależności od wartości parametru logicznego show, wyprowadzimy ramkę z obiektem raportu sieciowego.

Teraz napiszemy skrypt dla tego szablonu w pliku home-page.ts:

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

W tym skrypcie zaimplementowaliśmy funkcję wysyłania pliku na serwer. Wykonywane jest żądanie POST, w wyniku którego otrzymujemy z serwera nazwę zapisywanego pliku. Następnie przypisujemy zmiennej ścieżkę url do metody wyświetlającej raport, uwzględniając otrzymaną nazwę raportu. Na koniec otrzymamy web-cube. Uruchommy naszą aplikację i upewnijmy się co do tego.

Uruchom Web-cube

Wybierz plik w formacie mdc.

Wybór pliku

I dostajemy kostkę na naszą stronę internetową.

Jak zapewne zauważyłeś, praca z FastCube .NET w Knockout.js jest bardzo prosta, szczególnie jeśli potrzebujesz wyprowadzić kostkę w aplikacji webowej.

about product zamów
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
  • Zamów
  • Pobierz
  • Dokumentacja
  • Opinie użytkowników
  • Jak odinstalować nasze produkty
  • FAQ
  • Tutorial Video
  • Forum
  • Support SLA
  • Articles
  • Our News
  • Prasa o nas
  • Partnerzy
  • Partner program
  • Kontakty

© 1998-2023 by Fast Reports Inc.

  • Poufność
  • Cookies Policy

Trustpilot
By clicking “Accept all, you agree Fast Reports can store cookies on your device and disclose information in accordance with our Cookie Policy.