Dans ce tutoriel dédié aux développeurs débutants, je veux démontrer la simplicité de Blazor par rapport au MVC et au WebForms. Pour ce tuto, nous nous baserons sur le code de https://www.aspsnippets.com/Articles/Create-Family-Tree-Hierarchy-Chart-from-Database-in-ASPNet-using-C-and-VBNet.aspx.

Ce code est disponible sur Github: https://github.com/desalbres/FamilyHierarchy et la demo ici: https://blazordemos.exceldev.com/

D'abord il nous faut référencer le code Google Chart dans la page _Host.cshtml.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>    

Après nous avons, notre classe de base: 

    public class Hierarchy
    {
        public int MemberId { get; set; }
        public string Name { get; set; }
        public int? ParentId { get; set; }
    }

public class Hierarchies
    {
        public List<Hierarchy> data
        {
            get
            {
                return new List<Hierarchy> {
                     new Hierarchy {  MemberId= 1, Name= "Nancy Davolio", ParentId = 4 },
                     new Hierarchy {  MemberId= 2, Name= "Andrew Fuller", ParentId = 4 },
                     new Hierarchy {  MemberId= 3, Name= "Janet Leverling", ParentId = 4 },
                     new Hierarchy {  MemberId= 4, Name= "Margaret Peacock", ParentId = null },
                     new Hierarchy {  MemberId= 5, Name= "Steven Buchanan", ParentId = 3 },
                     new Hierarchy {  MemberId= 6, Name= "Michael Suyama", ParentId =  3 },
                     new Hierarchy {  MemberId= 7, Name= "Robert King", ParentId = 2 },
                     new Hierarchy {  MemberId= 8, Name= "Laura Callahan", ParentId = 2 },
                     new Hierarchy {  MemberId= 9, Name= "Anne Dodsworth", ParentId = 2 }
                };
            }
        }

    }

Dans la page de base, nous devons appeler un interop javascript pour afficher le Google Chart. 

@page "/"
@inject IJSRuntime JsRuntime
<h1>Hello, world!</h1>

Welcome to your new app.

<div id="chart">

</div>

@functions
{
    protected override async Task OnAfterRenderAsync()
    {
        var hierarchies = new Data.Hierarchies();
        var data = hierarchies.data;
        await JsRuntime.InvokeAsync<Task>("drawChart", data);
    }


}

Et enfin, le code javascript. Il est important de noter que nous n'avons pas besoin de sérialiser le code.

window.drawChart = (data) => {
    google.load("visualization", "1", { packages: ["orgchart"] });
    google.setOnLoadCallback(drawGoogleChart);    
    function drawGoogleChart() {        
        var dt = new google.visualization.DataTable();
        dt.addColumn('string', 'Entity');
        dt.addColumn('string', 'ParentEntity');
        dt.addColumn('string', 'ToolTip');  
        for (var i = 0; i < data.length; i++) {
            var memberId = data[i].memberId.toString();            
            var memberName = data[i].name;            
            var parentId = data[i].parentId != null ? data[i].parentId.toString() : '';
            dt.addRows([[{
                v: memberId,
                f: memberName + '<div><img src = "img/' + memberId + '.jpg" /></div>'
            }, parentId, memberName]]);
        }        
        var chart = new google.visualization.OrgChart(document.getElementById("chart"));
        chart.draw(dt, { allowHtml: true });
    }
};

Voilà, le tour est joué!!!