Blazor - это фреймворк одностраничных приложений (SPA), разработанный Microsoft, и он позволяет разработчикам на C # разрабатывать веб-приложения с использованием C #, HTML и CSS как для внешнего, так и для внутреннего интерфейса. Blazor новый по сравнению с другими фреймворками, такими как Angular, React, Vue и другими.

Blazor привлекает разработчиков C #, поскольку разработчики могут повторно использовать свои существующие знания о C # для создания приложений. Кроме того, Blazor имеет встроенную совместимость с JavaScript, что означает, что разработчики могут использовать существующие хорошо разработанные пакеты JavaScript в приложении Blazor.

Одним из примеров являются пакеты визуализации данных, такие как Chart.js, Apexcharts, canvasJS и другие популярные пакеты, которые разработчики могут использовать для построения диаграмм в веб-приложениях.

Давайте посмотрим, как совместить .NET Core и JavaScript. Сначала начнем с шаблона Blazor с данными прогноза погоды, и мы будем использовать эти данные для создания линейной диаграммы с помощью Apexcharts. В качестве обзора мы сделаем следующее:

  1. Установка
  2. Создание диаграмм JavaScript
  3. Создание диаграмм в компонентах Razor

Шаг 1: установка

Начните с установки пакетов. Самый простой способ - через CDN, где мы включаем пакеты в наше приложение. Перейдите к _Host.cshtml и включите пакеты в конце тега body.

Затем создайте один файл CSS (необязательно) и файл oneJS в корневом каталоге. Файл CSS используется для определения стиля для наших линейных диаграмм, а файл JS - для наших библиотек JavaScript. Включите файл CSS в тег Head _Host.cshtml и JavaScript в конце тела.

Вот мой фрагмент кода.

Шаг 2. Создание диаграмм на JavaScript

Хорошо, мы закончили установку. Перейдем к нашему JavaScript. В этом примере я использую образец из Apexchart для линейных диаграмм, чтобы нанести указанную выше температуру на линейную диаграмму. См. Пример кода здесь: https://apexcharts.com/javascript-chart-demos/line-charts/data-labels/

Вы можете обратиться к различным параметрам, задокументированным в Apexcharts, для вашей визуализации. Вот пример с двумя параметрами - value и label, а имя моей функции - generateLineChart.

Вот мой фрагмент файла chart.js:

Шаг 3. Создайте диаграммы в компонентах Razor

Отлично, это все, что нам нужно для JavaScript. Теперь мы можем перейти на нашу страницу Razor. Для простоты я буду повторно использовать FetchData.razor. Нам потребуется сделать три действия:

  1. Ввести IJSRuntime
  2. Методы C # для вызова JSRuntime
  3. Создать элемент HTML

[1] Ввести IJSRuntime

Это просто. Просто добавьте вверху @inject IJSRuntime jsRuntime. Это позволит нам вызывать JavaScript из метода .NET. Мы будем использовать это для вызова функций диаграммы, которые мы создали выше. Более подробную информацию можно найти здесь: https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1

[2] Методы C # для вызова JSRuntime

Обычно у нас есть методы для получения данных из асинхронного метода или через REST API. В этом примере мы получаем данные из GetForecastAsync с помощью метода «OnInitializedAsync».

В этом случае мы не должны включать рендеринг в этот метод, поскольку наша библиотека JavaScript еще не инициализирована и не будет отображать наши диаграммы в этом методе. Вместо этого мы должны использовать «OnAfterRenderAsync». Это следует за жизненным циклом Blazor, где сначала мы компилируем HTML, а затем инициализируем нашу библиотеку JavaScript.

В качестве примера я использовал LINQ для генерации параметров моего JavaScript и их синтаксического анализа в IJSRuntime.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
   if(firstRender)
   {
      var value = forecasts.Select(v => v.TemperatureC);
      var label = forecasts.Select(l => l.Date.ToShortDateString());
      await jsRuntime.InvokeVoidAsync("generateLineChart", value, label);
      this.StateHasChanged();
   }
}

[3] Создать элемент HTML

Наконец, просто включите HTML-тег для нашей диаграммы с соответствующим HTML-идентификатором.

<div id="chart"></div>

Вот и все! Вот полный фрагмент кода для моего «FetchData.razor».

Вот и все! С помощью нескольких простых шагов мы можем использовать популярные библиотеки JavaScript для визуализации данных для создания приложения панели управления в Blazor.

Удачного кодирования!

Обязательно подумайте о подписке на Среднее членство, если вы открыли для себя новые идеи в Medium!



Присоединяйтесь к Medium по моей реферальной ссылке - Маркус Ти
Как участник Medium, часть вашего членского взноса идет писателям, которых вы читаете, и вы получаете полный доступ к каждой истории ... marcustee.medium.com



Приложение

Blazor IJSRuntime: https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-3.1

Жизненный цикл Blazor: https://docs.microsoft.com/en-us/aspnet/core/blazor/lifecycle?view=aspnetcore-3.1