Reader Level:
ARTICLE

Creating Master Page (Using CSS) in ASP.NET: Part 1

Posted by Abhimanyu K Vatsa Articles | Visual Basic .NET September 18, 2012
This is my series of articles on Master Pages and in this article we will discuss how to use CSS in Master Pages.
  • 0
  • 0
  • 32066

Introduction

A Master Page enables us to share the same content among multiple content pages in a website. We can use a Master Page to create a common page layout. For example, if we want all the pages in our website to share a three-column layout, we can create the layout once in a Master Page and apply the layout to multiple content pages. We also can use Master Pages to display common content in multiple pages. For example, if we want to display a standard header and footer in each page in our website, then we can create the standard header and footer in a Master Page. By taking advantage of Master Pages, we can make our website easier to maintain, extend, and modify. If we need to add a new page to our website that looks just like the other pages in our website, then we simply need to apply the same Master Page to the new content page. If we decide to completely modify the design of our website, we do not need to change every content page. We can modify just a single Master Page to dramatically change the appearance of all the pages in our application by using CSS. Take a look at the following example for a better understanding. 

Using CSS in Master Page

A Master Page has the .master extension and we create a Master Page by creating a file that ends with the .master extension. We can locate a Master Page file anywhere within an application. We also can add multiple Master Pages to the same application.

<%@ 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>
<
head id="Head1" runat="server">
    <style type="text/css">
        html
        {
            background-color:silver;
            font:14px Arial,Sans-Serif;
        }
        .content
        {
            margin:auto;
            width:700px;
            background-color:white;
            border:Solid 3px blue;
        }
        .leftColumn
        {
            float:left;
            padding:5px;
            width:200px;
        }
        .rightColumn
        {
            float:left;
            padding:5px;
            height:auto;
            border-left:dotted 3px blue;
        }
        .clear
        {
            clear:both;
        }
    </style>
    <title>Using CSS in Master Page</title
>
</head>
<
body>
    <form id="form1" runat="server">
    <div class="content">
 <div class="leftColumn">
            <asp:contentplaceholder
                id="ContentPlaceHolder1"
                runat="server"/>
        </div>
<
div class="rightColumn">
            <asp:contentplaceholder
                id="ContentPlaceHolder2"
                runat="server"/>
        </div>
<
br class="clear" />
    </div>
    </form
>
</body>
</
html>

In the above example, the Master Page looks very much like a normal ASP.NET page. In fact, we can place almost all the same elements in a Master Page that we can place in an ASP.NET page, including HTML, server-side scripts, and ASP.NET controls. There are two special things about the Master Page. First, the file contains a <%@ Master %> directive instead of the normal <%@ Page %> directive. Second, the Master Page includes a ContentPlaceHolder control which is for referral by child pages/content pages. When the Master Page is merged with a particular content page, the content from the content page appears in the areas marked by the ContentPlaceHolder controls. We can add as many ContentPlaceHolders to a Master Page as we need.

The Master Page given below has a two-column page layout. Each ContentPlaceHolder control is contained in a separate <div> tag. Cascading Style Sheet (CSS) rules are used to position the two <div> tags into a two-column page layout.

Master-page-in-vb.net.gif

The content page, which uses a Master Page is given below:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content
    ID="LeftOne"
    ContentPlaceHolderID="ContentPlaceHolder1"
    Runat="Server">
    <b>This is heading like text for right column.</b>
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
</asp:Content>
<
asp:Content
    ID="RightOne"
    ContentPlaceHolderID="ContentPlaceHolder2"
    Runat="Server">
    <b>This is menu like text for left column.</b>
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
    <br />This is my data area.
</asp:Content>

When we open the preceding page in a web browser, the contents of the page are merged with the Master Page. The Master Page is associated with the content page through the MasterPageFile attribute included in the <%@ Page %> directive. This attribute contains the virtual path to a Master Page. The content page does not contain any of the standard opening and closing XHTML tags. All these tags are contained in the Master Page. All the content contained in the content page must be added with Content controls. We must place all the content contained in a content page within the Content controls. If we attempt to place any content outside these controls, we get an exception. The Content control includes a ContentPlaceHolderID property. This property points to the ID of a ContentPlaceHolder control contained in the Master Page. Within a Content control, we can place anything that we would normally add to an ASP.NET page, including XHTML tags and ASP.NET controls.

Note: Continued in the Next Part.

HAVE A GREAT CODING!

COMMENT USING

Trending up