ASP.NET Core Blazor [Preview]
Search results

Getting Started with Essential JS 2 for ASP.NET Core Razor Components in Visual Studio 2019

This article provides a step-by-step introduction to configure Essential JS 2 setup, build and publish a simple .NET Core Razor Components web application using the Visual Studio 2019.

Prerequisites

The official prerequisites to create and run an ASP.NET Core Razor Components on Windows environment are described in the .NET Core Razor components documentation website.

Create a Razor application from VS 2019

Step 1: Choose File > New > Project… in the Visual Studio menu bar.

new project in aspnetcore razor

Step 2: Make sure .NET Core and ASP.NET Core 3.0 are selected at the top.

select framework

Step 3: Choose the Razor template and change the application name, and then click OK.

Importing Essential JS 2 Razor components in the application

Step 1: Now, add the Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package to the new application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.

nuget explorer

Step 2: Search the Syncfusion.EJ2.AspNet.Core.RazorComponents keyword in the Browse tab and install Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package in the application.

select nuget

Step 3: The Essential JS 2 package will be included in the project, after the installation process is completed.

Step 4: Open ~/_Imports.razor file and import the Syncfusion.EJ2.RazorComponents.

@using Syncfusion.EJ2.RazorComponents
@using Syncfusion.EJ2.RazorComponents.TreeMaps

Step 5: Add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.

import cdn

Step 6: Now, add the Syncfusion Essential JS 2 components in any web page (cshtml) in the Pages folder. For example, the Tree Map component is added in the ~/Pages/Index.cshtml page.

<div class="control-section">
    <EjsTreeMap ID="Layout" titleSettings="@titleSettings" WeightValuePath="@Sales"  
    DataSource="@datasource" LeafItemSettings="@leaf"></EjsTreeMap>
</div>

@functions{

    public object titleSettings { get; set; } = new {
        text = "Car Sales by Country - 2017",
        textStyle = new { size = "15px" }
    };
    public object leaf { get; set; } = new
    {
        labelPath=  "Company"
    };
    public List<object> datasource { get; set; } = new List<object> {
              new { Continent= "China", Company= "Volkswagen", Sales= 3005994 },
              new { Continent= "China", Company= "General Motors", Sales= 1230044 },
              new { Continent= "China", Company= "Honda", Sales= 1197023 },
              new { Continent= "United States", Company= "General Motors", Sales=3042775  },
              new { Continent= "United States", Company= "Ford", Sales=2599193  },
              new { Continent= "United States", Company= "Toyota", Sales=2449587  },
              new { Continent= "Japan",Company= "Toyota", Sales=1527977  },
              new { Continent= "Japan", Company= "Honda", Sales=706982 },
              new { Continent= "Japan", Company= "Suzuki", Sales=623041  },
              new { Continent= "Germany",Company= "Volkswagen", Sales=655977  },
              new { Continent= "Germany", Company= "Mercedes", Sales=310845  },
              new { Continent= "Germany", Company= "BMW", Sales=261931  },
              new { Continent= "United Kingdom", Company= "Ford ", Sales=319442  },
              new { Continent= "United Kingdom", Company= "Vauxhall", Sales= 251146 },
              new { Continent= "United Kingdom", Company= "Volkswagen", Sales=206994  },
              new { Continent= "India", Company= "Maruti Suzuki", Sales=1443654  },
              new { Continent= "India", Company= "Hyundai", Sales=476241  },
              new { Continent= "India", Company= "Mahindra", Sales=205041  },
              new { Continent= "France", Company= "Renault", Sales=408183 },
              new { Continent= "France", Company= "Peugeot", Sales=336242 },
              new { Continent= "France", Company= "Citroen", Sales=194986  },
              new { Continent= "Brazil", Company= "Flat Chrysler", Sales=368842  },
              new { Continent= "Brazil", Company= "General Motors", Sales= 348351 },
              new { Continent= "Brazil", Company= "Volkswagen", Sales= 245895 },
              new { Continent= "Italy", Company= "Flat Chrysler", Sales=386260  },
              new { Continent= "Italy", Company= "Volkswagen", Sales= 138984 },
              new { Continent= "Italy", Company= "Ford", Sales= 125144 },
              new { Continent= "Canada", Company= "Ford", Sales=305086},
              new { Continent= "Canada", Company= "FCA", Sales=278011 },
              new { Continent= "Canada", Company= "GM", Sales= 266884 },
        };
    }

Step 7: After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

Treemap Sample

Render tree map

This section explains how to render the tree map control with data source.

<div class="control-section">
    <EjsTreeMap ID="Layout" WeightValuePath="Count" DataSource=@datasource
    LeafItemSettings="@leaf"></EjsTreeMap>
