Introduction
In this article, we can see a simple solution for the master page coding . In future, update to framework 2 will be simple, since the solution is very similar to the new framework design.
Using the code
All we need to do for the master-page to work is:
- Derive our page from the master page.
- Enclose all the page in a tag named "
content
".
- Leave the form name "
Form1
", as it come by default.
- Use a user control as the master, and include in its HTML code asp:placeholder named "
ContentPlaceHolder
".
How does it work?
The master user control, has a tree of controls, one of them is the placeholder named "ContentPlaceHolder
". On the other hand, the page itself has a tree of controls, one of them is the "content
" (actually it has a tree under the list: Form1->content
).
The process is:
- Take the content, and move it under the placeholder in the master user control.
- Take the hole master user control and move it to under the Form.
That is all.
The code
The Master Page code:
public class MasterPage : System.Web.UI.Page
{
public MasterPage() : base()
{
this.Init +=new EventHandler(MasterPage_PreInit);
}
private void MasterPage_PreInit(object sender, EventArgs e)
{
UserControl template =
(UserControl)LoadControl("~/MasterTemplate.ascx");
Control content = this.FindControl("content");
template.FindControl("ContentPlaceHolder").Controls.Add(content);
this.FindControl("Form1").Controls.Add(template);
}
}
Here is a Master User Control. The only thing we must do is to include the placeholder named ContentPlaceHolder
.
<%@Control Codebehind="MasterTemplate.ascx.cs"
Inherits= "MasterPage.MasterTemplate" ... %>
<TABLE id="Table1" runat="server">
<tr>
<TD height="22" align="center">This Is The Header</TD>
</tr>
<TR>
<TD vAlign="top" align="right">
<tableid="table2" runat="server">
<tr>
<td>
<asp:placeholder id="ContentPlaceHolder"
runat="server"></asp:placeholder>
</td>
</tr>
<tr height= "10>
<td><asp:labelid="LabelError"
Runat= "server">Fatal error...</asp:label>
</td>
</tr>
</table>
</TD>
</TR>
<tr height="10">
<td align="center">This Is The Bottom</td>
</tr>
</TABLE>
And here is the page. All the code rendered in the BODY
must be enclosed in a tag named content
.
<%@ Page ... %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<body>
<form id="Form1" method="post" runat="server">
<asp:panel id="content" runat="server" HorizontalAlign="Center">
<asp:Calendar id="Calendar1" runat="server" ... ></asp:Calendar>
</asp:panel>
</form>
</body>
</HTML>
And here is the page code behind. The only thing we must do is to derive it from the base page, MasterPage
.
public class WebForm1 : MasterPage
{
...
}
Move to ASP.NET 2
To change our code to run under the new framework we will need to:
Or add in the page directive:
<%@ Page MasterPageFile="~/MasterPage.master" ... %>
The new view of Master Page in ASP.NET 2:
Other articles obout master page:
History
The code in this article is based on a presentation of Alik Levin from Microsoft.
Visit Yitzhak Gootvilig's blog.