Essential Studio for ASP.NET是一款包含了很多界面子控件的套包产品，其中里面有一款子控件是Diagram控件，利用该控件开发人员可以在Web程序中创建流程图、组织图、思维导图、楼面布置图、鱼骨图等多种常用的工作流程图，开发人员在绘制流程图时可以使用多种不同样式和形状的节点，可以为节点设置图片，多种样式的连接线，桥接等。控件还提供了多种交互功能、数据绑定、自动布局以及各种图形形状模板等很多功能。
1.首先启动Visual Studio，然后创建一个Web程序，并把下面的代码添加到页面里，这样就首先创建了一个空的没有节点的流程图
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Diagram.aspx.cs" Inherits="WebApplication2.Diagram" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Getting started for ASP.NET Diagram Control</title>
<link href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
<script src='<%= Page.ResolveClientUrl("~/Scripts/jquery-2.1.4.min.js")%>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/Scripts/jquery.easing-1.3.min.js")%>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/Scripts/jquery.globalize.min.js")%>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/Scripts/jsrender.min.js")%>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/Scripts/ej/ej.web.all.min.js")%>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("~/Scripts/ej/ej.webform.min.js")%>' type="text/javascript"></script>
</head>
<body>
<form runat="server">
<ej:Diagram runat="server" ClientIDMode="Static" ID="DiagramWebControl" Width="100%" Height="600px"></ej:Diagram>
</form>
</body>
</html>
2.使用代码为空的流程图里添加节点
DiagramWebControl.Nodes.Add(CreateNode("Start", 140, 50, 300, 50, FlowShapes.Terminator, "Start"));
DiagramWebControl.Nodes.Add(CreateNode("Init", 140, 50, 300, 140, FlowShapes.Process, "var i = 0;"));
//Helper method
FlowShape CreateNode(string name, int width, int height, int offsetX, int offsetY, FlowShapes shape, string text)
{
FlowShape node = new FlowShape()
{
Shape = shape,
Name = name,
Width = width,
Height = height,
OffsetX = offsetX,
OffsetY = offsetY,
Labels = new Collection() { new Label() { Text = text } }
};
return node;
}
3.为上面创建的两个节点添加连接线
//Add a connector to `Connectors` collection of diagram model
DiagramWebControl.Connectors.Add(ConnectNodes("connector1", "Start", "Init"));
//Helper method
Connector ConnectNodes(string name, string source, string target)
{
return new Connector()
{
Name = name,
SourceNode = source,
TargetNode = target,
Segments = new Collection() {
new Segment(Segments.Orthogonal)
}
};
}
4.通过前面三个步奏就创建出了一个简单的流程图，如果要创建完整的流程图，可以参考下面的代码：
DiagramWebControl.Model.DefaultSettings.Node = new Node()
{
Type = Shapes.Flow,
Width = 140,
Height = 50,
OffsetX = 300
};
DiagramWebControl.Model.DefaultSettings.Connector = new Connector()
{
Labels = new Collection() { new Label() { FillColor = "white" } },
Segments = new Collection() { new Segment(Segments.Orthogonal) }
};
DiagramWebControl.Nodes.Add(CreateNode("Start", 50, FlowShapes.Terminator, "Start"));
DiagramWebControl.Nodes.Add(CreateNode("Init", 140, FlowShapes.Process, "var i = 0;"));
DiagramWebControl.Nodes.Add(CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?"));
DiagramWebControl.Nodes.Add(CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "i < 10?"));
DiagramWebControl.Nodes.Add(CreateNode("Increment", 410, FlowShapes.Process, "i < 10?"));
DiagramWebControl.Nodes.Add(CreateNode("End", 500, FlowShapes.Terminator, "i < 10?"));
//Connect Nodes
DiagramWebControl.Connectors.Add(ConnectNodes("connector1", "Start", "Init"));
DiagramWebControl.Connectors.Add(ConnectNodes("connector2", "Init", "Condition"));
DiagramWebControl.Connectors.Add(ConnectNodes("connector3", "Condition", "Print", "Yes"));
DiagramWebControl.Connectors.Add(ConnectNodes("connector4", "Condition", "End", "No",
new Segment() { Type = Segments.Orthogonal, Direction = "right", Length = 30 }));
DiagramWebControl.Connectors.Add(ConnectNodes("connector5", "Print", "Increment"));
DiagramWebControl.Connectors.Add(ConnectNodes("connector5", "Increment", "Condition", "",
new Segment() { Type = Segments.Orthogonal, Direction = "left", Length = 30 }));
//Helper methods
FlowShape CreateNode(string name, int offsetY, FlowShapes shape, string text)
{
FlowShape node = new FlowShape()
{
Shape = shape,
Name = name,
OffsetY = offsetY,
Labels = new Collection() { new Label() { Text = text } }
};
return node;
}
Connector ConnectNodes(string name, string source, string target, string text = "", Segment segment = null)
{
Connector connector = new Connector()
{
Name = name,
SourceNode = source,
TargetNode = target,
Labels = new Collection() { new Label() { Text = text } },
Segments = new Collection() {
segment != null? segment: new Segment(Segments.Orthogonal)
}
};
return connector;
}
