(untagged)

Refresh a Frame from Another Frame in ASP.NET

Debabrata_Das

0.00/5 (No votes)

26 May 2014

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here