Getting Started with ASP.NET MVC Diagram Control

9 Dec 202424 minutes to read

This section briefly explains about how to include ASP.NET MVC Diagram control in your ASP.NET MVC application using Visual Studio.

Prerequisites

System requirements for ASP.NET MVC controls

Create ASP.NET MVC application with HTML helper

Install ASP.NET MVC package in the application

To add ASP.NET MVC controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.EJ2.MVC5 and then install it.

Package Manager
Install-Package Syncfusion.EJ2.MVC5 -Version 28.1.33

NOTE

Syncfusion^® ASP.NET MVC controls are available in nuget.org. Refer to NuGet packages topic to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.MVC5 NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion^® license key.

Add namespace

Add Syncfusion.EJ2 namespace reference in Web.config under Views folder.

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

Add stylesheet and script resources

Here, the theme and script is referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

~/_Layout.cshtml
<head>
    ...
    <!-- Syncfusion® ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/28.1.33/fluent.css" />
    <!-- Syncfusion® ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js"></script>
</head>

NOTE

Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET MVC application, and to have the expected appearance for Syncfusion^® ASP.NET MVC controls. Checkout the Adding Script Reference topic to learn different approaches for adding script references in your ASP.NET MVC application.

Register Syncfusion^® script manager

Also, register the script manager EJS().ScriptManager() at the end of <body> in the ~/Pages/Shared/_Layout.cshtml file as follows.

~/_Layout.cshtml
<body>
...
    <!-- Syncfusion® ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Add ASP.NET MVC Diagram control

Now, add the Syncfusion^® ASP.NET MVC Diagram control in ~/Views/Home/Index.cshtml page. You can create and add a node (JSON data) with specific position, size, label, and shape.

CSHTML
Node.cs
@(Html.EJS().Diagram("container")
    .Width("100%")
    .Height("700px")
    .Nodes(ViewBag.nodes).Render())
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: Nodes
        public ActionResult Nodes()
        {
            List<DiagramNode> nodes = new List<DiagramNode>();
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation() { Content = "node1", Style = new DiagramTextStyle() { Color = "White", StrokeColor = "None" } });
            nodes.Add(new Node()
            {
                Id = "node1",
                Width = 100,
                Height = 100,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                text = "node1",
                OffsetX = 100,
                OffsetY = 100,
                Annotations = Node1
            });
            ViewBag.nodes = nodes;


            return View();
        }
    }
    public class Node : DiagramNode
    {
        public string text;
    }
}

ASP.NET MVC Diagram Control

Connect two Nodes with a Connector

Add two node to the diagram as shown in the previous example. Connect these nodes by adding a connector using the connector property and refer the source and target end by using the sourceNode and targetNode properties.

CSHTML
Connector.cs
@(Html.EJS().Diagram("container")
    .Width("100%")
    .Height("580px")
    .Nodes(ViewBag.nodes)
    .Connectors(ViewBag.connectors).Render())
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        // GET: Connector
        public ActionResult Connector()
        {
            List<DiagramNode> Nodes = new List<DiagramNode>();
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation() { Content = "node1" });
            List<DiagramNodeAnnotation> Node2 = new List<DiagramNodeAnnotation>();
            Node2.Add(new DiagramNodeAnnotation() { Content = "node2" });
            List<DiagramNodeAnnotation> Node3 = new List<DiagramNodeAnnotation>();
            Nodes.Add(new DiagramNode()
            {
                Id = "node1",
                Annotations = Node1,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetX= 100,
                OffsetY= 100,
                Width = 100,
                Height = 100

        });
            Nodes.Add(new DiagramNode()
            {
                Id = "node2",
                Annotations = Node2,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetX = 300,
                OffsetY = 100,
                Width = 100,
                Height = 100
            });
            List<DiagramConnector> Connectors = new List<DiagramConnector>();
            Connectors.Add(new DiagramConnector() { Id = "connector", SourceID = "node1", TargetID = "node2", });
            ViewBag.nodes = Nodes;
            ViewBag.connectors = Connectors;
            return View();
        }
    }

}

