ASP.NET Core Blazor [Preview]
Search results

Getting Started with Essential JS 2 for ASP.NET Core Razor Diagram 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 Diagram 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 from VS 2019

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

new project in aspnetcore razor

Step 2: Configure your new project in ASP.NET Core WebApplication and give your Project name.

configure project

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

select framework in top

Step 4: Choose the Razor components template and then click Create.

select framework

Adding Syncfusion packages

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 ~/Components/_Imports.cshtml file and import the Syncfusion.EJ2.RazorComponents.

    @addTagHelper *, Syncfusion.EJ2.RazorComponents

Adding Scripts and CSS reference

You can add the client-side resources through CDN in the <head> element of the ~/Pages/Index.razor page.

@* Syncfusion Essential JS 2 Styles *@
<link href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" />

@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ejs.interop.min.js"></script>

Initialize the Diagram component

component can be rendered by using the EjsDiagram tag helper in ASP.NET Core Razor application. To initialize the Diagram component add the below code to your Index.razor view page which is present under ~/Components/Pages folder.

<EjsDiagram id="diagram"></EjsDiagram>

Running the above code will display the empty Diagram on the browser.

Adding Nodes and Connectors

Let us create and add a nodes with specific position, size, label and shape. Connect two or more nodes by using a connectors.

@using Syncfusion.EJ2.RazorComponents.Diagrams


<EjsDiagram id="diagram" Width="100%" Height="690px" Nodes="@nodes" Connectors="@connectors">
</EjsDiagram>

@functions{
    private List<object> nodes { get; set; } = new List<object>
    {
        new {
            id= "NewIdea", height= 60, width = 145, offsetX= 400 - 50, offsetY= 80,style = new { fill= "#357BD2", strokeColor= "white" },
            shape= new { type= "Flow", shape= "Terminator" }, annotations= new List < object >
            {
                new {
                 content = "Place Order" , style=  new { color= "white", fill= "transparent" }
                }
            }
        },
            new  {
            id= "Meeting", height= 60, width = 145, offsetX= 400 - 50, offsetY= 160,style = new { fill= "#357BD2", strokeColor= "white" },
            shape= new { type= "Flow", shape= "Process" }, annotations=  new List < object >
            {
                new {
                 content = "Start Transaction", style=  new { color= "white", fill= "transparent" }
                }
            }
        },
    };

    private List<object> connectors { get; set; } = new List<object>
    {
        new { id= "connector1", sourceID= "NewIdea", targetID= "Meeting" }
    };
}

Adding Symbol Palette

The SymbolPalette displays a collection of palettes. The Palette shows a set of nodes and connectors. It allows you to drag and drop the nodes and connectors into the Diagram.

@using Syncfusion.EJ2.RazorComponents.Diagrams


<EjsSymbolPalette id="palettes" Width="100%" Height="700px" SymbolHeight=60 SymbolWidth=60 Palettes="@palette"></EjsSymbolPalette>

@functions{

 public static object getFlowShape(string id, string shapeType)
  {
      return new { id = id, shape = new { type = "Flow", shape = shapeType } };
  }

  private List<object> palette { get; set; } = new List<object> {
      new {
          id ="flow", expanded= true,
          symbols =  new List < object >
              {
                  getFlowShape("Terminator", "Terminator"),
                  getFlowShape("Process", "Process"),
                  getFlowShape("Decision", "Decision"),
              },
          iconCss = "e-ddb-icons e-flow", title= "Flow Shapes"
      },
      new {
          id = "connectors", expanded= true,
          symbols = new List < object > {
          new {
              id= "Link1",
              type = "Orthogonal",
              sourcePoint =new { x= 0, y= 0 },
              targetPoint = new { x= 60, y= 60 },
              targetDecorator= new { shape= "Arrow" },
              style = new { strokeWidth= 1 }
              }
          }
       }
   };
};