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

    <EjsSmithchart ID="smithchart" Title="@title" Series="@points" LegendSettings="@legendSettings">
    </EjsSmithchart>

    @functions{
    public object title { get; set; } = new
        {
            visible = true,
            text = "Transmission details"
        };
        public object legendSettings { get; set; } = new
        {
            visible = true,
            shape = "Circle"
        };

        public List<object> points { get; set; } = new List<object> {
            new {   name= "Transmission1",
                enableAnimation = true,
                tooltip= new{ visible= true },
                marker= new {shape= "Circle",border= new { width= 2 }, visible= true },
                points = new List<object>{
                    new { resistance= 10, reactance= 25 }, new { resistance= 8, reactance= 6 },
                    new { resistance= 6, reactance= 4.5 }, new { resistance= 4.5, reactance= 2 },
                    new { resistance= 3.5, reactance= 1.6 }, new { resistance= 2.5, reactance= 1.3 },
                    new { resistance= 2, reactance= 1.2 }, new { resistance= 1.5, reactance= 1 },
                    new { resistance= 1, reactance= 0.8 }, new { resistance= 0.5, reactance= 0.4 },
                    new { resistance= 0.3, reactance= 0.2 }, new { resistance= 0.001, reactance= 0.15 },
                }
            },
            new {   name= "Transmission2",
                enableAnimation = true,
                tooltip= new{ visible= true },
                marker= new {shape= "Circle",border= new { width= 2 }, visible= true },
                points = new List<object>{
                    new { resistance= 20, reactance= -50 }, new { resistance= 10, reactance= -10 },
                    new { resistance= 9, reactance= -4.5 }, new { resistance= 8, reactance= -3.5 },
                    new { resistance= 7, reactance= -2.5 }, new { resistance= 6, reactance= -1.5 },
                    new { resistance= 5, reactance= -1 }, new { resistance= 4.5, reactance= -0.5 },
                    new { resistance= 2, reactance= 0.5 }, new { resistance= 1.5, reactance= 0.4 },
                    new { resistance= 1, reactance= 0.4 }, new { resistance= 0.5, reactance= 0.2 },
                    new { resistance= 0.3, reactance= 0.1 }, new { resistance= 0.001, reactance= 0.05 },
                }
            }
        };
    }
  1. Run the application. The Essential JS 2 smith chart component will render in the web browser.

    Smith chart Sample

Add Series to Smithchart

Smithchart had two type of specification for adding series. You can use either points or datasource in the series. Points and datasource both should be array of object which should contain the field names resistance and reactance.

Below sample demonstrate adding two series to smithchart both ways.

  • First series Transmission1 shows dataSource bound series.
  • Second series Transmission2 shows points bound series.
<div>
    <EjsSmithchart ID="smithchart" Series="@points">
    </EjsSmithchart>
</div>

@functions{
        public List<object> points { get; set; } = new List<object> {
            new {
                 name = "Transmission1",
                reactance = "reactance", resistance = "resistance",
                dataSource = new List<object>{
                 new { resistance= 10, reactance= 25 }, new { resistance= 8, reactance= 6 },
                    new { resistance= 6, reactance= 4.5 }, new { resistance= 4.5, reactance= 2 },
                    new { resistance= 3.5, reactance= 1.6 }, new { resistance= 2.5, reactance= 1.3 },
                    new { resistance= 2, reactance= 1.2 }, new { resistance= 1.5, reactance= 1 },
                    new { resistance= 1, reactance= 0.8 }, new { resistance= 0.5, reactance= 0.4 },
                    new { resistance= 0.3, reactance= 0.2 }, new { resistance= 0.001, reactance= 0.15 },
                }
            },
            new {
                 name = "Transmission2",
                points = new List<object>{
                    new { resistance= 20, reactance= -50 }, new { resistance= 10, reactance= -10 },
                    new { resistance= 9, reactance= -4.5 }, new { resistance= 8, reactance= -3.5 },
                    new { resistance= 7, reactance= -2.5 }, new { resistance= 6, reactance= -1.5 },
                    new { resistance= 5, reactance= -1 }, new { resistance= 4.5, reactance= -0.5 },
                    new { resistance= 2, reactance= 0.5 }, new { resistance= 1.5, reactance= 0.4 },
                    new { resistance= 1, reactance= 0.4 }, new { resistance= 0.5, reactance= 0.2 },
                    new { resistance= 0.3, reactance= 0.1 }, new { resistance= 0.001, reactance= 0.05 }
                }
            }
        };
    }

Smith chart Sample

Add title to SmithChart

smithchart title API used to add title for smithchart. In that text API used to set text of the title. API visible used to toggle the title.

<div>
    <EjsSmithchart ID="smithchart" Series="@points" title="@title">
    </EjsSmithchart>
</div>

