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.LinearGauges

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

<div class="control-section" >
    <EjsLinearGauge ID="gauge">
    </EjsLinearGauge>
</div>
@functions {};

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

Output be like the below.

Linear Gauge Sample

Add Gauge Title

You can add a title using title property to the linear gauge to provide quick information to the user.

<div class="control-section" >
    <EjsLinearGauge ID="gauge" Width= '90%' Height= '90%'  Title='Linear Gauge'>
    </EjsLinearGauge>
</div>
@functions {};

Linear Gauge Sample

Axis Range

You can set the range to the axis using minimum and maximum properties.

<div class="control-section" >
    <EjsLinearGauge ID="gauge" Width= '90%' Height= '90%' >
        <LinearGaugeAxes>
            <LinearGaugeAxis Minimum =0 Maximum =200  >
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </EjsLinearGauge>
</div>
@functions {};

Linear Gauge Sample

To denote the axis values with temperature units, we can add °C as suffix to each label. This can be achieved by setting the {value}°C to the format property of labelStyle in the axis. Here, {value} acts as a placeholder for each axis label.

You can change the pointer value from the default value of the gauge by settings the value property in pointer option in axis.

<div class="control-section">
    <EjsLinearGauge ID="gauge" Width= '90%' Height= '90%' >
        <LinearGaugeAxes>
            <LinearGaugeAxis Minimum =0 Maximum =200 Ranges='@ranges' LabelStyle='@labelStyle' Pointers="@pointer">
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </EjsLinearGauge>
</div>
@functions {
    public object[] ranges = new object[] {
        new {start= 1, end= 80, startWidth=15, endWidth=15 },
        new {start= 80, end= 120, startWidth=15, endWidth=15},
        new {start= 120, end= 140, startWidth=15, endWidth=15},
        new {start= 140, end= 200, startWidth=15, endWidth=15}
    };
    public object labelStyle= new {
            format= "{value}°C"
    };
    public object[] pointer = new object[] {
        new { value= 140 },
    };
 };

Linear Gauge Sample

Set Pointer Value

You can change the pointer value in the below sample using value property in pointers.

<div class="control-section" >
    <EjsLinearGauge ID="gauge" Width= '90%' Height= '90%' >
        <LinearGaugeAxes>
            <LinearGaugeAxis Pointers='@pointer' >
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </EjsLinearGauge>
</div>
@functions {
    public object[] pointer = new object[] {
        new { value= 40, color= "green" },
    };
 };

Linear Gauge Sample