Getting Started with ASP.NET MVC Diagram Control
8 Nov 202324 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.
Install-Package Syncfusion.EJ2.MVC5 -Version 27.2.2NOTE
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.
NOTE
If you create ASP.NET MVC application with MVC4 package, search for Syncfusion.EJ2.MVC4 and then install it.
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,
<head>
...
<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/27.2.2/fluent.css" />
<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/27.2.2/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.
<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.
@(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;
}
}
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.
@(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();
}
}
}
NOTE
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.
@(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.
@(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.
@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.