Post
Ask Question

Update a Portion of a Web Page in ASP.NET

In other word we can say that it enables you to perform partial page rendering. You can Update a portion of a web page after a time interval or after perform any event.

To do this task we use following AJAX control.

UpdatePanel

Update panel is a Server-Side AJAX control. The update panel allow us to update a portion of a page without updating the entire page. In other word we can say that it enables us to perform partial page rendering.

Timer

Timer is also a Server-Side AJAX control. The timer control is great to be used when you have an area of user interface that you want to be dynamically update based on some periodic interval.

Example:

First Create a website, then add a web form and copy the below code into aspx page.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <asp:ScriptManager ID="ScriptManager1" runat="server">  
  11.     </asp:ScriptManager>  
  12.     <div>  
  13.         Page Time:  
  14.         <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>  
  15.         <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
  16.             <ContentTemplate>  
  17.                 Update Panel Time:  
  18.                 <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>  
  19.                 <br />  
  20.                 <asp:Button ID="Button1" runat="server" Text="Update" OnClick="Button1_Click" />  
  21.                 <asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">  
  22.                 </asp:Timer>  
  23.             </ContentTemplate>  
  24.         </asp:UpdatePanel>  
  25.     </div>  
  26.     </form>  
  27. </body>  
  28. </html>  
Copy the below Code into aspx.cs page:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.         if (!IsPostBack)  
  13.         {  
  14.             Label1.Text = Label2.Text = DateTime.Now.ToString();  
  15.         }  
  16.     }  
  17.     protected void Button1_Click(object sender, EventArgs e)  
  18.     {  
  19.         Label1.Text = Label2.Text = DateTime.Now.ToString();              
  20.     }  
  21.     protected void Timer1_Tick(object sender, EventArgs e)  
  22.     {  
  23.         Label1.Text = Label2.Text = DateTime.Now.ToString();              
  24.     }  
  25. }  
Now run the website and see the result.

Output

You can check that only the Update Panel Time is automatically updated after two second. Now click on Update button, only Update Panel Time is update.