@functions{
        public List<object> points { get; set; } = new List<object> {
            new {
                 name = "Transmission1",
                points = new List<object>{
                new { resistance= 10, reactance= 25 }, new { resistance= 8, reactance= 6 },
                    new { resistance= 6, reactance= 4.5 }, new { resistance= 4.5, reactance= 2 },
                    new { resistance= 3.5, reactance= 1.6 }, new { resistance= 2.5, reactance= 1.3 },
                    new { resistance= 2, reactance= 1.2 }, new { resistance= 1.5, reactance= 1 },
                    new { resistance= 1, reactance= 0.8 }, new { resistance= 0.5, reactance= 0.4 },
                    new { resistance= 0.3, reactance= 0.2 }, new { resistance= 0.001, reactance= 0.15 },
                }
            },
            new {
                 name = "Transmission2",
                points = new List<object>{
                    new { resistance= 20, reactance= -50 }, new { resistance= 10, reactance= -10 },
                    new { resistance= 9, reactance= -4.5 }, new { resistance= 8, reactance= -3.5 },
                    new { resistance= 7, reactance= -2.5 }, new { resistance= 6, reactance= -1.5 },
                    new { resistance= 5, reactance= -1 }, new { resistance= 4.5, reactance= -0.5 },
                    new { resistance= 2, reactance= 0.5 }, new { resistance= 1.5, reactance= 0.4 },
                    new { resistance= 1, reactance= 0.4 }, new { resistance= 0.5, reactance= 0.2 },
                    new { resistance= 0.3, reactance= 0.1 }, new { resistance= 0.001, reactance= 0.05 }
                }
            }
        };
        object title = new { text = "Transmission lines applied for both impedance and admittance"};
    }

Smith chart Sample

Enable Marker to Smithchart

To use series marker and it’s customization in smithchart, use series marker. To display marker for particular series, need to specify marker visible as true. Below sample marker enabled for first series only.

<div>
    <EjsSmithchart ID="smithchart" Series="@points">
    </EjsSmithchart>
</div>

@functions{
        public List<object> points { get; set; } = new List<object> {
            new {
                 name = "Transmission1",
                marker = new {
                    visible = true
                },
                points = new List<object>{
                new { resistance= 10, reactance= 25 }, new { resistance= 8, reactance= 6 },
                    new { resistance= 6, reactance= 4.5 }, new { resistance= 4.5, reactance= 2 },
                    new { resistance= 3.5, reactance= 1.6 }, new { resistance= 2.5, reactance= 1.3 },
                    new { resistance= 2, reactance= 1.2 }, new { resistance= 1.5, reactance= 1 },
                    new { resistance= 1, reactance= 0.8 }, new { resistance= 0.5, reactance= 0.4 },
                    new { resistance= 0.3, reactance= 0.2 }, new { resistance= 0.001, reactance= 0.15 },
                }
            },
            new {
                 name = "Transmission2",
                points = new List<object>{
                    new { resistance= 20, reactance= -50 }, new { resistance= 10, reactance= -10 },
                    new { resistance= 9, reactance= -4.5 }, new { resistance= 8, reactance= -3.5 },
                    new { resistance= 7, reactance= -2.5 }, new { resistance= 6, reactance= -1.5 },
                    new { resistance= 5, reactance= -1 }, new { resistance= 4.5, reactance= -0.5 },
                    new { resistance= 2, reactance= 0.5 }, new { resistance= 1.5, reactance= 0.4 },
                    new { resistance= 1, reactance= 0.4 }, new { resistance= 0.5, reactance= 0.2 },
                    new { resistance= 0.3, reactance= 0.1 }, new { resistance= 0.001, reactance= 0.05 }
                }
            }
        };
    }

Smith chart Sample

Enable DataLabel to Smithchart Marker

To use marker dataLabel and it’s customization in smithchart, use marker dataLabel. To display dataLabel for particular series marker, need to specify dataLabel visible as true in that series marker. Below sample dataLabel enabled for first series.

<div>
    <EjsSmithchart ID="smithchart" Series="@points">
    </EjsSmithchart>
</div>

@functions{
        public List<object> points { get; set; } = new List<object> {
            new {
                 name = "Transmission1",
                marker = new {
                visible = true,
                    dataLabel = new {
                        visible = true
                    }
                },
               points = new List<object>{
                 new { resistance= 10, reactance= 25 }, new { resistance= 8, reactance= 6 },
                    new { resistance= 6, reactance= 4.5 }, new { resistance= 4.5, reactance= 2 },
                    new { resistance= 3.5, reactance= 1.6 }, new { resistance= 2.5, reactance= 1.3 },
                    new { resistance= 2, reactance= 1.2 }, new { resistance= 1.5, reactance= 1 },
                    new { resistance= 1, reactance= 0.8 }, new { resistance= 0.5, reactance= 0.4 },
                    new { resistance= 0.3, reactance= 0.2 }, new { resistance= 0.001, reactance= 0.15 },
                }
            },
            new {
                name = "Transmission2",
                tooltip = new {
                    visible = true
                },
                points = new List<object>{
                    new { resistance= 20, reactance= -50 }, new { resistance= 10, reactance= -10 },
                    new { resistance= 9, reactance= -4.5 }, new { resistance= 8, reactance= -3.5 },
                    new { resistance= 7, reactance= -2.5 }, new { resistance= 6, reactance= -1.5 },
                    new { resistance= 5, reactance= -1 }, new { resistance= 4.5, reactance= -0.5 },
                    new { resistance= 2, reactance= 0.5 }, new { resistance= 1.5, reactance= 0.4 },
                    new { resistance= 1, reactance= 0.4 }, new { resistance= 0.5, reactance= 0.2 },
                    new { resistance= 0.3, reactance= 0.1 }, new { resistance= 0.001, reactance= 0.05 }
                }
            }
        };
    }

