Now that I have my Master Page defined, I can go ahead and
build pages using it. To build one, right click on the Project and choose “Add
New Item”, and select the “Web Form” item:
Figure 5
Notice that I’ve selected the “Select master page” checkbox
near the bottom of the dialog. This tells Visual Web Developer that you want
to have this new page use a Master Page. When you click the “add” button it
will then ask you to pick the Master Page to use:
Figure 6
When I select the “Site.Master” file we defined above, it
will create a new Default.aspx file like so:
Listing 2
<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" title="Untitled Page" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
Visual Web Developer has automatically added an
<asp:content> control for the “MainContent” contentplaceholder we defined
earlier (note the “ContentPlaceHolderId attribute defines which contentplaceholder
we want to override). I can then fill this content region in with the unique
content I want to add to the page:
Listing 3
<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" title="Home" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="MainContent" Runat="Server">
<h1>Welcome to the Northwind Data Samples Site</h1>
<p>This site is being built as part of a set of tutorials that show off some of
the new data access and databinding features in ASP.NET 2.0 and Visual Web Developer.</p>
<p>Overtime, it will include a host of samples that demonstrate: building a DAL (data access layer)
using strongly typed TableAdapters and DataTables, master details, filtering, sorting,
paging, 2-way data-binding, editing, insertion, deletion, hierarchical data browsing,
hierarchical drill-down, optimistic concurrency, and more. </p>
<p>Please subscribe to <a href="http://weblogs.asp.net/scottgu">http://weblogs.asp.net/scottgu</a>
to follow along as they are published.</p>
</asp:Content>
Note that the page will automatically pick up the CSS
stylesheet from the master-page (ASP.NET will also automatically “rebase” the
CSS url when the .aspx page is in a sub-directory – so you don’t have to worry
about fully qualifying the style-sheet or doing weird “../” hacks).
Note also that I have set the “Title” attribute on the
<%@ Page %> directive to “Home”. This attribute allows me to
declaratively provide the page title, even though the <head> element is
defined within our Master Page.
When I switch into design-view on the page, Visual Web
Developer will automatically show me a merged view of the page that combines
both the Master Page and deriving Page:
Figure 7
ASP.NET will also merge the content together at runtime –
and send down a single html page when a browser requests this page. The beauty
of this model is that the Master Page layout is defined in one single place –
so if I need to make a change I can update one file, and have every file that
is based on it within the site immediately update.
