logo
small logo
  • Продукты
  • Купить
  • Поддержка
  • О нас
  • Клиентская панель Поддержка
  • Главная
  • /
  • Статьи
  • /
  • Как использовать FastCube .NET в SPA приложении Knockout.js
  • Как использовать FastCube .NET в SPA приложении Angular

    19 апреля 2021 г.

    Одним из самых популярных фреймворков для создания одностраничных приложений является Angular. Он основан на шаблоне

    Подробнее
  • Как использовать FastCube .NET в приложении ASP .NET Core

    6 мая 2021 г.

    1. О FastCube Генератор отчетов FastReport .NET покрывает почти все потребности пользователей в отчетности. Но

    Подробнее
  • Как использовать FastCube .NET в SPA приложении Vue

    14 апреля 2021 г.

    Фреймворк Vue.js сейчас очень популярен и стоит в одном ряду с Angular. Как использовать FastReport.Core

    Подробнее
  • Сборка FastCube.Core под .NET 5.0

    10 мая 2021 г.

    В современном мире особым спросом пользуются инструменты анализа - OLAP кубы. В Fast Report такая

    Подробнее
  • Как использовать объект WebReport в приложениях ASP .NET Core

    17 января 2018 г.

    Не так давно FastReport порадовал нас новой библиотекой - FastReport Core. Это специальная версия FastReport

    Подробнее

Как использовать FastCube .NET в SPA приложении Knockout.js

21 июля 2021 г.

Для того чтобы вывести куб данных мы создадим SPA приложение с использованием Knockout.js (библиотека для создания веб-приложений). С помощью этой библиотеки мы сможем использовать TypeScript для фронтенд части нашего приложения, также используем ASP.NET Core MVC для создания бэкэнд части. С его помощью мы сможем использовать отчеты FastCube .NET.

Для работы с Knockout.js вместе с .NET Core нам необходимо иметь предустановленный .NET Core SDK 2.0 или MS Visual Studio. Изначально шаблон приложения с использованием Knockout.js будет не доступен. Необходимо установить его при помощи команды. Переходим в командную строку и вводим команду:

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

После этого можно создать SPA приложение на основе Knockout.js. В необходимой нам папке открываем командную строку и вводим команду:

dotnet new knockout –o KnockWebReport

После создания приложения переходим в папку с созданным приложением и восстанавливаем нужные пакеты с помощью команды:

npm install

Перед началом работы с нашим веб-приложением, нужно подготовить Nuget пакеты с библиотеками FastCube. Для этого нужно открыть решение FastCube.Core.sln и выполните сборку. В результате вы получите два пакета - FastCube.Web.2020.2.1.nupkg и FastCube.Core.2020.2.1.nupkg. Их нужно поместить в любую локальную папку, которую будем использовать в качестве локального источника пакетов Nuget.

Теперь можно запустить созданный нами проект. Давайте начнем к установку пакетов FastCube. Открываем менеджер пакетов Nuget. В правом верхнем углу окна вы увидите значок шестеренки - он открывает настройки источников пакетов. Нажимаем на него и добавляем новый источник пакетов - папку с нашими пакетами FastCube:

Настройка источников пакетов

Теперь выберем добавленные источники пакетов в списке и установим их:

Установка пакетов

Добавляем папку App_Data в каталог wwwroot.  В нем будут храниться “кубы”:

Каталог wwwroot

Подключим FastCube в файле Startup.cs. Нужно в метод Configure() добавить код:

app.UseFastCube();

Наше приложение содержит контроллер SampleDataController. Давайте добавим в него следующий метод:

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

Здесь мы используем объекты куба и среза - Cube и Slice. Для отображения данных используется объект WebGrid, который может принимать данные от куба или от среза с помощью соответствующих наследуемых объектов WebCubeGrid и WebSliceGrid.

Для метода ShowCube нам необходимо создать “представление”:

Создаём “представление”

В этом представлении будет содержаться только одна строчка кода:

@await ViewBag.WebReport.Render()

Далее, нам необходимо настроить клиентское приложение. Оно расположено в папке ClientApp:

Настройка клиентского приложения

В нашем случае мы будем использовать домашнюю страницу для вывода куба. Отредактируем код в файле 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>

Мы будем выводить кнопку, которая открывает окно выбора файла. А также, в зависимости от значения логического параметра show, мы выводим фрейм с объектом веб отчета.

Теперь напишем скрипт для этого шаблона в файле 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') };

В этом скрипте мы реализовали функцию загрузки файла на сервер. Выполняется POST запрос, в результате которого мы получаем от сервера имя сохраненного файла. Далее присваиваем переменной url путь к методу отображения отчета с учетом полученного имени отчета. В итоге мы получим веб-куб. Давайте запустим наше приложение и убедимся в этом.

Запуск веб-куба

Выбираем файл в формате mdc.

Выбор файла

И получаем куб на свою веб-страницу.

Как вы могли заметить, работать с FastCube .NET в Knockout.js очень просто, особенно если вам необходимо вывести куб в веб-приложении.

О продукте Купить
avatar
German Bagaevski
Поддержка и тестирование
Fast Reports Team: German Bagaevski - Quality Assurance at Fast Reports
.NET FastCube OLAP ASP.NET MVC Core WebReport Knockout SPA

Добавить комментарий
logo
  • +7(800)551-75-80
  • info@fastreport.ru
  • Ростов-на-Дону, Россия, 344082, ул.Обороны 24, офис 311
  • Купить
  • Загрузить
  • Документация
  • Отзывы
  • Как деинсталировать
  • FAQ
  • Видео уроки
  • Форум
  • Условия оказания поддержки
  • Статьи
  • Наши Новости
  • Пресса о нас
  • Реселлеры
  • Нестандартное лицензирование
  • ВУЗам
  • Карьера
  • Контакты

© 1998-2023 ООО «Быстрые отчеты»

  • Согласие с обработкой персональных данных
  • Политика в отношении обработки персональных данных
  • Не является публичной офертой