ARTICLE

Creating a Simple Master Page in ASP.NET

Posted by Sapna in Articles | ASP.NET using VB.NET on January 28, 2011

Tags: ASP.NET, ASP.NET Master Page, ContentPlaceHolders, Simple Master Page in ASP.NET

A Master Page enables the developer to create consistent look and feel for your web application by providing a template with an editable place holder where the content or child pages will insert their custom content.

Tweet
1212
0

Reader Level: Beginner

ASP.NET Master Page

A Master Page enables the developer to create consistent look and feel for your web application by providing a template with an editable place holder. In the master page, you add placeholders called ContentPlaceHolders where the content or child pages will insert their custom content.

When a user request the content pages, the output of content pages and master page are merged together by ASP.NET , resulting in a page that combines the master page and content page layout.

Now we are going to put this knowledge into work, let's see how to create a very simply Master Page:
Coding behind Default.master page-

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!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></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .style1
        {
            color: #003399;
        }
        .style2
        {
            color: #000066;
        }
        .style3
        {
            color: #3333FF;
            font-weight: bold;
        }
    </style>
</head>
<body style="Verdana">
    <form id="form1" runat="server">
    <div style="font-family: Verdana; font-size: small; background-color: #D7EBFF; height: 235px;">
        <b style="border-style: solid; border-color: #999999; background-color: #CCCCCC;">
        <span class="style1">
        <br />  
        </span><span class="style2">A Simple Master Page    </span>
        <span class="style1">  
        </span></b><br />
        <br />
        This is the header section.<br /><br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
             <p class="style3" style="border-style: ridge">
              Here goes the ContentPlaceHolder...</p>
        </asp:contentplaceholder>
        <br /><br />
        This is the footer section.</div>
    </form>
</body>
</html>

Coding behind Default.master.vb page-

Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Partial Public Class SiteTemplate
    Inherits System.Web.UI.MasterPage
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    End Sub
End Class
Coding behind Default.aspx page-

<%@ Page Language="vb" MasterPageFile="MasterPage.master" Title="Content Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
       <br />
            <span class="style4">Here goes the ContentPlaceHolder...</span><br />
</asp:Content>
<asp:Content ID="Content2" runat="server" contentplaceholderid="head">
    <style type="text/css">
    .style4
    {
        color: #0066FF;
        font-weight: bold;
    }
</style>
</asp:Content>
OutputSummary

The greatest advantage of Master pages is providing the functionality to developers that have traditionally created by copying existing code, text, and control elements repeatedly, using framesets, using include files for common elements, using ASP.NET user controls.