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 AccumulationChart Components in 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 in .NET Core CLI

  1. Add blazor project template using below command.

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview5-19227-01
  2. Once project template installed run the following command to create blazor template.

    dotnet new blazor -o WebApplication1
    cd WebApplication1
  3. Now, add the Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package to the new application using below command

    dotnet add package Syncfusion.EJ2.AspNet.Core.RazorComponents
    dotnet restore
  4. The Essential JS 2 package will be included in the project, after the installation process is completed.

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

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

    <head>
        <environment include="Development">
            <link href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" />
            <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
        </environment>
    </head>

    import cdn

Create a Razor application from VS 2019

  1. Add blazor project template using Blazor Language Services extension.

    (or)

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview5-19227-01
  2. Choose File > New > Project… in the Visual Studio menu bar.

    new project in aspnetcore razor

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

    select framework

  4. Choose the Blazor template and change the application name, and then click OK.

Note: ASP.NET Core 3.0 available in Visual Studio 2019 preview version.

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.Charts
  5. Add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.

    <head>
       <environment include="Development">
           <link href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" />
           <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
       </environment>
    </head>

    import cdn

Initialize the AccumulationChart component

component can be rendered by using the EjsAccumulationChart tag helper in ASP.NET Core Razor application. Add the below simple code to your **~/Pages/Index.razor** page, to initialize the AccumulationChart.

<EjsAccumulationChart id="AccumulationChart"></EjsAccumulationChart>

Pie Series

By default, the pie series will be rendered when assigning the data to the series using the dataSource property. Map the field names in the data to the xName and yName properties of the series.

[Index.razor]

@page "/"

   <EjsAccumulationChart id="container">
        <AccumulationSeries>
            <AccumulationChartAccumulationSeries dataSource="@dataSource" xName="xValue" yName="yValue" name="Browser">
            </AccumulationChartAccumulationSeries>
        </AccumulationSeries>
    </EjsAccumulationChart>

@functions{
    public class PieData1
    {
        public string xValue;
        public double yValue;
    }

    public object dataSource =  new List < object > {

        new PieData1 { xValue = "Argentina", yValue = 505370},
        new PieData1 { xValue = "Belgium",    yValue = 551500 },
        new PieData1 { xValue = "Cuba",  yValue = 312685 },
        new PieData1 { xValue = "Dominican Republic", yValue = 350000 },
        new PieData1 { xValue = "Egypt", yValue = 301000 },
        new PieData1 { xValue = "Kazakhstan", yValue = 300000 },
        new PieData1 { xValue = "Somalia",  yValue = 357022 }

    };
}

pie chart