Framework / Web Forms / Integrating In Web Forms AJAX

In This Topic
    Integrating In Web Forms AJAX
    In This Topic

    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. 

     

     

    © Nevron Software LLC. All rights reserved. Send Feedback.