This topic describes the steps needed to create a simple MVC application using the Nevron Thin Diagram control.
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
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");} </p> |
12. Start the application - the page must display a clickable diagram containing a circle and rectangle.