How to Use Master Pages in ASP.NET 2.0 and C#

This tutorial will show how to use Master Pages in Visual Studio, and the ability to dynamically change them.

Master Pages allow you to create definitive styles for your web pages, and they have a higher precendence than CSS Stylesheets. Furthermore, Visual Studio makes it easy to dynamically change the look and feel of your web page using Master Pages.

Add New Item to website, choose Master Page.
Create layout table for Master Page, and add Content Placeholder control from toolbox. This is where dynamic content will be displayed on the Master Page. Modify the page to your liking (color, etc.)

Note the @ Master instead of the usual @ Page declaration.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master1.master.cs" Inherits="Master2"%>

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

Add a New Item to website; Web Form. Check Select master page, and choose the Master Page you just created.
When in Design View, your new page will appear with the Master Page in the background. You can make changes to your new page where the Content Placeholder is.

To change the Master Page dynamically..
Create a new Master Page different from the first. Then add buttons to change between the Master Pages.

void LinkButton1_Click(Object sender, EventArgs e) { Session["masterpage"] = "Master1.master"; Response.Redirect(Request.Url.ToString()); }

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

Now to dynamically load the Master Page:

public partial class About : System.Web.UI.Page { void Page_PreInit(Object sender, EventArgs e) { if(Session["masterpage"] != null) { this.MasterPageFile = (String) Session["masterpage"]; } } }

Note this code is in the Page_PreInit section of the Web Form(s), which will be merged with the Master Page.

The front end pages should look something like this:
Home.aspx

<%@ Page Language="C#" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Home" Title="The Home Page" %> <%@ MasterType virtualpath="~/Master1.master" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <span style="color: #ffffff"></span> <span style="color: #ffffff"></span><span style="color: #ffffff">Welcome to the website</span> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> <h1> Thank you for visiting our website.</h1> </asp:Content>

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Default.aspx

<%@ Page Language="C#" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" Title="About Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h1> <span style="color: #ffffff">About the site</span></h1> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> <h1>This is the about page</h1> </asp:Content>

The Master Pages should look something like this:

<form id="form1" runat="server"> <div> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%"> <tr> <td colspan="2" bgcolor="#ccffcc" height="48" valign="top"> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"> <Items> <asp:MenuItem NavigateUrl="Default.aspx" Text="Home" Value="Home"></asp:MenuItem> <asp:MenuItem NavigateUrl="About.aspx" Text="About" Value="About"></asp:MenuItem> </Items> </asp:Menu> <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Plain</asp:LinkButton> </td> </tr> <tr> <td bgcolor="#ccffcc" valign="top" width="48"> <asp:Image ID="Image1" runat="server" ImageUrl="images.jpg" Width="48px" /> </td> <td bgcolor="#ccffcc" valign="top"> <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> </asp:ContentPlaceHolder> </td> </tr> <tr> <td colspan="2" bgcolor="#ccffcc" height="48" valign="top">Copyright..</td> </tr> </table> </div> </form>

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!