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:

     Copynpm 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:

     Copy<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:

     Copyvar 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:

     Copy<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: 

     Copy@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++”:

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

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

     Copywindow.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):

     Copywindow.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:

     Copyusing 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!