</div>
@functions{
    public object leaf { get; set; } = new
    {
        labelPath = "State",
    };
    public List<object> datasource { get; set; } = new List<object> {
            new { Title= "State wise International Airport count in South America", State= "Brazil", Count= 25 },
            new { Title= "State wise International Airport count in South America", State= "Colombia", Count= 12 },
            new { Title= "State wise International Airport count in South America", State= "Argentina", Count= 9 },
            new { Title= "State wise International Airport count in South America", State= "Ecuador", Count= 7 },
            new { Title= "State wise International Airport count in South America", State= "Chile", Count= 6 },
            new { Title= "State wise International Airport count in South America", State= "Peru", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Venezuela", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Bolivia", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Paraguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Uruguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Falkland Islands", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "French Guiana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Guyana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Suriname", Count= 1 },
        };
    }

Treemap Sample

Here, the tree map control is created with data source and set with the weightValuePath as count. You can customize the leaf level tree map items using the leafItemSettings. The properties such as fill, border, and labelPosition can be changed using the leafItemSettings.

Apply color mapping

The color mapping feature supports customization of item colors based on the underlying value of item received from bound data source. Specify the field name from values that have to be compared for the item in the equalColorValuePath or rangeColorValuePath property.

<div class="control-section">
    <EjsTreeMap ID="Layout" WeightValuePath="Count" EqualColorValuePath = "Count"
     Height="350px" DataSource=@datasource
     LeafItemSettings="@leaf"></EjsTreeMap>
</div>
@functions{
    public object leaf { get; set; } = new
    {
        labelPath = "State",
            colorMapping = new object[] {
                new {
                    value = 25,
                    color = "#634D6F"
                },
                new {
                    value = 12,
                    color = "#B34D6D"
                },
                new {
                    value = 9,
                    color = "#557C5C"
                },
                new {
                    value = 7,
                    color = "#44537F"
                },
                new {
                    value = 6,
                    color =  "#637392"
                },
                new {
                    value = 3,
                    color = "#7C754D"
                },
                new {
                    value = 2,
                    color = "#2E7A64"
                },
                new {
                    value = 1,
                    color = "#95659A"
                },
            }
    };
    public List<object> datasource { get; set; } = new List<object> {
            new { Title= "State wise International Airport count in South America", State= "Brazil", Count= 25 },
            new { Title= "State wise International Airport count in South America", State= "Colombia", Count= 12 },
            new { Title= "State wise International Airport count in South America", State= "Argentina", Count= 9 },
            new { Title= "State wise International Airport count in South America", State= "Ecuador", Count= 7 },
            new { Title= "State wise International Airport count in South America", State= "Chile", Count= 6 },
            new { Title= "State wise International Airport count in South America", State= "Peru", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Venezuela", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Bolivia", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Paraguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Uruguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Falkland Islands", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "French Guiana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Guyana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Suriname", Count= 1 },
        };
    }

Treemap Sample

Enable legend

Legend is enabled for the tree map control by setting the visible property to true in legendSettings object.

<div class="control-section">
    <EjsTreeMap ID="Layout" LegendSettings="@legendSettings" WeightValuePath="Count"
    EqualColorValuePath = "Count" Height="350px" DataSource=@datasource
    LeafItemSettings="@leaf"></EjsTreeMap>
</div>
@functions{
    public object legendSettings { get; set; } = new
    {
        visible= true ,
        position = "Top",
        shape = "Rectangle"
    };
    public object leaf { get; set; } = new
    {
        labelPath = "State",
            colorMapping = new object[] {
                new {
                    value = 25,
                    color = "#634D6F"
                },
                new {
                    value = 12,
                    color = "#B34D6D"
                },
                new {
                    value = 9,
                    color = "#557C5C"
                },
                new {
                    value = 7,
                    color = "#44537F"
                },
                new {
                    value = 6,
                    color =  "#637392"
                },
                new {
                    value = 3,
                    color = "#7C754D"
                },
                new {
                    value = 2,
                    color = "#2E7A64"
                },
                new {
                    value = 1,
                    color = "#95659A"
                },
            }
    };
    public List<object> datasource { get; set; } = new List<object> {
            new { Title= "State wise International Airport count in South America", State= "Brazil", Count= 25 },
            new { Title= "State wise International Airport count in South America", State= "Colombia", Count= 12 },
            new { Title= "State wise International Airport count in South America", State= "Argentina", Count= 9 },
            new { Title= "State wise International Airport count in South America", State= "Ecuador", Count= 7 },
            new { Title= "State wise International Airport count in South America", State= "Chile", Count= 6 },
            new { Title= "State wise International Airport count in South America", State= "Peru", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Venezuela", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Bolivia", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Paraguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Uruguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Falkland Islands", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "French Guiana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Guyana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Suriname", Count= 1 },
        };
    }

Treemap Sample

Add labels

Labels are added to show additional information of the items in tree map. By default, the visibility of the label is set to true. This can be customized using the showLabels property in leafItemSettings.

<div class="control-section">
    <EjsTreeMap ID="Layout" LegendSettings="@legendSettings" WeightValuePath="Count"
    EqualColorValuePath = "Count" Height="350px" DataSource=@datasource
    LeafItemSettings="@leaf"></EjsTreeMap>
</div>
@functions{
    public object legendSettings { get; set; } = new
    {
        visible= true ,
        position = "Top",
        shape = "Rectangle"
    };
    public object leaf { get; set; } = new
    {
        labelPath = "State",
        showLabels = true,
        labelPosition = "Center",
            labelStyle = new {
                color = "white"
            },
            colorMapping = new object[] {
                new {
                    value = 25,
                    color = "#634D6F"
                },
                new {
                    value = 12,
                    color = "#B34D6D"
                },
                new {
                    value = 9,
                    color = "#557C5C"
                },
                new {
                    value = 7,
                    color = "#44537F"
                },
                new {
                    value = 6,
                    color =  "#637392"
                },
                new {
                    value = 3,
                    color = "#7C754D"
                },
                new {
                    value = 2,
                    color = "#2E7A64"
                },
                new {
                    value = 1,
                    color = "#95659A"
                },
            }
    };
    public List<object> datasource { get; set; } = new List<object> {
            new { Title= "State wise International Airport count in South America", State= "Brazil", Count= 25 },
            new { Title= "State wise International Airport count in South America", State= "Colombia", Count= 12 },
            new { Title= "State wise International Airport count in South America", State= "Argentina", Count= 9 },
            new { Title= "State wise International Airport count in South America", State= "Ecuador", Count= 7 },
            new { Title= "State wise International Airport count in South America", State= "Chile", Count= 6 },
            new { Title= "State wise International Airport count in South America", State= "Peru", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Venezuela", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Bolivia", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Paraguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Uruguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Falkland Islands", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "French Guiana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Guyana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Suriname", Count= 1 },
        };
    }

Treemap Sample

Enable tooltip

Tooltips are used when labels cannot display information due to space constraints. Tooltips can be enabled by setting the visible property to true in tooltipSettings object.

<div class="control-section">
    <EjsTreeMap ID="Layout" TooltipSettings="@tooltip" LegendSettings="@legendSettings" WeightValuePath="Count" EqualColorValuePath = "Count" Height="350px"
    DataSource=@datasource LeafItemSettings="@leaf"></EjsTreeMap>
</div>
@functions{
    public object tooltip { get; set; } = new {
            visible = true,
        };
    public object legendSettings { get; set; } = new
    {
        visible= true ,
        position = "Top",
        shape = "Rectangle"
    };
    public object leaf { get; set; } = new
    {
        labelPath = "State",
        showLabels = true,
        labelPosition = "Center",
            labelStyle = new {
                color = "white"
            },
            colorMapping = new object[] {
                new {
                    value = 25,
                    color = "#634D6F"
                },
                new {
                    value = 12,
                    color = "#B34D6D"
                },
                new {
                    value = 9,
                    color = "#557C5C"
                },
                new {
                    value = 7,
                    color = "#44537F"
                },
                new {
                    value = 6,
                    color =  "#637392"
                },
                new {
                    value = 3,
                    color = "#7C754D"
                },
                new {
                    value = 2,
                    color = "#2E7A64"
                },
                new {
                    value = 1,
                    color = "#95659A"
                },
            }
    };
    public List<object> datasource { get; set; } = new List<object> {
            new { Title= "State wise International Airport count in South America", State= "Brazil", Count= 25 },
            new { Title= "State wise International Airport count in South America", State= "Colombia", Count= 12 },
            new { Title= "State wise International Airport count in South America", State= "Argentina", Count= 9 },
            new { Title= "State wise International Airport count in South America", State= "Ecuador", Count= 7 },
            new { Title= "State wise International Airport count in South America", State= "Chile", Count= 6 },
            new { Title= "State wise International Airport count in South America", State= "Peru", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Venezuela", Count= 3 },
            new { Title= "State wise International Airport count in South America", State= "Bolivia", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Paraguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Uruguay", Count= 2 },
            new { Title= "State wise International Airport count in South America", State= "Falkland Islands", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "French Guiana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Guyana", Count= 1 },
            new { Title= "State wise International Airport count in South America", State= "Suriname", Count= 1 },
        };
    }

Treemap Sample