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:
using System;
namespace Frames_Demo
{
public partial class Page2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
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
- 26th May, 2014: Initial version