Refresh a Frame from Another Frame in ASP.NET

<b>D</b>ebabrata_<b>D</b>as

4.85/5 (7 votes)

May 26, 2014

CPOL

2 min read

27782

In this tip, we will create a small project to give demo how we can refresh a Frame from another Frame in ASP.NET.

Download source - 13.9 KB

Introduction

HTML frames (not supported in HTML5) allow the user to view multiple pages on the same window. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame.

Please feel free to share your comments / suggestions and rate this tip. :)

Background

In this tip, we'll see how we can refresh one frame from another frame on a single window.

Let's have a simple example with two web pages - Page1.aspx, Page2.aspx and an HTML page - HtmlPage1.html

Page1.aspx - will contain a hyperlink which will cause refresh of Page2.aspx
Page2.aspx - will contain a label control to display the Page Refreshed time
HtmlPage1.html - will contain two <frame> controls pointing to both the web pages, i.e., Page1.aspx and Page2.aspx

Using the Code

Let's try this example by creating a new project called FramesDemo:

Add a new Web Form - Page1.aspx

An anchor tag <a href="Page2.aspx" target="frame2">Click to refresh Page 2</a> is added. Here, target="frame2" will make sure that Page2.aspx is loaded in "frame2".

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Page 1</h1>
            <a href="Page2.aspx" target="frame2">Click to refresh Page 2</a>
        </div>
    </form>
</body>
</html>

Let's add another page - Page2.aspx

Here, we have added a Label control to display the current Date-Time.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Page 2</h1>
            Page Refreshed at: 
            <asp:Label ID="lblCurrentTime" runat="server" 
            Text="Label"></asp:Label>
        </div>
    </form>
</body>
</html>

We want to display the current Date-Time on every refresh of this page. The following code will make sure that current Date-Time is set to the Label control:

//Page2.aspx.cs

using System;
namespace Frames_Demo
{
    public partial class Page2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Display current date time on refresh of this page
            lblCurrentTime.Text = DateTime.Now.ToString();
        }
    }
}

Now, we will add a container HTML page with two frames pointing to the web pages, i.e., Page1.aspx and Page2.aspx.

Let's add a new HTML file - HtmlPage1.html (keep the default name):

Modify the page to add a <frameset> control with two <frame> controls. Make sure that name="frame2" is set for the second <frame> control so that it can be referred by the Page1.aspx:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<frameset cols="50%,50%">
    <frame src="Page1.aspx">
    <frame src="Page2.aspx" name="frame2">
</frameset>
</html>

Set HtmlPage1.html as Start Page and hit F5 to run the web site.

Click on the hyperlink - "Click to refresh Page 2" on Page 1 and see how the Page Refreshed time is changing on Page 2.

Hope you like this tip.

Happy coding! :)

History

26^th May, 2014: Initial version