ASP.NET MVC Diagram with Connector

NOTE

View Sample in GitHub.

Adding default values

Default values for all nodes and connectors can be set using the getNodeDefaults and getConnectorDefaults properties, respectively. For example, if all nodes have the same width and height, such properties can be moved into getNodeDefaults.

For example, if all the nodes have same height and width, we can set such properties as follows.

CSHTML
Defaultvalues.cs
@(Html.EJS().Diagram("container")
    .Width("100%")
    .Height("580px")
    .GetNodeDefaults("getNodeDefaults")
    .GetConnectorDefaults("getConnectorDefaults")
    .Nodes(ViewBag.nodes)
    .Connectors(ViewBag.connectors).Render()

    function getNodeDefaults(obj, diagram) {
            obj.width = 100;
            obj.height = 100;
            obj.OffsetX = 300;
        }

        function getConnectorDefaults(obj, diagram) {
            obj.type = 'Orthogonal';
        }
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        public ActionResult Connector()
        {
            List<DiagramNode> Nodes = new List<DiagramNode>();
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation() { Content = "node1" });
            List<DiagramNodeAnnotation> Node2 = new List<DiagramNodeAnnotation>();
            Node2.Add(new DiagramNodeAnnotation() { Content = "node2" });
            List<DiagramNodeAnnotation> Node3 = new List<DiagramNodeAnnotation>();
            Nodes.Add(new DiagramNode()
            {
                Id = "node1",
                Annotations = Node1,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY= 100,
        });
            Nodes.Add(new DiagramNode()
            {
                Id = "node2",
                Annotations = Node2,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 300,
            });
            List<DiagramConnector> Connectors = new List<DiagramConnector>();
            Connectors.Add(new DiagramConnector() { Id = "connector", SourceID = "node1", TargetID = "node2", });
            ViewBag.nodes = Nodes;
            ViewBag.connectors = Connectors;
            return View();
        }
    }

}

Flow Diagram

Similarly, the required nodes and connectors can be added to form a complete flow diagram.

