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.