Adding NetDiagram to your Website

Switch to Design view.
Click on the DiagramView icon in the Toolbox, and drag it onto the Web Form. This creates a DiagramView instance, and adds a server control to the Web Form.
If you switch to Source view, you will see the following:

Source code (Default.aspx) Copy Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="MindFusion.Diagramming.WebForms" Namespace="MindFusion.Diagramming.WebForms"
    TagPrefix="ndiag" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>MyNetDiagram</title>
</head>
<body style="color: darkgreen; font-family: Arial, 'Arial Black'" text="#000099">
    <form id="form1" runat="server">
    <div style="color: #339966; font-family: Arial; position: absolute; background-color: transparent">
        <ndiag:DiagramView id="DiagramView1" runat="server" height="303px" width="349px" style="z-index: 100; left: 25px; position: absolute; top: 76px" BackColor="#C0FFC0" BorderColor="#004040" BorderStyle="Double" BorderWidth="2px" ClientSideMode="ImageMap">
            <Diagram ShapeBrush="s:#FF87CEFA" />
        </ndiag:DiagramView>

    </div>
        Sample NetDiagram
    </form>
</body>
</html>

Source code (Default.aspx) Copy Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="MindFusion.Diagramming.WebForms" Namespace="MindFusion.Diagramming.WebForms" TagPrefix="ndiag" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>MyNetDiagram</title> </head> <body style="color: darkgreen; font-family: Arial, 'Arial Black'" text="#000099"> <form id="form1" runat="server"> <div style="color: #339966; font-family: Arial; position: absolute; background-color: transparent"> <ndiag:DiagramView id="DiagramView1" runat="server" height="303px" width="349px" style="z-index: 100; left: 25px; position: absolute; top: 76px" BackColor="#C0FFC0" BorderColor="#004040" BorderStyle="Double" BorderWidth="2px" ClientSideMode="ImageMap"> <Diagram ShapeBrush="s:#FF87CEFA" /> </ndiag:DiagramView> </div> Sample NetDiagram </form> </body> </html>

First of all, it is stated in the Default.aspx file that the code for the Web Form is contained in the Default.aspx.cs file:

Source code (Default.aspx) Copy Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Source code (Default.aspx) Copy Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

The second statement contains the instruction for registering the Assembly MindFusion.Diagramming.WebForms and using "ndiag" as tag prefix.

Source code (Default.aspx) Copy Code
<%@ Register Assembly="MindFusion.Diagramming.WebForms" Namespace="MindFusion.Diagramming.WebForms"
TagPrefix="ndiag" %>

Source code (Default.aspx) Copy Code
<%@ Register Assembly="MindFusion.Diagramming.WebForms" Namespace="MindFusion.Diagramming.WebForms" TagPrefix="ndiag" %>

NetDiagram is declared as a Server control within the .aspx file by using the runat="server" attribute value.

Source code (Default.aspx) Copy Code
<ndiag:diagramview id="DiagramView1" runat="server" height="303px" width="349px" style="z-index: 100; left: 25px; position: absolute; top: 76px" BackColor="#C0FFC0" BorderColor="#004040" BorderStyle="Double" BorderWidth="2px" ClientSideMode="ImageMap">
<Diagram ShapeBrush="s:#FF87CEFA" />
</ndiag:diagramview>

Source code (Default.aspx) Copy Code
<ndiag:diagramview id="DiagramView1" runat="server" height="303px" width="349px" style="z-index: 100; left: 25px; position: absolute; top: 76px" BackColor="#C0FFC0" BorderColor="#004040" BorderStyle="Double" BorderWidth="2px" ClientSideMode="ImageMap"> <Diagram ShapeBrush="s:#FF87CEFA" /> </ndiag:diagramview>

As shown in the source code, the selected DiagramView properties values in the Properties window at design time are recorded automatically within the "ndiag" tag in the Default.aspx source file, for example ClientSideMode, Diagram ShapeBrush and so on.

In the Solution Explorer, double-click the Default.aspx.cs file to show it in the Code Editor. This code-behind file will contain the code (C# in this tutorial) for the event handlers.

C#(Default.aspx.cs) Copy Code
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
}

C#(Default.aspx.cs) Copy Code
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } }

The empty method Page_Load is generated from the Visual Studio in the Default.aspx.cs. It is executed when loading the page.

Copy MindFusion.Diagramming.js, JDiagram.jar, ImageGen.ashx and ImageGen.ashx.cs from the NetDiagram\Redistributable folder to the web site's folder.