Tutorial 2: Handling client-side events

This tutorial will show you how to use client events in MvcDiagram.

1. Create a new ASP.NET Core MVC Application and add a DiagramView control to the page

Follow steps 1-4 from Tutorial 1: Getting started.

2. Create and arrange the diagram

Open the HomeController.cs file and add a reference to the MindFusion.Diagramming.Layout namespace in the 'using' section of the page:

C#

using MindFusion.Diagramming.Layout;

Add the following code block to create a new DiagramView object and add some nodes and links to its Diagram.

C#

// initialize the DiagramView
DiagramView view = new DiagramView("diagramView1");
Diagram diagram = view.Diagram;

// add some nodes and links
for (var i = 0; i < 5; i++)
{
    var node = diagram.Factory.CreateShapeNode(new Rect(0, 0, 25, 25));
    node.Text = "node " + i;
    diagram.Nodes.Add(node);
    if (i > 0)
    {
        var link = diagram.Factory.CreateDiagramLink(diagram.Nodes[0], node);
        diagram.Links.Add(link);
    }
}

Set the Brush property of the first node to DarkRed and its Text to "Root":

C#

var rootNode = diagram.Nodes[0];
rootNode.Brush = new SolidBrush(Color.DarkRed);
((ShapeNode)rootNode).Text = "Root";

Create a FractalLayout object and apply it to the Diagram:

C#

var layout = new FractalLayout();
layout.Root = rootNode;
layout.Arrange(diagram);

Add the newly created view to the ViewData dictionary:

C#

ViewBag.DiagramView = view;

Modify the call to the DiagramView HTML helper method as following to set the NodeCreatedScript to "nodeCreated" and NodeDeletedScript to "nodeDeleted". These are the names of the JavaScript functions that will handle the corresponding events. We will define them a bit later in the Index.cshtml file.

HTML

@Html.DiagramView(
    ((DiagramView)ViewBag.DiagramView)
    .NodeCreatedScript("nodeCreated")
    .NodeDeletedScript("nodeDeleted"),
    new { style="width:700px; height:500px;" }
)

3. Handling client events

Open the site.js file, located in the wwwroot/js folder and add the following JavaScript block:

JavaScript

function nodeCreated(sender, args)
{
    if (args.node)
    {
        // send an ajax request to the Controller's Test action method
        $.ajax(
        {
            type: "POST", url: "/Home/Test",
            data: { json: sender.toJson(), index: sender.nodes.indexOf(args.node) },
            dataType: 'json',
            success: function (result) {
                sender.fromJson(result.success);
            },
            error: function (req, status, error) {
                alert(error);
            }
        });
    }
}

function nodeDeleted(sender, args)
{
    if (args.node.zIndex == 0)
    {
        if (sender.nodes.length > 0)
        {
            // set the root node to the first node in the diagram.nodes collection
            var rootNode = sender.nodes[0];
            rootNode.brush = { type: 'SolidBrush', color: 'firebrick' };
            rootNode.text = "root";
            rootNode.zIndex = 0;

            // create links between the root and children nodes
            for (var i = 1; i < sender.nodes.length; i++)
            {
                sender.factory.createDiagramLink(
                    sender.nodes[0], sender.nodes[i]);
            }
        }
    }
}

Open the HomeController.cs file and add the Test action method:

C#

public JsonResult Test(string json, string index)
{
    DiagramView view = DiagramView.FromJson(json);
    Diagram diagram = view.Diagram;
    var newNode = ((ShapeNode)diagram.Nodes[Int32.Parse(index)]);
    newNode.Text = "node " + (diagram.Nodes.Count-1).ToString();
    if (diagram.Nodes.Count > 1)
    {
        // create a link between the root node and the newly created node and apply the layout to the diagram
        var link = diagram.Factory.CreateDiagramLink(diagram.Nodes[0], newNode);
        var layout = new FractalLayout();
        layout.Root = diagram.Nodes[0];
        layout.Arrange(diagram);
    }
    else
    {
        // set the newly created node as a root node
        newNode.Brush = new SolidBrush(Color.DarkRed);
        ((ShapeNode)newNode).Text = "Root";
    }
    return Json(new { success = DiagramView.ToJson(view) });
}

When a new node is added to the diagram the nodeCreated function will be called. It will send an ajax request, containing the serialized to JSON view and the index of the new node to the controller's Test action method. Within the Test method the view will be recreated from the JSON string and depending of the number of nodes in the diagram either a link between the root node and the new node will be created or the new node will be set as root.

The nodeDeleted function is called upon node deletion. If the deleted node is the root node a new root node will be assigned and will be linked to all other nodes in the diagram.

4. Run the application

Run the application. Try adding and deleting some nodes to see how the events will be handled.