Below is the basic site structure we were left with after
building our data acess layer for the Northwinds database in my previous
blog post. It has a strongly typed DAL that goes against the Northwinds
What I want to-do now is add a Master Page to the site.
Master Pages is a new feature in ASP.NET 2.0 that enables me to define a common
layout structure and look and feel that I can easily apply to multiple (or all)
pages across a site/app.
To add a Master Page, right click on the project and choose
“Add New Item”. Pick the Master Page Template from the “Add New Item” dialog
and name it “Site.Master”:
I want my site to use a CSS based layout approach. As such,
I am using <div> elements to organize the structure (as opposed to
<table> elements). Here is the HTML I added:
<%@ Master Language="VB"CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<title>Northwind Data Samples</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<span class="title">Northwind Data Tutorials</span>
<span class="breadcrumb">Todo: Breadcrumb will go here...</span>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
Todo: Menu will go here...
Notice the <asp:contentplaceholder> control that is in
the middle <div> element. This is a new ASP.NET 2.0 control that I can
use to define regions of the master template that can be “filled-in” or
replaced by pages that use this master. You can have any number of
<asp:ContentPlaceHolder> controls you want within a master-page – all you
need to-do is make sure that each has a unique “id” value. For the sample
above I’ve added one <asp:contentplaceholder> and named it “MainContent”
(since it will be where pages on the site fill in their content).
I am also then using an external CSS stylesheet
(“stylesheet.css”) to define the CSS for the page. When in design-view the
Master Page looks like this: