How to Apply a Master Page to an Existing Webpage

An updated Article Available at: Easily Convert An Existing Web Form to a Web Content Form (with a Master Page)

To convert an exist ing aspx page without a masterpage site template is easy. We are going to walk through a simple example for which can be applied to other situations. Assume you have the following page called Default.aspx (with it’s associated Default.aspx.cs page which we will not need to worry about).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!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>Hello World</title>
  </head>
  <body>
    <form id="form1" runat="server">
      <div>Hello World</div>
    </form>
  </body>
</html>

Now a standard masterpage with two content place holders (one for header information and the other for the main body content) is created for your web application called Site1.Master. Header and footer text has been added that will appear for every content item.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>  <!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" >
<html>
  <head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder>
  </head>
  <body>
    Hello World Header!
    <form id="form1" runat="server">
      <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
      </div>
    </form>
    Hello World Footer!
  </body>
</html>

First, an <%@ Page> tag is should be added to the first line. See resulting code for necessary tag attributes. Any page specific tags from the within the head tags except for <title> are placed inside the <asp:Content ID=”Content1″>. If there are no specific tags, this section will be present, but empty. Likewise, all content in the body (labeled in green in the above example), will be placed into <asp:Content ID=”Content2″>. To give your item template a title, there is a field in <%@ Page> called title which contains the page title (labeled in red in the above example). The final Default.aspx page will be as follows:

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Hello World" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">Hello World
</asp:Content>

A regular webpage has now been converted to work with your defined masterpage! You can follow this as a basis to larger more complexed pages.

Share and Enjoy:
  • Digg
  • DotNetKicks
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • MySpace
  • Netvibes
  • Reddit
  • StumbleUpon
You can leave a response, or trackback from your own site.

2 Responses to “How to Apply a Master Page to an Existing Webpage”

  1. [...] to convert a Web Form to a Web Content Form (with a defined Master Page) in an article called How to Apply a Master Page to an Existing Webpage. Since then, I have stumbled upon a GUI setting that does much of the work other shortcuts to make [...]

  2. krupa says:

    this is not good site.

Leave a Reply