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

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

    new project in aspnetcore razor

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

    select framework

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

Importing Essential JS 2 Razor components in the application

  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

  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

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

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

    @using Syncfusion.EJ2.RazorComponents
    @using Syncfusion.EJ2.RazorComponents.Maps
  5. Add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.

    import cdn

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

<div>
    <EjsMaps ID="Layout" Layers="@layers"></EjsMaps>
</div>

@functions{

   
   

    public List<object> layers { get; set; } = new List<object>
    {
        new{ shapeData= new{
                async= true,
                dataOptions= "scripts/map-data/world-map.json",
                type= "GET"
            },
                shapePropertyPath= "continent",
                shapeDataPath= "continent"                                                  
    }
    };
    
}
  1. After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

Maps Sample

Bind data source to map

The following properties in layers are used for binding data source to map.

  • [dataSource]
  • [shapeDataPath]
  • [shapePropertyPath]

The [dataSource] property takes collection value as input. For example, the list of objects can be provided as input. This data is further used in tooltip, data label, bubble, legend and in color mapping.

The [shapeDataPath] property used to refer the data ID in dataSource. Where as, the [shapePropertyPath] property is used to refer the column name in shapeData to identify the shape. Both the properties are related to each other. When the values of the shapeDataPath property in the dataSource property and the value of shapePropertyPath in the shapeData property match, then the associated object from the dataSource is bound to the corresponding shape.

<div>
    <EjsMaps ID="Layout" Layers="@layers"></EjsMaps>
</div>

@functions {
    public List<object> layers { get; set; } = new List<object>
    {
        new{ shapeData= new{
            dataOptions= "scripts/map-data/world-map.json",
            type= "GET"
        },
            dataSource = new object[] {
                new {  Country= "China", Membership= "Permanent"},
                new { Country= "France",Membership= "Permanent" },
                new { Country= "Russia",Membership= "Permanent"},
                new { Country= "Kazakhstan",Membership= "Non-Permanent"},
                new { Country= "Poland",Membership= "Non-Permanent"},
                new { Country= "Sweden",Membership= "Non-Permanent"}
            },
            shapeDataPath = "Country",
            shapePropertyPath= "name"
        }
    };
}

Maps Sample

Apply Color Mapping

The Color Mapping feature supports customization of shape colors based on the underlying value of shape received from bounded data. Specify the field name from which the values have to be compared for the shapes in [colorValuePath] property in [shapeSettings].

Specify color and value in [colorMapping] property. Here ‘#D84444’ is specified for ‘Trump’ and ‘#316DB5’ is specified for ‘Clinton’.

<div>
    <EjsMaps ID="Layout" Layers="@layers"></EjsMaps>
</div>

@functions {
        public List<object> layers { get; set; } = new List<object>
        {
             new{ shapeData= new{
                dataOptions= "scripts/map-data/world-map.json",
                type= "GET"
             },
             layerType = "Geometry",
             dataSource = new object[] {
               new {  Country= "China", Membership= "Permanent"},
                new { Country= "France",Membership= "Permanent" },
                new { Country= "Russia",Membership= "Permanent"},
                new { Country= "Kazakhstan",Membership= "Non-Permanent"},
                new { Country= "Poland",Membership= "Non-Permanent"},
                new { Country= "Sweden",Membership= "Non-Permanent"}
             },
             shapeDataPath = "Country",
             shapePropertyPath = "name",
             shapeSettings = new {
                 fill = "#E5E5E5",
                 colorMapping = new List<object> {
                        new {
                             value = "Permanent", color = "#D84444"
                        },
                        new {
                            value = "Non-Permanent", color = "#316DB5"
                        }
                 },
                colorValuePath = "Membership"
            },
        }
    };
}

Maps Sample

Add Title for Maps

You can add a title using [titleSettings] property to the map to provide quick information to the user about the shapes rendered in the map.

<div>
     <EjsMaps ID="Layout" Layers="@layers" TitleSettings="@title"></EjsMaps>
</div>

@functions {
        public List<object> layers { get; set; } = new List<object>
        {
             new{ shapeData= new{
                dataOptions= "scripts/map-data/world-map.json",
                type= "GET"
             },
             dataSource = new object[] {
               new {  Country= "China", Membership= "Permanent"},
                new { Country= "France",Membership= "Permanent" },
                new { Country= "Russia",Membership= "Permanent"},
                new { Country= "Kazakhstan",Membership= "Non-Permanent"},
                new { Country= "Poland",Membership= "Non-Permanent"},
                new { Country= "Sweden",Membership= "Non-Permanent"}
             },
             shapeDataPath = "Country",
             shapePropertyPath= "name",
             shapeSettings = new {
                 colorMapping = new List<object> {
                        new {
                             value = "Permanent", color = "#D84444"
                        },
                        new {
                            value = "Non-Permanent", color = "#316DB5"
                        }
                 },
                colorValuePath = "Membership"
            },
        }
    };
    public object title { get; set; } = new {
        text = "USA Election Results - 2016"
    };
}

Maps Sample

Enable Legend

You can show legend for the maps by setting true to the [visible] property in [legendSettings] object.

<div>
     <EjsMaps ID="Layout" Layers="@layers" LegendSettings="@legend"></EjsMaps>
</div>
@functions {
    public List<object> layers { get; set; } = new List<object>
            {
                new{ shapeData= new{
                    dataOptions= "scripts/map-data/world-map.json",
                    type= "GET"
                    },
                    shapeDataPath = "Country",
                    shapePropertyPath = "name",
                    dataSource = new object[] {
                            new { Country= "China", Membership= "Permanent"},
                            new { Country= "France",Membership= "Permanent" },
                            new { Country= "Russia",Membership= "Permanent"},
                            new { Country= "Kazakhstan",Membership= "Non-Permanent"},
                            new { Country= "Poland",Membership= "Non-Permanent"},
                            new { Country= "Sweden",Membership= "Non-Permanent"}
                        },
                    shapeSettings =  new {
                        colorValuePath = "Membership",
                        
                        colorMapping = new object[] {
                        new {
                           value = "Permanent", color = "#D84444"
                        },
                        new {
                           value = "Non-Permanent", color = "#316DB5"
                        }
                    }
                }
            }
        };
        public object legend { get; set; } = new {
            visible = true            
        };
    }

Maps Sample

Add Data Label

You can add data labels to show additional information of the shapes in map. This can be achieved by setting [visible] property to true in the [dataLabelSettings] object.

<div>
     <EjsMaps ID="Layout" Layers="@layers"></EjsMaps>
</div>

@functions {
        public List<object> layers { get; set; } = new List<object>
        {
             new{ shapeData= new{
                    dataOptions= "scripts/map-data/world-map.json",
                    type= "GET"
                },
             shapeSettings = new {
                 autofill = true
            },
            dataLabelSettings = new {
                visible = true,
                labelPath = "name",
                smartLabelMode = "Trim"
            }
        }
    };
}

Maps Sample

Enable Tooltip

The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [visible] property as true in [tooltipSettings] object.

<div>
     <EjsMaps ID="Layout" Layers="@layers"></EjsMaps>
</div>

@functions {
        public List<object> layers { get; set; } = new List<object>
        {
             new{ shapeData= new{
                    dataOptions= "scripts/map-data/world-map.json",
                    type= "GET"
            },
             shapeSettings = new {
                 autofill = true
            },
            dataLabelSettings = new {
                visible = true,
                labelPath = "name",
                smartLabelMode = "Trim"
            },
            tooltipSettings =  new {
                visible = true,
                valuePath = "name"
            }
        }
    };
}

Maps Sample