Wednesday, 28 December 2011

ASP.NET - Refresh Part of a Page

We often come across a scenario where we need to update part of a page. We can use IFrame to refresh part of a page. We can achieve this using Ajax also but here I am discussing how we can achieve without using Ajax.

Step 1. Add a page in the project with name “MyPage.aspx”, copy and paste below code in the aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>Refresh part of page</title>    <meta http-equiv="Refresh" content="5" />  </head><body>    <form id="form1" runat="server">    <div>        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>    </div>    </form></body></html>
The below line of code in the head section of the above code will refresh the page after every 5 second.
<
meta http-equiv="Refresh" content="5" />
Step 2: Put below bold and italic lines of code in the Page_Load method of MyPage.aspx page, this line will refresh the time on each refresh of the page.protected void Page_Load(object sender, EventArgs e)    {        Label1.Text = "This Page has been refrested at " + DateTime.Now.ToString();    }
Step 3. Now add another page in the project with name “Refresh.aspx”, copy and paste below code in aspx page of Refresh.aspx.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Refresh.aspx.cs" Inherits="Refresh" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>Untitled Page</title></head><body>
    <form id="form1" runat="server">    <asp:Label ID="Label1" runat="server" Text="" />    <div>            <iframe id = "myFrame" src = "MyPage.aspx" frameborder = "0" style="width: 500px;height: 100px">            </iframe>     </div>    </form></body></html>
I have added an IFrame to achieve the goal of part refresh of the page. I have added src property and set it to MyPage.aspx which I have created in step 1.
I have also put a label outside the iframe to show the Date and time when Refresh.aspx page will load.

Step 4: Copy and paste below bold line of code on Page_Load method
protected void Page_Load(object sender, EventArgs e)
    {        Label1.Text = DateTime.Now.ToString();    }
Now run Refresh.aspx page, you will notice that the time on the Refresh.aspx won’t change but the time on MyPage.aspx will change after every 5 seconds
Live Demo Like us if you find this post useful. Thanks!
ownload Code 

No comments:

Post a Comment