Nevron .NET Vision Documentation
Integrating In Web Forms AJAX

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

  1. Open Microsoft Visual Studio .NET.
  2. On the File / New Project select "Visual C# / Web" and then select from the list on the right side "ASP.NET Web Application" in Visual Studio 2008 or "ASP.NET AJAX-Enabled Web Application" in Visual Studio 2005.

  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 Default.aspx - from the Solution explorer right click on Default.aspx and select "View code". Add the following using directives:

    For a Chart component:

    C#
    Copy Code
    usingSystem.Drawing;
    
    using Nevron.GraphicsCore;
    using Nevron.Chart;
    using Nevron.Chart.WebForm;
    
    Visual Basic
    Copy Code
    Imports System.Drawing
    
    Imports Nevron.GraphicsCore
    Imports Nevron.Chart
    Imports Nevron.Chart.WebForm
    

    For a Diagram component:

    C#
    Copy Code
    usingSystem.Drawing;
    
    using Nevron.GraphicsCore;
    using Nevron.Diagram;
    using Nevron.Diagram.WebForm;
    usingNevron.Diagram.Shapes;
    
    Visual Basic
    Copy Code
    Imports System.Drawing
    
    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:
    web.config
    Copy Code
    <system.web>
      <!—- IIS 5 and IIS 6 related configuration -->
        <httpHandlers>
          <!--If you are using Nevron Chart for .NET-->
          <add path="NevronChart.axd" verb="*" type="Nevron.Chart.WebForm.NChartImageResourceHandler" validate="false" />
          <!--If you are using Nevron Diagram for .NET-->
          <add path="NevronDiagram.axd" verb="*" type="Nevron.Diagram.WebForm.NDiagramImageResourceHandler" validate="false" />
        </httpHandlers>
    </system.web>
    ...
    <system.webServer>
       <!—- IIS 7 related configuration -->
       <handlers>
          <!--If you are using Nevron Chart for .NET-->
          <remove name="NevronChart" />
          <!--If you are using Nevron Diagram for .NET-->
          <remove name="NevronDiagram" />
          ...
          <!--If you are using Nevron Chart for .NET-->
          <add name="NevronChart" preCondition="integratedMode" verb="*" path="NevronChart.axd" type="Nevron.Chart.WebForm.NChartImageResourceHandler" />
          <!--If you are using Nevron Diagram for .NET-->
          <add name="NevronDiagram" preCondition="integratedMode" verb="*" path="NevronDiagram.axd" type="Nevron.Diagram.WebForm.NDiagramImageResourceHandler" />
       </handlers>
    </system.webServer>
    

    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. Make sure a script manager exists on the web page.

  14. From the designer, right-click on the Nevron web control, select Properties and set the AjaxEnabled property to true and also the AsyncAutoRefreshEnabled to true; change the AsyncRefreshInterval to 500.

  15. Select the events tab of the property grid and double-click on the AsyncRefresh event. A new NChartControl1_AsyncRefresh/ NDrawingView1_AsyncRefreshevent handler will be created in your source code.

  16. Add a simple initialization code for the inserted component in the Page_Load method.

    For Nevron Chart that could be:

    C#
    Copy Code
    if(NChartControl1.RequiresInitialization)
    {
        NChart chart = NChartControl1.Charts[0];
        NLineSeries line = new NLineSeries();
    
        line.Values.Add(10);
        line.Values.Add(20);
        line.Values.Add(30);
        line.Values.Add(40);
    
        line.BorderStyles[0] = new NStrokeStyle(Color.Red);
        line.BorderStyles[1] = new NStrokeStyle(Color.Blue);
        line.BorderStyles[2] = new NStrokeStyle(Color.Green);
    
        chart.Series.Add(line);
    }
    
    Visual Basic
    Copy Code
    If NChartControl1.RequiresInitialization Then
        Dim Chart As NChart = NChartControl1.Charts(0)
        Dim Line As NLineSeries = New NLineSeries()
    
        Line.Values.Add(10)
        Line.Values.Add(20)
        Line.Values.Add(30)
        Line.Values.Add(40)
    
        Line.BorderStyles(0) = New NStrokeStyle(Color.Red)
        Line.BorderStyles(1) = New NStrokeStyle(Color.Blue)
        Line.BorderStyles(2) = New NStrokeStyle(Color.Green)
    
        Chart.Series.Add(Line)
    End If
    

    For Nevron Diagram that could be:
    C#
    Copy Code
    if(NDrawingView1.RequiresInitialization)
    {
        NDrawingView1.ViewLayout = CanvasLayout.Fit;
        NDrawingView1.DocumentPadding = new Nevron.Diagram.NMargins(10);
    
        NDrawingView1.Document.BeginInit();
    
        NDrawingView1.Document.Bounds = new NRectangleF(0, 0, 420, 320);
        NDrawingView1.Document.BackgroundStyle.FrameStyle.Visible = false;
        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);
    
        NDrawingView1.Document.ActiveLayer.AddChild(ellipse);
        NDrawingView1.Document.EndInit();
    }
    
    Visual Basic
    Copy Code
    If NDrawingView1.RequiresInitialization Then
        NDrawingView1.ViewLayout = CanvasLayout.Fit
        NDrawingView1.DocumentPadding = New Nevron.Diagram.NMargins(10)
     
        NDrawingView1.Document.BeginInit()
     
        NDrawingView1.Document.Bounds = New NRectangleF(0, 0, 420, 320)
        NDrawingView1.Document.BackgroundStyle.FrameStyle.Visible = False
        Dim Factory As NBasicShapesFactory = New NBasicShapesFactory(NDrawingView1.Document)
     
        Dim Ellipse As NEllipseShape = TryCast(Factory.CreateShape(CInt(BasicShapes.Ellipse)), 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)
    
        NDrawingView1.Document.ActiveLayer.AddChild(Ellipse)
        NDrawingView1.Document.EndInit()
    End If
    
  17. Add a code that will modify the chart/diagram on auto refresh in the NChartControl1_AsyncRefresh/ NDrawingView1_AsyncRefreshmethod.

    For Nevron Chart that could be:

    C#
    Copy Code
    NLineSeries line = (NLineSeries)NChartControl1.Charts[0].Series[0];
    
    if(line == null)
        return;
    
    line.Values.Add(DateTime.Now.Second); 
    
    Visual Basic
    Copy Code
    NLineSeries Line = TryCast(NChartControl1.Charts(0).Series(0), NLineSeries)
    
    If Line is Nothing Then Return
    
    Line.Values.Add(DateTime.Now.Second)
    

    For Nevron Diagram that could be:

    C#
    Copy Code
    NShape ellipse = NDrawingView1.Document.ActiveLayer.GetChildByName("myEllipse", 0) as NShape;
    if(ellipse == null)
        return;
    
    if(ellipse.Width == 250f)
    {
        ellipse.Width = 200f;
        ellipse.Height = 200f;
    }
    else
    {
        ellipse.Width = 250f;
        ellipse.Height = 250f;
    }
    
    Visual Basic
    Copy Code
    Dim Ellipse As NShape = TryCast(NDrawingView1.Document.ActiveLayer.GetChildByName("myEllipse", 0), NShape)
    If Ellipse is Nothing Then Return
    
    If Ellipse.Width = 250F Then 
        Ellipse.Width = 200F
        Ellipse.Height = 200F
    Else
        Ellipse.Width = 250F
        Ellipse.Height = 250F
    End If
    
  18.  Now start the application again - the page must display the inserted component initialized and animated. 

 

 


©2017. Nevron Software LLC.

Send Feedback