CSHTML
Flowchart.cs
@(Html.EJS().Diagram("container")
    .Width("100%")
    .Height("580px")
    .GetNodeDefaults("getNodeDefaults")
    .GetConnectorDefaults("getConnectorDefaults")
    .Nodes(ViewBag.nodes)
    .Connectors(ViewBag.connectors).Render()


function getNodeDefaults(obj, diagram) {
            obj.width = 100;
            obj.height = 60;
            obj.offsetX = 300;
        }
 function getConnectorDefaults(obj, diagram) {
            obj.type = 'Orthogonal';
        }
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        public ActionResult Connector()
        {
            List<DiagramNode> Nodes = new List<DiagramNode>();
            List<DiagramNodeAnnotation> Node1 = new List<DiagramNodeAnnotation>();
            Node1.Add(new DiagramNodeAnnotation() { Content = "node1" });
            List<DiagramNodeAnnotation> Node2 = new List<DiagramNodeAnnotation>();
            Node2.Add(new DiagramNodeAnnotation() { Content = "node2" });
            List<DiagramNodeAnnotation> Node3 = new List<DiagramNodeAnnotation>();
            Node3.Add(new DiagramNodeAnnotation() { Content = "i < 10?" });
            List<DiagramNodeAnnotation> Node4 = new List<DiagramNodeAnnotation>();
            Node4.Add(new DiagramNodeAnnotation() { Content = "print(hello!!)", Style = new DiagramTextStyle() { Fill = "White" } });
            List<DiagramNodeAnnotation> Node5 = new List<DiagramNodeAnnotation>();
            Node5.Add(new DiagramNodeAnnotation() { Content = "i++;" });
            List<DiagramNodeAnnotation> Node6 = new List<DiagramNodeAnnotation>();
            Node6.Add(new DiagramNodeAnnotation() { Content = "End" });
            List<DiagramConnectorAnnotation> connector1 = new List<DiagramConnectorAnnotation>();
            connector1.Add(new DiagramConnectorAnnotation() { Content = "Yes" });
            List<DiagramConnectorAnnotation> connector2 = new List<DiagramConnectorAnnotation>();
            connector2.Add(new DiagramConnectorAnnotation() { Content = "No" });
            Nodes.Add(new DiagramNode()
            {
                Id = "node1",
                Annotations = Node1,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                Shape = new { type = "Flow", shape = "Terminator" },
                OffsetY = 50,
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node2",
                Annotations = Node2,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 140,
                Shape = new { type = "Flow", shape = "Process" },
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node3",
                Annotations = Node3,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 230,
                Shape = new { type = "Flow", shape = "Decision" },
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node4",
                Annotations = Node4,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 320,
                Shape = new { type = "Flow", shape = "PreDefinedProcess" },
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node5",
                Annotations = Node5,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                OffsetY = 410,
                Shape = new { type = "Flow", shape = "Process" },
            });
            Nodes.Add(new DiagramNode()
            {
                Id = "node6",
                Annotations = Node6,
                Style = new NodeStyleNodes() { Fill = "darkcyan" },
                
                OffsetY = 500,
                Shape = new { type = "Flow", shape = "Terminator" },
            });
            List<DiagramConnector> Connectors = new List<DiagramConnector>();
            Connectors.Add(new DiagramConnector() { Id = "connector1", SourceID = "node1", TargetID = "node2", });
            Connectors.Add(new DiagramConnector() { Id = "connector2", SourceID = "node2", TargetID = "node3", });
            Connectors.Add(new DiagramConnector() { Id = "connector3", SourceID = "node3", TargetID = "node4", Annotations = connector1, });
            Connectors.Add(new DiagramConnector() { Id = "connector4", SourceID = "node3", TargetID = "node6", Annotations = connector2, });
            Connectors.Add(new DiagramConnector() { Id = "connector5", SourceID = "node4", TargetID = "node5" });
            Connectors.Add(new DiagramConnector() { Id = "connector6", SourceID = "node5", TargetID = "node3" });
            ViewBag.nodes = Nodes;
            ViewBag.connectors = Connectors;
            return View();
        }
    }

}

Automatic Organization Chart

In the ‘Flow Diagram’ section, how to create a diagram manually was discussed. This section explains how to create and position the diagram automatically.

Business object (Employee information)

Define Employee Information as JSON data. The following code example shows an employee array whose, Name is used as an unique identifier and ReportingPerson is used to identify the person to whom an employee report to, in the organization.

    public data: Object[] = [
        {
            Name: "Elizabeth",
            Role: "Director"
        },
        {
            Name: "Christina",
            ReportingPerson: "Elizabeth",
            Role: "Manager"
        },
        {
            Name: "Yoshi",
            ReportingPerson: "Christina",
            Role: "Lead"
        },
        {
            Name: "Philip",
            ReportingPerson: "Christina",
            Role: "Lead"
        },
        {
            Name: "Yang",
            ReportingPerson: "Elizabeth",
            Role: "Manager"
        },
        {
            Name: "Roland",
            ReportingPerson: "Yang",
            Role: "Lead"
        },
        {
            Name: "Yvonne",
            ReportingPerson: "Yang",
            Role: "Lead"
        }
    ];

Map data source

You can configure the above “Employee Information” with diagram, so that the nodes and connectors are automatically generated using the mapping properties. The following code example show how dataSourceSettings is used to map ID and parent with property name identifiers for employee information.

