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
database:
Figure 2
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”:
Figure 3
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:
Listing 1
<%@ Master Language="VB"CodeFile="Site.master.vb" Inherits="Site" %>
<!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>Northwind Data Samples</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="wrapper">
<form id="Form1"runat="server">
<div id="header">
<span class="title">Northwind Data Tutorials</span>
<span class="breadcrumb">Todo: Breadcrumb will go here...</span>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="navigation">
Todo: Menu will go here...
</div>
</form>
</div>
<div id="footer">
<a href="http://weblogs.asp.net/scottgu">http://weblogs.asp.net/scottgu</a>
</div>
</body>
</html>
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:
Figure 4
