logo
small logo
  • Produkty
  • Zamów
  • Wsparcie techniczne
  • Articles
  • Customer panel Wsparcie techniczne
    • en
    • pt
    • es
    • de
    • pl
    • JP
    • ZH
  • Glówna strona
  • /
  • Articles
  • /
  • Jak używać FastCube.NET w aplikacji React
  • 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).

    read more
  • 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 raportów.

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

    14 kwietnia 2021

    Framework Vue.js jest obecnie bardzo popularny i stoi w jednym szeregu z Angularem. Zastanawialiśmy się

    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
  • Rodzina generatorów raportów FastReport krótka recenzja

    23 marca 2020

    Bez raportowania nie da się prowadzić działalności w żadnej dziedzinie. Biurokracja jest nieodłączną częścią ludzkiego

    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 NuGet

Biblioteka ReactJs znalazła szerokie zastosowanie w tworzeniu aplikacji internetowych typu single-page. Wcześniej przyjrzeliśmy się, jak wyświetlać raporty i projektant raportów online w aplikacji React SPA. Teraz możliwe jest wyświetlanie kostek i plastrów danych z FastCube.Core na stronie internetowej. Przyjrzyjmy się, jak to zrobić.

Aby stworzyć aplikację ASP .NET Core z frontendem React, możesz użyć szablonu w .NET SDK. W wierszu poleceń uruchom:

dotnet new react -o MyReactApp

To polecenie utworzy aplikację demonstracyjną, którą będziemy mogli wykorzystać do wyświetlenia kostki. Oczywiście, aby to zrobić, musisz mieć zainstalowane .NET Core SDK. Ponadto, do uruchomienia aplikacji potrzebny będzie Node.js.

Przejdź do katalogu, w którym znajduje się utworzona aplikacja:

cd MyReactApp

i zainstaluj pakiety javascript za pomocą polecenia:

npm install

Przejdźmy do pracy z utworzoną przez nas aplikacją internetową. Zacznij od zainstalowania pakietów FastCube. Otwórz menedżera pakietów Nuget. W prawym górnym rogu okna zobaczysz ikonę koła zębatego - otworzy ona ustawienia źródła pakietu. Kliknij na niego i dodaj nowe źródło pakietów - folder z naszymi pakietami FastCube, które znajdują się w folderze C:/Program Files (x86)/FastReports/FastCube.Net Professional/Nuget.

Konfigurowanie lokalnego źródła pakietu

Wybierz dodane źródło pakietów z listy rozwijanej i zainstaluj pakiety:

Instalowanie pakietów podstawowych FastCube

Podłącz FastCube w pliku Startup.cs w metodzie Configure():

app.UseFastCube();

Nasza aplikacja zawiera już kontroler WeatherForecastController. Dodajmy do niej naszą metodę webową:

[HttpGet("[action]")]
 public IActionResult ShowCube()
 {
 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("C:\\Users\\FR\\Downloads\\fastcube-net-master\\Demos\\Data\\", "Cubes", "calculated_measures.mdc")); return View(); }

Obiekty Cube i Slice są powiązane, ponieważ w rzeczywistości plaster jest częścią kostki. Obiekt WebGrid jest używany do wyświetlania interaktywnej tabeli krzyżowej. Może wyświetlać zarówno wycinek WebCubeGrid jak i kostkę WebSliceGrid. W naszym przykładzie wczytaliśmy kostkę, którą wcześniej utworzyliśmy w desktopowej wersji FastCube .NET.

Zwróć uwagę na klasę, po której dziedziczy kontroler. Powinno być Controller, a nie BaseController.

Teraz utwórz widok dla tej metody. Można to zrobić przez kliknięcie prawym przyciskiem myszy na znak ShowCube. Widok będzie zawierał jedną linię kodu:

@await ViewBag.WebGrid.Render()

Teraz przejdźmy do aplikacji SPA, która znajduje się w folderze ClientApp. Następnie do folderu src->components dodajemy swój komponent. Wyświetli on iframe z widokiem, który stworzyliśmy powyżej. Dodaj plik Cube.js z następującym kodem:

import React, { Component } from 'react';
export class Cube extends Component {
 static getCube() { 
 return { __html: '<iframe width="1000" height="1000" src="weatherforecast/ShowCube" />' };
 }
 render() {
 return (
 < div dangerouslySetInnerHTML={Cube.getCube()} />
 );
 } 
}

Tutaj wszystko jest jasne. Wyświetlamy iframe, która odwołuje się do metody w kontrolerze.

Teraz należy dodać komponent do struktury aplikacji App.js:

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { Cube } from './components/Cube';
 
import './custom.css'
 
export default class App extends Component {
 static displayName = App.name;
 
 render () {
 return (
 <Layout>
 <Route exact path='/' component={Home} />
 <Route path='/counter' component={Counter} />
 <Route path='/fetch-data' component={FetchData} />
 <Route path='/cube' component={Cube} />
 </Layout>
 );
 }
}

Ponadto należy dodać nowy element menu w pliku NavMenu.js:

import React, { Component } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import './NavMenu.css';
 
export class NavMenu extends Component {
 static displayName = NavMenu.name;
 
 constructor (props) {
 super(props);
 
 this.toggleNavbar = this.toggleNavbar.bind(this);
 this.state = {
 collapsed: true
 };
 }
 
 toggleNavbar () {
 this.setState({
 collapsed: !this.state.collapsed
 });
 }
 
 render () {
 return (
 <header>
 <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
 <Container>
 <NavbarBrand tag={Link} to="/">FastCubeReact</NavbarBrand>
 <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
 <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
 <ul className="navbar-nav flex-grow">
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
 </NavItem>
 <NavItem>
 <NavLink tag={Link} className="text-dark" to="/cube">Cube</NavLink>
 </NavItem>
 </ul>
 </Collapse>
 </Container>
 </Navbar>
 </header>
 );
 }
}
 

Aplikacja jest gotowa. Odpalmy ją:

Aplikacja internetowa wyświetla kostkę

W ten sposób można wyświetlić kostkę internetową za pomocą FastCube.NET w aplikacji React SPA.

about product pobierz zamów
avatar
Dmitriy Fedyashov
Technical Writer
Fast Reports Team: Dmitriy Fedyashov - Technical Writer at Fast Reports
.NET FastCube ASP.NET Core React 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
  • Ticket system
  • FAQ
  • Tutorial Video
  • Forum
  • Articles
  • Our News
  • Prasa o nas
  • Partnerzy
  • Kontakty

© 1998-2022 by Fast Reports Inc.

  • Poufność