ASP.NET Core Blazor [Preview]
Search results

Getting Started with Essential JS 2 for ASP.NET Core Razor 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 web application using the Visual Studio 2019.

Prerequisites

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

Create a Razor application from VS 2019

  1. Add Razor project template using Razor Language Services extension.

    (or)

    dotnet new -i Microsoft.AspNetCore.Razor.Templates::0.8.0-preview-19104-04
  2. Choose File > New > Project… in the Visual Studio menu bar.

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

  4. 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.Sparklines
  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 Sparkline component is added in the ~/Pages/Index.cshtml page.

<div>
    <EjsSparkline ID="spark1" XName="x" YName="yval" DataSource=@data1
    Type="@SparklineType.Line" Height="200px" Width="200px" Fill="#3C78EF"
    Linewidth="1" TooltipSettings="@tooltip1" MarkerSettings="@marker">
    </EjsSparkline>
</div>

@functions{
        public List<object> data1 { get; set; } = new List<object> {
            new{ x= 1, yval= 5 },
            new{ x= 2, yval= 6 },
            new{ x= 3, yval= 5 },
            new{ x= 4, yval= 7 },
            new{ x= 5, yval= 4 },
            new{ x= 6, yval= 3 },
            new{ x= 7, yval= 9 },
            new{ x= 8, yval= 5 },
            new{ x= 9, yval= 6 },
            new{ x= 10, yval= 5 },
            new{ x= 11, yval= 7 },
            new{ x= 12, yval= 8 },
            new{ x= 13, yval= 4 },
            new{ x= 14, yval= 5 },
            new{ x= 15, yval= 3 },
            new{ x= 16, yval= 4 },
            new{ x= 17, yval= 11 },
            new{ x= 18, yval= 10 },
            new{ x= 19, yval= 2 },
            new{ x= 20, yval= 12 },
            new{ x= 21, yval= 4 },
            new{ x= 22, yval= 7 },
            new{ x= 23, yval= 6 },
            new{ x= 24, yval= 8 }
        };
        public object tooltip1 { get; set; } = new
        {
            visible = true,
            format = "${x} : ${yval}",
            trackLineSettings = new
            {
                visible = true
            }
        };
        public object marker { get; set; } = new
        {
            visible = new List<string> { "All" },
            size = 2.5,
            fill = "blue"
        };
    }
  1. Run the application. The Essential JS 2 Sparkline component will render in the web browser.

    Sparkline Sample

Bind data source to sparkline

The dataSource property is used for binding data source to the sparkline. This property takes the collection value as input. For example, a list of objects can be provided as input.

<div>
    <EjsSparkline ID="spark1" DataSource="@data1"
    XName="xval" YName="yval" Height="200px" Width="70%">
    </EjsSparkline>
</div>

@functions{
        public List<object> data1 { get; set; } = new List<object> {
            new { x= 0, xval= "2005", yval= 20090440 },
            new { x= 1, xval= "2006", yval= 20264080 },
            new { x= 2, xval= "2007", yval= 20434180 },
            new { x= 3, xval= "2008", yval= 21007310 },
            new { x= 4, xval= "2009", yval= 21262640 },
            new { x= 5, xval= "2010", yval= 21515750 },
            new { x= 6, xval= "2011", yval= 21766710 },
            new { x= 7, xval= "2012", yval= 22015580 },
            new { x= 8, xval= "2013", yval= 22262500 },
            new { x= 9, xval= "2014", yval= 22507620 },
        };
    }

Sparkline Sample

Change the type of sparkline

You can change the sparkline type by setting the type property to Line, Column, WinLoss, Pie, or Area. Here, the sparkline type has been set to area.

<div>
    <EjsSparkline ID="spark1" DataSource="@data1" Type="@SparklineType.Area"
    XName="xval" YName="yval" Height="200px" Width="70%">
    </EjsSparkline>
</div>

@functions{
        public List<object> data1 { get; set; } = new List<object> {
            new { x= 0, xval= "2005", yval= 20090440 },
            new { x= 1, xval= "2006", yval= 20264080 },
            new { x= 2, xval= "2007", yval= 20434180 },
            new { x= 3, xval= "2008", yval= 21007310 },
            new { x= 4, xval= "2009", yval= 21262640 },
            new { x= 5, xval= "2010", yval= 21515750 },
            new { x= 6, xval= "2011", yval= 21766710 },
            new { x= 7, xval= "2012", yval= 22015580 },
            new { x= 8, xval= "2013", yval= 22262500 },
            new { x= 9, xval= "2014", yval= 22507620 },
        };
    }

Sparkline Sample

Enable tooltip for sparkline

The sparkline displays additional information through tooltip when the mouse is hovered over the sparkline. You can enable tooltip by setting the visible property to true in tooltipSettings.

<div>
    <EjsSparkline ID="spark1" DataSource="@data1" Type="@SparklineType.Area" TooltipSettings="@tooltipSettings" XName="xval" YName="yval"
    Height="200px" Width="70%" >
    </EjsSparkline>
</div>

@functions{
        public List<object> data1 { get; set; } = new List<object> {
            new { x= 0, xval= "2005", yval= 20090440 },
            new { x= 1, xval= "2006", yval= 20264080 },
            new { x= 2, xval= "2007", yval= 20434180 },
            new { x= 3, xval= "2008", yval= 21007310 },
            new { x= 4, xval= "2009", yval= 21262640 },
            new { x= 5, xval= "2010", yval= 21515750 },
            new { x= 6, xval= "2011", yval= 21766710 },
            new { x= 7, xval= "2012", yval= 22015580 },
            new { x= 8, xval= "2013", yval= 22262500 },
            new { x= 9, xval= "2014", yval= 22507620 },
        };
        public object tooltipSettings { get; set; } = new {
            visible = true,
            format = "${xval} : ${yval}"
        };
    }

Sparkline Sample