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