Smith chart Sample

Enable Legend for Smithchart

Smithchart had a legend feature, which is used to denote the correspond series. To enable the legend, set smithchart legendSettings visible as true. Following example sample shows enabling legend for smithchart. Series name can customize using series name.

<div>
    <EjsSmithchart ID="smithchart" Series="@points" LegendSettings="@legend">
    </EjsSmithchart>
</div>

@functions{
        public List<object> points { get; set; } = new List<object> {
            new {
                 name = "Transmission1",
                 reactance= "reactance", resistance = "resistance",
                marker = new {
                visible = true,
                    dataLabel = new {
                        visible = true
                    }
                },
                tooltip = new {
                    visible = true
                },
                points = new List<object>{
                 new { resistance= 10, reactance= 25 }, new { resistance= 8, reactance= 6 },
                    new { resistance= 6, reactance= 4.5 }, new { resistance= 4.5, reactance= 2 },
                    new { resistance= 3.5, reactance= 1.6 }, new { resistance= 2.5, reactance= 1.3 },
                    new { resistance= 2, reactance= 1.2 }, new { resistance= 1.5, reactance= 1 },
                    new { resistance= 1, reactance= 0.8 }, new { resistance= 0.5, reactance= 0.4 },
                    new { resistance= 0.3, reactance= 0.2 }, new { resistance= 0.001, reactance= 0.15 },
                }
            },
            new {
                 name = "Transmission2",
                tooltip = new {
                    visible = true
                },
                points = new List<object>{
                    new { resistance= 20, reactance= -50 }, new { resistance= 10, reactance= -10 },
                    new { resistance= 9, reactance= -4.5 }, new { resistance= 8, reactance= -3.5 },
                    new { resistance= 7, reactance= -2.5 }, new { resistance= 6, reactance= -1.5 },
                    new { resistance= 5, reactance= -1 }, new { resistance= 4.5, reactance= -0.5 },
                    new { resistance= 2, reactance= 0.5 }, new { resistance= 1.5, reactance= 0.4 },
                    new { resistance= 1, reactance= 0.4 }, new { resistance= 0.5, reactance= 0.2 },
                    new { resistance= 0.3, reactance= 0.1 }, new { resistance= 0.001, reactance= 0.05 }
                }
            }
        };
        public object legend { get; set; } = new {
            visible = true
        };
    }

Smith chart Sample

Enable Tooltip for Smithchart Series

Smithchart had a tooltip feature, which is used to show the current point’s values. To enable the tooltip, smithchart series tooltip visible as true. Following example sample shows enabling tooltip for smithchart series collection.

<div>
    <EjsSmithchart ID="smithchart" Series="@points">
    </EjsSmithchart>
</div>

@functions{
        public List<object> points { get; set; } = new List<object> {
            new {
                 name = "Transmission1",
                 reactance= "reactance", resistance = "resistance",
                marker = new {
                visible = true,
                    dataLabel = new {
                        visible = true
                    }
                },
                tooltip = new {
                    visible = true
                },
                points = new List<object>{
                 new { resistance= 10, reactance= 25 }, new { resistance= 8, reactance= 6 },
                    new { resistance= 6, reactance= 4.5 }, new { resistance= 4.5, reactance= 2 },
                    new { resistance= 3.5, reactance= 1.6 }, new { resistance= 2.5, reactance= 1.3 },
                    new { resistance= 2, reactance= 1.2 }, new { resistance= 1.5, reactance= 1 },
                    new { resistance= 1, reactance= 0.8 }, new { resistance= 0.5, reactance= 0.4 },
                    new { resistance= 0.3, reactance= 0.2 }, new { resistance= 0.001, reactance= 0.15 },
                }
            },
            new {
                 name = "Transmission2",
                tooltip = {
                    visible = true
                },
                points = new List<object>{
                    new { resistance= 20, reactance= -50 }, new { resistance= 10, reactance= -10 },
                    new { resistance= 9, reactance= -4.5 }, new { resistance= 8, reactance= -3.5 },
                    new { resistance= 7, reactance= -2.5 }, new { resistance= 6, reactance= -1.5 },
                    new { resistance= 5, reactance= -1 }, new { resistance= 4.5, reactance= -0.5 },
                    new { resistance= 2, reactance= 0.5 }, new { resistance= 1.5, reactance= 0.4 },
                    new { resistance= 1, reactance= 0.4 }, new { resistance= 0.5, reactance= 0.2 },
                    new { resistance= 0.3, reactance= 0.1 }, new { resistance= 0.001, reactance= 0.05 }
                }
            }
        };
    }

Smith chart Sample