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

Um den Cube von Daten zu ableiten, werden wir eine SPA Anwendung mit Knockout.js schaffen (Bibliothek zur der Schaffung von Web -Anwendungen). Mit dieser Bibliothek können wir TypeScript für den Frontend Teil unserer Anwendung verwenden, auch verwenden wir ASP.NET Core MVC zur der Schaffung des Backend Teils. Damit können wir FastCube .NET Berichte verwenden.

Um mit Knockout.js zusammen mit.NET Core zu arbeiten, müssen wir. NET Core SDK 2.0 oder MS Visual Studio vorinstalliert haben. Zunächst wird eine Anwendungsvorlage mit Knockout.js fehlend sein. Sie müssen es mit dem Befehl installieren. Gehen Sie zur Eingabeaufforderung und geben Sie den Befehl ein:

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

Danach können Sie eine Knockout.js-basierte SPA Anwendung erstellen. In dem Ordner, den wir brauchen, öffnen Sie die Eingabeaufforderung und geben Sie den Befehl ein:

dotnet new knockout –o KnockWebReport

Nach der Schaffung der Anwendung gehen Sie in den Ordner mit der erstellten Anwendung und stellen die benötigten Pakete mit dem Befehl wieder her:

npm install

Bevor Sie mit unserer Webanwendung beginnen, müssen Sie Nuget-Pakete mit FastCube Bibliotheken vorbereiten. Um dies zu tun, öffnen Sie die FastCube-Lösung.Core.sln und Build. Als Ergebnis erhalten Sie zwei Pakete - FastCube.Web.2020.2.1.nupkg und FastCube.Core.2020.2.1.nupkg. Sie müssen in jedem lokalen Ordner abgelegt werden, den wir als lokale Quelle für Nuget-Pakete verwenden.

Jetzt können wir von uns erstellte Projekt starten. Beginnen wir mit der Installation von FastCube Paketen. Öffnen Sie den Nuget-Paketmanager. In der oberen rechten Ecke des Fensters sehen Sie ein Zahnradsymbol - es öffnet die Einstellungen für Paketquellen. Klicken Sie darauf und fügen Sie eine neue Paketquelle hinzu - einen Ordner mit unseren FastCube Paketen:

Wählen Sie nun die hinzugefügten Paketquellen in der Liste aus und installieren Sie sie:

Fügen Sie den Ordner App_Data zum Verzeichnis wwwroot hinzu. Darin werden "Cubes" gespeichert:

Verbinden Sie FastCube in der Startup-Datei.cs. Sie müssen in der Methode Configure() Code hinzufügen:

app.UseFastCube();

Unsere Anwendung enthält einen SampleDataController. Lassen Sie uns die folgende Methode hinzufügen:

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

Hier verwenden wir Cube und Slice Objekte. Um Daten abzubilden, benutzt man ein WebGrid Objekt, das Daten aus einem Cube oder einem Slice mithilfe der entsprechenden geerbten WebCubeGrid und WebSliceGrid Objekte empfangen kann.

Für die ShowCube Methode brauchen wir eine "Ansicht" erstellen:

Diese Ansicht enthält nur eine Codezeile:

@await ViewBag.WebReport.Render()

Als nächstes müssen wir die Client Anwendung konfigurieren. Es befindet sich im Ordner ClientApp:

In unserem Fall werden wir die Homepage verwenden, um den Cube auszugeben. Bearbeiten wir den Code in der Datei 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>

Wir werden eine Schaltfläche ausgeben, die das Dateiauswahlfenster öffnet. Und auch, abhängig von dem Wert des logischen Parameters show, geben wir einen Frame mit dem Web-Berichtsobjekt aus.

Jetzt schreiben wir ein Skript für diese Vorlage in der Datei 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') };

In diesem Skript implementierten wir die Funktion zum Hochladen einer Datei auf den Server. Eine POST Anfrage wird ausgeführt, wodurch wir den Namen der gespeicherten Datei vom Server erhalten. Als nächstes weisen wir der URL Variablen den Weg zur Anzeigemethode des Berichts unter Berücksichtigung des empfangenen Berichtsnamens zu. Am Ende erhalten wir einen Web-Cube. Lassen Sie uns unsere App starten und sich überzeugen in das.

Wählen Sie eine Datei im mdc Format. 

Wir bekommen Cube auf unsere Webseite.

Wie Sie vielleicht bemerkte, die Arbeit mit FastCube.NET in Knockout.js ist sehr einfach, besonders wenn Sie den Cube in einer Webanwendung ausgeben brauchen.