Nevron .NET Vision Documentation
Integrating In Mvc

This topic describes the steps needed to create a simple MVC application using the Nevron Thin Diagram control.

This topic applies only to Visual Studio 2010

1. Open Microsoft Visual Studio 2010.

2. Select "ASP.NET MVC 3 Web Application".

3. Click OK and accept the default settings for the application.

4. Open Solution Exploer.

5. Add the following references to the project:

- Nevron.System
- Nevron.Presentation
- Nevron.ThinWeb
- Nevron.Diagram
- Nevron.Diagram.ThinWeb
- Nevron.Diagram.Shapes

6. In Solution Explorer locate the Controllers folder.

7. Right click and from the "Add" menu item select "Controller".

8. In the controller name text box type "Chart1Controller" and press "Add".

9. Modify the controller source code so that it looks like:

C#
Copy Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Nevron.ThinWeb;

using Nevron.Diagram.ThinWeb;

using Nevron.GraphicsCore;

using Nevron.Diagram.Shapes;

using Nevron.Diagram;

using Nevron.Dom;

using System.Drawing;

namespace MvcApplication1.Controllers

{

public class Diagram1Controller : Controller

{

public Diagram1Controller()

{

}

#region Must Override

/// <summary>

/// Called to get the server id the diagram

/// </summary>

public string ServerId

{

get

{

string name = this.GetType().Name;

int index = name.LastIndexOf("Controller");

return name.Substring(0, index);

}

}

#endregion

#region Implementation

private NThinDiagramControl Control

{

get

{

NThinDiagramControl control = new NThinDiagramControl();

control.StateId = this.ServerId;

control.ServiceUrl = "/" + ServerId + "/Service";

return control;

}

}

#endregion

#region Verbs

/// <summary>

/// Renders the initial content of the diagram on the page

/// </summary>

/// <returns></returns>

public ActionResult Content()

{

NThinDiagramControl control = this.Control;

control.ConfigureInitialResponse();

// add the client mouse event tool

NDrawingDocument document = control.Document;

document.BeginInit();

document.BackgroundStyle.FrameStyle.Visible = false;

document.AutoBoundsPadding = new Nevron.Diagram.NMargins(10f, 10f, 10f, 10f);

document.Style.FillStyle = new NColorFillStyle(Color.White);

// create a circle

NBasicShapesFactory factory = new NBasicShapesFactory(document);

NShape circle = factory.CreateShape(BasicShapes.Circle);

circle.Bounds = new NRectangleF(10f, 10f, 100f, 100f);

circle.Style.FillStyle = new NColorFillStyle(Color.Blue);

document.ActiveLayer.AddChild(circle);

control.SizeToContent();

// create a rectangle

NShape rect = factory.CreateShape(BasicShapes.Rectangle);

rect.Bounds = new NRectangleF(120f, 120f, 100f, 100f);

rect.Style.FillStyle = new NColorFillStyle(Color.Blue);

document.ActiveLayer.AddChild(rect);

control.SizeToContent();

NServerMouseEventTool serverMouseEventTool = new NServerMouseEventTool();

serverMouseEventTool.MouseDown = new DiagramMouseDownCallback();

// configure the controller

control.Controller.Tools.Add(serverMouseEventTool);

return new NThinControlResult(control.ProcessResponses());

}

/// <summary>

/// Services AJAX calls to the control

/// </summary>

/// <param name="request"></param>

/// <returns></returns>

public ActionResult Service(string request)

{

NResponseOutput output = this.Control.ProcessRequest(request);

return new NThinControlResult(output);

}

/// <summary>

/// Renders the control script

/// </summary>

/// <returns></returns>

public ActionResult Script()

{

return new NThinControlResult(new NTextResponseOutput(NTextResponseOutput.m_MimeHTML, this.Control.GetIncludeScript()));

}

#endregion

}

/// <summary>

/// Mouse down callback called when the user presses a mouse button

/// </summary>

[Serializable]

class DiagramMouseDownCallback : INMouseEventCallback

{

#region INMouseEventCallback Members

public void OnMouseEvent(NAspNetThinWebControl control, NBrowserMouseEventArgs e)

{

if (e.MouseButton == MouseButton.Left)

{

NThinDiagramControl diagramControl = (NThinDiagramControl)control;

NNodeList allShapes = diagramControl.Document.ActiveLayer.Children(Nevron.Diagram.Filters.NFilters.Shape2D);

NNodeList affectedNodes = diagramControl.HitTest(new NPointF(e.X, e.Y));

NNodeList affectedShapes = affectedNodes.Filter(Nevron.Diagram.Filters.NFilters.Shape2D);

int length;

length = allShapes.Count;

for (int i = 0; i < length; i++)

{

NShape shape = allShapes[i] as NShape;

if (shape != null)

{

shape.Style.FillStyle = new NColorFillStyle(Color.Blue);

}

}

length = affectedShapes.Count;

for (int i = 0; i < length; i++)

{

NShape shape = affectedShapes[i] as NShape;

if (shape != null)

{

shape.Style.FillStyle = new NColorFillStyle(Color.Red);

}

}

diagramControl.Update();

}

}

#endregion

}

class NThinControlResult : PartialViewResult

{

public NThinControlResult(NResponseOutput output)

{

m_Output = output;

}

public override void ExecuteResult(ControllerContext context)

{

NTextResponseOutput textOutput = m_Output as NTextResponseOutput;

if (textOutput != null)

{

context.HttpContext.Response.Write(textOutput.m_Text);

return;

}

NBinaryResponseOutput binaryOutput = m_Output as NBinaryResponseOutput;

if (binaryOutput != null)

{

context.HttpContext.Response.Clear();

context.HttpContext.Response.ContentType = binaryOutput.m_MimeType;

context.HttpContext.Response.OutputStream.Write(binaryOutput.m_Data, 0, binaryOutput.m_Length);

if (binaryOutput.m_Headers != null)

{

int count = binaryOutput.m_Headers.Length;

for (int i = 0; i < count; i += 2)

{

context.HttpContext.Response.AppendHeader(binaryOutput.m_Headers[i], binaryOutput.m_Headers[i + 1]);

i = i + 1;

}

}

}

}

NResponseOutput m_Output;

}

}

10. Locate the "Views" folder in Solution explorer and open the Home/Index.cshtml file.

11. Modify the file so that it looks like:

HTML
Copy Code

@{

ViewBag.Title = "Home Page";

}

<h2>@ViewBag.Message</h2>

<p>

Nevron Thin Web Control

@{Html.RenderAction("Script", "Diagram1");}
@{Html.RenderAction("Content", "Diagram1");}

</p>

12. Start the application - the page must display a clickable diagram containing a circle and rectangle.

 

 


©2017. Nevron Software LLC.

Send Feedback