Integration tutorial

How to use our JavaScript based Gantt chart components in a Blazor Server app

Introduction

A Blazor server app is written mostly using C# and HTML and it runs on server side, routing client side output and then input UI events back from the client browser.

However, we can interoperate C# and JavaScript! Following a few steps, we can set a GanttChartView component (part of Gantt Chart Hyper Library for JavaScript) to display some tasks in a timeline, and run in a Blazor server app.

Setting up your Blazor Server app

In this tutorial we'll show how you can integrate a JavaScript based DlhSoft GanttChartView instance into a Blazor Server app.

• Get package

  First, get DlhSoft/GanttChartHyperLibrary package, e.g. using npm:

  
      npm install @dlhsoft/ganttcharthyperlibrary
  

  Copy the files that you need from the package (node_modules/@dlhsoft/GanttChartHyperLibrary source directory) to a new js subfolder in wwwroot (within the Blazor App Visual Studio project).

  

• Add component to a razor page

  In a Razor page of your project (e.g. Pages/Index.razor file in our sample app), add a div to host the component:

  
  <div id="ganttChartView" style="width: 800px; height: 350px;" />
  

  To initialize the component, you need to run some JavaScript code. Feel free to put your JavaScript functions in a separate app.js file under wwwroot/js folder. At first it may look like this:

  
  var ganttChartView;
  window.interop = {
      initialize: () => {
          ganttChartView = document.getElementById("ganttChartView");
          DlhSoft.Controls.GanttChartView.initialize(ganttChartView,
              [{ content: 'Requirements' }, { content: 'Analysis' }],
              {});
      }
  };
  

  interop.initialize function defined above will just initialize the element in your DOM (discovered using its ID) as a GanttChartView component.

  For this to work, though, you’ll need to link the script files into the head section of the main HTML listing — Pages/_Layout.cshtml file:

  
  <script src="~/js/app.js"></script>
  <script src="~/js/DlhSoft.ProjectData.GanttChart.HTML.Controls.js"></script>
  

  To call the actual initialization function from C# using interoperation, add this code into the @code section of your razor page file (Pages/Index.razor); remember to also inject JSRuntime at the top:

  
  @inject IJSRuntime JSRuntime
  
  ...
  
  @code {
      protected async override void OnAfterRender(bool firstRender)
      {
          if (firstRender)
              await JSRuntime.InvokeVoidAsync("interop.initialize");
      }
  ...
  }
  

  At runtime the app should now look like this:

  

• Add code in the C# file

  Next, let’s add some code to add some more items to the GanttChartView component. Start with C# this time — the line under “currentCount++”:

  
  private async void IncrementCount()
  {
      currentCount++;
      await JSRuntime.InvokeVoidAsync("interop.addItem", new { content = "New item " + currentCount });
  }
  

  And then add the interop.addItem JavaScript function, of course:

  
  window.interop = {
          ...
          addItem: (item) => {
          ganttChartView.addItem(item);
      }
  };
  

  You can see the items that are added upon clicking the Increment count button (“Click me” in UI) are created in C# and marshaled down to JavaScript!

  At runtime, after clicking the button twice, the UI would look like this:

  

  Of course, the end user can drag and drop the item bars, or edit item information in the left grid:

  

  But for you to be able to handle these changes in C#, such as to save updates into a database, you’ll need to interoperate the other way around, too. To acomplish that, first, in JavaScript code, handle item property changes like this — using a DotNet.invokeMethodAsync call to reach a C# method (ItemPropertyChanged):

  
  window.interop = {
      initialize: () => {
          ...
          DlhSoft.Controls.GanttChartView.initialize(ganttChartView,
              [...],
              { itemPropertyChangeHandler: itemPropertyChanged });
          },
      ...
  };
  function itemPropertyChanged(item, propertyName, isDirect, isFinal) {
      if (!isDirect || !isFinal || propertyName == 'isSelected')
          return;
      DotNet.invokeMethodAsync('BlazorServerApp', 'ItemPropertyChanged',
          item.content + '.' + propertyName + '=' + item[propertyName]);
  }
  

  The C# part involves creating a new class (e.g. under ChangeHandler.cs file) with an ItemPropertyChanged method there:

  
  using Microsoft.JSInterop;
  
  namespace BlazorServerApp
  {
      public static class ChangeHandler
      {
          [JSInvokable("ItemPropertyChanged")]
          public static void ItemPropertyChanged(string itemPropertyName)
          {
              Console.WriteLine($"Change: { itemPropertyName }");
          }
      }
  }
  

  And now you can see the updates in your server window, at the bottom of the window:

  

  This completes this tutorial, you now have a Blazor Server App with a GanttChartView instance, where you interoperate between C# and JavaScript in a two-way manner. Enjoy!

---

• See also

  Sample app source code General Blazor documentation DlhSoft product information