Diagram for .NET / Getting Started / Integrating ThinWeb Diagram / Integrating In Mvc
In This Topic
    Integrating In Mvc
    In This Topic

    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.