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

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:

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

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

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

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:

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:

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.

Wybierz plik w formacie mdc.

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.