Create DiagramView in Razor Pages Project

After adding the nuget package, you should be able to add a DiagramView component to your ASP.NET Razor Pages user interface.

1. Create a DiagramView component

In Index.cshtml.cs, add a reference to the MindFusion.Diagramming.Mvc namespace:

C#

using MindFusion.Diagramming.Mvc;

In the body of the Index method, create a DiagramView instance and store it in the ViewData:

C#

DiagramView view = new DiagramView("diagramView1");
ViewData["DiagramView"] = view;

2. Render DiagramView inside a view

In Index.cshtml, add a reference to the MindFusion.Diagramming.Mvc namespace:

Razor

@using MindFusion.Diagramming.Mvc

If you want to use tag helpers for adding MindFusion components to views, import them with the @addTagHelper directive:

Razor

@addTagHelper *, MindFusion.Diagramming.Mvc

Add the component by using either the DiagramView HTML helper:

Razor

@Html.DiagramView(
    (DiagramView)ViewBag.DiagramView,
    new { style = "width:100%; height:100%;" })

or alternatively using its Tag helper:

Razor

<mindfusion-diagramview
    component=(DiagramView)ViewBag.DiagramView
    style="width:100%; height:100%;">
</mindfusion-diagramview>

3. Create diagram items

You can create nodes and links programmatically either by calling Factory methods, or by instantiating objects of respective class and adding them to Items collection:

C#

// in controller

DiagramView view = new DiagramView("diagramView1");

var df = view.Diagram.Factory;

var node1 = df.CreateShapeNode(10, 10, 30, 30);
node1.Text = "Hello";

var node2 = df.CreateShapeNode(60, 25, 30, 30);
node2.Text = "ASP.NET Razor Pages";

df.CreateDiagramLink(node1, node2);

ViewData["DiagramView"] = view;

4. Preserve data between postbacks

The DiagramView component can preserve its data between postbacks by serializing and deserializing to JSON internally. Call the static FromRequest method from the page's OnPost method to get this functionality.

C#

public void OnPost()
{
    DiagramView view = DiagramView.FromRequest("diagramView1", Request);
    ViewData["DiagramView"] = view;
}

Browse the other sections of this help file to learn more about the functionality provided by the MindFusion.Diagramming classes, methods and properties. Follow the tutorials to learn how to populate the diagram model programmatically or create custom item types.