<ejs-diagram id="diagram" width="100%" height="550px" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults" created="diagramCreated">
                <e-diagram-datasourcesettings id="Id" parentId="ReportingPerson" dataManager="new DataManager(){ Data = (List<OverviewData>)ViewBag.Nodes }"></e-diagram-datasourcesettings>
                <e-diagram-layout type="OrganizationalChart"></e-diagram-layout>
                </ejs-diagram>
            function getNodeDefaults(obj, diagram) {
            obj.height = 60;
            obj.width = 100;
            return obj;
        }
        function getConnectorDefaults(connector, diagram) {
            connector.type = 'Orthogonal';
            return connector;
        }
        public partial class DiagramController : Controller
    {
        // GET: Overview
        public ActionResult Overview()
        {
           ViewBag.Nodes = OverviewData.GetAllRecords();
            return View();
        }
    }
    public class OverviewData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Designation { get; set; }
        public string ReportingPerson { get; set; }
        public OverviewData(string id, string name, string designation, string reportingperson)
        {
            this.Id = id;
            this.Name =name;
            this.Designation =designation;
            this.ReportingPerson =reportingperson;
        }
        public static List<OverviewData> GetAllRecords()
        {
            List<OverviewData> data = new List<OverviewData>();
            data.Add(new OverviewData("parent", "Elizabeth", "Director", "" ));
            data.Add(new OverviewData("1", "Christina", "Manager", "parent"));
            data.Add(new OverviewData("2", "Yoshi", "Lead", "1" ));
            data.Add(new OverviewData("3", "Philip", "Lead", "1"));
            data.Add(new OverviewData("4", "Yang", "Manager", "parent"));
            data.Add(new OverviewData("5", "Roland", "Lead", "4"));
            data.Add(new OverviewData("6", "Yvonne", "Lead", "4"));
            return data;

        }
    }

Visualize employee

The following code examples indicate how to define the default appearance of nodes and connectors. The setNodeTemplate is used to update each node based on employee data.

CSHTML
Orgchart.cs
@Html.EJS().Diagram("diagram").Width("100%").Height("590px").GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Infinity)).DataSourceSettings(ss => ss.Id("Id").ParentId("ReportingPerson")
        .DataManager(new DataManager() { Data = (List<OverviewData>)ViewBag.Nodes })).Layout(l => l.Type(Syncfusion.EJ2.Diagrams.LayoutType.OrganizationalChart).GetLayoutInfo("getLayoutInfo")).SnapSettings(se => se.Constraints(Syncfusion.EJ2.Diagrams.SnapConstraints.None)).Created("diagramCreated").Render()


function getNodeDefaults(obj, diagram) {
            obj.height = 60;
            obj.width = 100;
        }
 function getConnectorDefaults(obj, diagram) {
            obj.type = 'Orthogonal';
        }
using EJ2MVCSampleBrowser.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EJ2MVCSampleBrowser.Controllers.Diagram
{
    public partial class DiagramController : Controller
    {
        public ActionResult Overview()
        {
           ViewBag.Nodes = OverviewData.GetAllRecords();
            return View();
        }
    }
}

public class OverviewData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Designation { get; set; }
        public string ReportingPerson { get; set; }
        
        public OverviewData(string id, string name, string designation, string reportingperson)
        {
            this.Id = id;
            this.Name =name;
            this.Designation =designation;
            this.ReportingPerson =reportingperson;
            
        }

        public static List<OverviewData> GetAllRecords()
        {
            List<OverviewData> data = new List<OverviewData>();
            data.Add(new OverviewData("parent", "Elizabeth", "Director", "" ));
            data.Add(new OverviewData("1", "Christina", "Manager", "parent"));
            data.Add(new OverviewData("2", "Yoshi", "Lead", "1" ));
            data.Add(new OverviewData("3", "Philip", "Lead", "1"));
            data.Add(new OverviewData("4", "Yang", "Manager", "parent"));
            data.Add(new OverviewData("5", "Roland", "Lead", "4"));
            data.Add(new OverviewData("6", "Yvonne", "Lead", "4"));
            return data;

        }
    }

NOTE

You can refer to our ASP.NET MVC Diagram feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Diagram example that shows how to render the Diagram in ASP.NET MVC.