Nevron .NET Vision
Framework / Web Forms / Integrating In Web Forms

In This Topic
    Integrating In Web Forms
    In This Topic

    This topic describes the steps necessary to build a simple ASP.NET application which displays a Chart or Diagram.


    1. Open Microsoft Visual Studio .NET.

    2. On the File / New Project select "Visual C# projects" and then select "ASP .NET Web application" from the list on the right side.

    3. Click OK.

    4. If the current page view is Source, switch to Design.

    5. Open the Toolbox. If it's not visible open it from the View\Toolbox menu item.

    6. Locate the Nevron Chart (Diagram) Web Form tab and expand it.

    7. Select NChartControl (NDrawingView) and drop it on the from.

    8. Open the source code for WebForm1.aspx - from the Solution explorer right click on Default.aspx and select "View code". Add the following using directives:

      For a Chart component:

      Copy Code
      using Nevron.GraphicsCore;
      using Nevron.Chart;
      using Nevron.Chart.WebForm;
      Visual Basic
      Copy Code
      Imports Nevron.GraphicsCore
      Imports Nevron.Chart
      Imports Nevron.Chart.WebForm

      For a Diagram component:

      Copy Code
      using Nevron.GraphicsCore;
      using Nevron.Diagram;
      using Nevron.Diagram.WebForm;
      using Nevron.Diagram.Shapes;
      Visual Basic
      Copy Code
      Imports Nevron.GraphicsCore
      Imports Nevron.Diagram
      Imports Nevron.Diagram.WebForm
      Imports Nevron.Diagram.Shapes
    9. Check if the following assemblies are referenced from your project:
      For Nevron Chart:
      - Nevron.System
      - Nevron.Presentation
      - Nevron.UI.WebForm.Controls
      - Nevron.Chart
      - Nevron.Chart.WebForm

      For Nevron Diagram:
      - Nevron.System
      - Nevron.Presentation
      - Nevron.UI.WebForm.Controls
      - Nevron.Diagram
      - Nevron.Diagram.Shapes
      - Nevron.Diagram.WebForm

      If not, add the required references to your project.

    10. Check if the following configuration xml exists in your web.config file:

      Copy Code
        <!—- IIS 5 and IIS 6 related configuration -->
            <!--If you are using Nevron Chart for .NET-->
            <addpath="NevronChart.axd" verb="*" type="Nevron.Chart.WebForm.NChartImageResourceHandler" validate="false" />
            <!--If you are using Nevron Diagram for .NET-->
            <addpath="NevronDiagram.axd" verb="*" type="Nevron.Diagram.WebForm.NDiagramImageResourceHandler" validate="false" />
         <!—- IIS 7 related configuration -->
            <!--If you are using Nevron Chart for .NET-->
            <removename="NevronChart" />
            <!--If you are using Nevron Diagram for .NET-->
            <removename="NevronDiagram" />
            <!--If you are using Nevron Chart for .NET-->
            <addname="NevronChart" preCondition="integratedMode" verb="*" path="NevronChart.axd" type="Nevron.Chart.WebForm.NChartImageResourceHandler" />
            <!--If you are using Nevron Diagram for .NET-->
            <addname="NevronDiagram" preCondition="integratedMode" verb="*" path="NevronDiagram.axd" type="Nevron.Diagram.WebForm.NDiagramImageResourceHandler" />
      If not, add the required xml configuration code.

    11. Start the application. The web page must display an empty chart (drawing view).

    12. Close the browser.

    13. Add a simple initialization code for the inserted component in the Page_Load method.
      For Nevron Chart that could be:

      Copy Code
      if (NChartControl1.RequiresInitialization)
       NChart chart = NChartControl1.Charts[0];
       NLineSeries line = new NLineSeries();
       line.BorderStyles[0] = new NStrokeStyle(Color.Red);
       line.BorderStyles[1] = new NStrokeStyle(Color.Blue);
       line.BorderStyles[2] = new NStrokeStyle(Color.Green);
      Visual Basic
      Copy Code
      If NChartControl1.RequiresInitialization = True Then
          Dim chart = NChartControl1.Charts(0)
          Dim line = New NLineSeries
          line.BorderStyles(0) = New NStrokeStyle(Color.Red)
          line.BorderStyles(1) = New NStrokeStyle(Color.Blue)
          line.BorderStyles(2) = New NStrokeStyle(Color.Green)
      End If
      For Nevron Diagram you could use the following lines of code:
      Copy Code
      if (NDrawingView1.RequiresInitialization)
       NDrawingView1.ViewLayout = CanvasLayout.Fit;
       NDrawingView1.DocumentPadding = new Nevron.Diagram.NMargins(10);
       NDrawingView1.Document.Bounds = new NRectangleF(0, 0, 420, 320);
       NStandardFrameStyle fs = (NDrawingView1.Document.BackgroundStyle.FrameStyle as NStandardFrameStyle);
       fs.InnerBorderWidth = new NLength(0);
       NBasicShapesFactory factory = new NBasicShapesFactory(NDrawingView1.Document);
       NEllipseShape ellipse = factory.CreateShape((int)BasicShapes.Ellipse) as NEllipseShape;
       ellipse.Name = "myEllipse";
       ellipse.Width = 250f;
       ellipse.Height = 250f;
       ellipse.Center = new NPointF(200, 200);
       ellipse.Style.FillStyle = new NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant1, Color.Navy, Color.White);
      Visual Basic
      Copy Code
      If NDrawingView1.RequiresInitialization = True Then
          NDrawingView1.ViewLayout = CanvasLayout.Fit
          NDrawingView1.DocumentPadding = New Nevron.Diagram.NMargins(10)
          NDrawingView1.Document.Bounds = New NRectangleF(0, 0, 420, 320)
          Dim fs = NDrawingView1.Document.BackgroundStyle.FrameStyle
          fs.InnerBorderWidth = New NLength(0)
          Dim factory = New NBasicShapesFactory(NDrawingView1.Document)
          Dim ellipse = factory.CreateShape(BasicShapes.Ellipse)
          ellipse.Name = "myEllipse"
          ellipse.Width = 250.0F
          ellipse.Height = 250.0F
          ellipse.Center = New NPointF(200, 200)
          ellipse.Style.FillStyle = New NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant1, Color.Navy, Color.White)
      End If

    14. Now start the application again - the page must display the inserted component initialized.

    See Also