How to add a Microsoft Chart control to an ASP.NET Page

To add charts to a web page simply drag the Chart control from the Toolbox onto the page. Doing so adds the Chart control's declarative mark-up to the page:

<asp:Chart ID="Chart1" runat="server">

<Series>

<asp:Series Name="Series1" IsVisibleInLegend="False">

<EmptyPointStyle IsVisibleInLegend="False" />

</asp:Series>


</Series>


<ChartAreas>


<asp:ChartArea Name="ChartArea1">


</asp:ChartArea>


</ChartAreas>


</asp:Chart>

Note that the Chart control is identified in the declarative mark-up via the tag prefix and name . This prefix (asp) is mapped to the Chart Controls assembly in Web.config:

<controls>


<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />


</controls>

Additionally, an HTTP Handler named ChartHttpHandler is mapped to requests to chartImg.axd. As we'll see in a bit, when visited through a browser the Chart control renders an <img> element with a src attribute of ChartImg.axd. As a result, the browser makes a request to this file (ChartImg.axd) to display the chart image. This request is routed to the ChartHttpHandler HTTP Handler which generates the image contents and returns that binary data to the browser for display. This mapping between the ChartImg.axd path and the ChartHttpHandler HTTP Handler is implemented via the following Web.config mark-up:

<handlers>

<remove name="ChartImageHandler" />

<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />


</handlers>

Both of the above configuration additions are automatically added to Web.config when you add a Chart control to a web page for the first time in your project.

How to implement Partial-Page Rendering

With partial-page rendering, you can refresh individual regions of the page asynchronously and make the page more responsive to the user. You can implement partial-page rendering using ASP.NET AJAX Web server controls, and optionally write client script that uses the APIs in the Microsoft Ajax Library.
To add AJAX functionality to ASP.NET Web pages, you identify individual sections of the page that you want to update. You then put the content of these sections into UpdatePanel controls. The contents of an UpdatePanel control can be HTML or other ASP.NET controls. You can add an UpdatePanel control to the page as you would any other control. For example, in Visual Studio you can drag it from the toolbox to the Web page, or you can add it by using declarative mark-up in the page. The following example shows the mark-up for an UpdatePanel control.


<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>

By default, postbacks that originate from controls inside the update panel (child controls) automatically initiate asynchronous postbacks and cause a partial-page update. You can also specify that controls outside the update panel cause an asynchronous postback and that they refresh the UpdatePanel control's content. A control that causes an asynchronous postback is referred to as a trigger.
Here is a sample with UpdatePanel which refreshes a particular region of a web page. This sample refreshes a grid data and a label for every 5 seconds.
Here we have created an ASPX page with Site. master as the Master page and this page does have a developer express data grid and a label box.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="5000">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<dx:ASPxDataView ID="ASPxDataViewSystemInfo" runat="server"
ClientIDMode="AutoID">
<ItemTemplate>
<b>ID</b>:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<b>Name</b>:
<asp:Label ID="PageRankLabel" runat="server" Text='<%# Eval("Name") %>' />
</ItemTemplate>
</dx:ASPxDataView>
<dx:ASPxLabel ID="ASPxLabelCurrentTime" runat="server" Text="ASPxLabel">
</dx:ASPxLabel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>

There is a function in the code behind file to bind data for the grid


public void BindData()
{
SqlConnection con = new SqlConnection("Data Source=10.1.14.15;Initial Catalog=iDynamics;Persist Security Info=True;User ID=developers;Password=dev");
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "select * from Staff ";
cmd.Connection = con;
con.Open();
IDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
cmd.ExecuteNonQuery();
ASPxDataViewSystemInfo.DataSource = ds;
ASPxDataViewSystemInfo.DataBind();
}

The refresh code needs to be executed inside the timer tick event.

protected void Timer1_Tick(object sender, EventArgs e)
{
ASPxLabelCurrentTime.Text = "Grid Refreshed at: " + DateTime.Now.ToLongTimeString();
BindData();
}

The above example will be displayed the staff details in grid and the refreshed time in the label box. The grid and label box information will be refreshed by every 5 minutes. We cannot see any flickering while refreshing the values on grid and labelbox.

ASP.NET Whole Page Rendering

How do we refresh an ASP.NET web page to auto refresh on a set interval. Obviously, there are several methods, including Java Script.

To simply refresh the web page every five minutes, you can place the "meta http-equiv...." line shown below in the HTML editor of your ASPX page. Content ="300" means refresh every 300 seconds or five minutes.

<HEAD>
<title>WebForm1<title>

<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">

<meta content="C#" name="CODE_LANGUAGE">

<!--The next line of code will refresh the page every 5 minutes-->

<meta http-equiv="refresh" content="300">

<meta content="JavaScript" name="vs_defaultClientScript">

<meta content="http://schemas.microsoft.com/intellisense/ie5"

name="vs_targetSchema">

</HEAD>

That's all there is to it, if there is only a data grid on the page! However, be aware that this refresh acts like an initial page load, and any other controls, such as Drop Down Lists, etc., which have been set to other than default values will be lost unless you do some additional coding to restore their content at the time the refresh fires.

The above code will load the entire ASP page. Here it is not possible to load/refresh a particular region or control (example: data grid). Here is the need of partial rendering comes.