ASP.NET 4 Unleased - p 28 pot

LISTING 5.4 DefaultContent.aspx Content in the first column Content in the first column Content in the first column Content in the first column Content in the first column Content i

Trang 1

.ad

{

margin-top:20px;

}

.clear

{

clear:both;

}

</style>

<title>Default Master</title>

</head>

<body>

<asp:contentplaceholder

id=”ContentPlaceHolder1”

runat=”server”/>

</div>

<asp:ContentPlaceholder

runat=”server” />

</div>

<asp:ContentPlaceHolder

id=”contentAd”

Runat=”server”>

<asp:Image id=”imgAd”

ImageUrl=”~/BannerAd.gif”

CssClass=”ad”

AlternateText=”Advertisement for Superexpert ASP Workshops”

Runat=”server” />

</asp:ContentPlaceHolder>

</div>

</div>

</form>

</body>

</html>

Trang 2

The content page in Listing 5.4 uses the Master Page in Listing 5.3 It does not include a

Content control that corresponds to the contentAd control in the Master Page When you

open the page in a browser, the default banner advertisement displays

LISTING 5.4 DefaultContent.aspx

<%@ Page Language=”C#” MasterPageFile=”~/DefaultMaster.master” %>

<asp:Content

ID=”Content1”

ContentPlaceHolderID=”ContentPlaceHolder1”

Runat=”Server”>

Content in the first column

<br />Content in the first column

</asp:Content>

<asp:Content

ID=”Content2”

Runat=”Server”>

Content in the second column

<br />Content in the second column

</asp:Content>

Of course, you do have the option of adding a Content control that overrides the default

content contained in the contentAd control in the Master Page For example, you might

want to display different banner advertisements in different sections of your website

NOTE

You can nest ContentPlaceHolder controls in a Master Page If you do this, you have

the option of overriding greater or smaller areas of content in the Master Page

Nesting Master Pages

When building a large website, you might need to create multiple levels of Master Pages

For example, you might want to create a single sitewide Master Page that applies to all the

content pages in your website In addition, you might need to create multiple sectionwide

Master Pages that apply to only the pages contained in a particular section

Trang 3

You can nest Master Pages as many levels as you need For example, Listing 5.5 contains a

Master Page named Site.master, which displays a logo image and contains a single

content area It also contains sitewide navigation links

LISTING 5.5 Site.master

<%@ Master Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

html

{

background-color:DarkGreen;

font:14px Georgia,Serif;

}

.content

{

width:700px;

margin:auto;

border-style:solid;

background-color:white;

padding:10px;

}

.tabstrip

{

padding:3px;

border-top:solid 1px black;

border-bottom:solid 1px black;

}

.tabstrip a

{

font:14px Arial;

color:DarkGreen;

text-decoration:none;

}

.column

{

float:left;

padding:10px;

border-right:solid 1px black;

}

.rightColumn

{

float:left;

Trang 4

padding:10px;

}

.clear

{

clear:both;

}

</style>

<title>Site Master</title>

</head>

<body>

<asp:Image

id=”imgLogo”

ImageUrl=”~/Images/SiteLogo.gif”

AlternateText=”Website Logo”

<asp:HyperLink

id=”lnkProducts”

Text=”Products”

NavigateUrl=”~/Products.aspx”

<asp:HyperLink

id=”lnkServices”

Text=”Services”

NavigateUrl=”~/Services.aspx”

</div>

<asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”>

</asp:contentplaceholder>

</div>

</form>

</body>

</html>

The Master Pages in Listing 5.6 and Listing 5.7 are nested Master Pages Both Master Pages

include a MasterPageFile attribute that points to the Site.master Master Page

Trang 5

LISTING 5.6 SectionProducts.master

<%@ Master Language=”C#” MasterPageFile=”~/Site.master” %>

<asp:Content

id=”Content1”

Runat=”server”>

</div>

</asp:Content>

LISTING 5.7 SectionServices.master

<%@ Master Language=”C#” MasterPageFile=”~/Site.master” %>

<asp:Content

id=”Content1”

Runat=”server”>

</div>

</asp:Content>

Trang 6

The Master Page in Listing 5.6 creates a three-column page layout, and the Master Page in

Listing 5.7 creates a two-column page layout

The Products.aspx page in Listing 5.8 uses the SectionProducts.master Master Page

When you request the Products.aspx page, the contents of Site.master,

SectionProducts.master, and Products.aspx are combined to generate the rendered

output (see Figure 5.3)

FIGURE 5.3 Nesting Master Pages to display the Products.aspx page

LISTING 5.8 Products.aspx

<%@ Page Language=”C#” MasterPageFile=”~/SectionProducts.master” %>

<asp:Content

ID=”Content1”

Runat=”Server”>

Products, Products, Products

<br />Products, Products, Products

</asp:Content>

Trang 7

<asp:Content

ID=”Content2”

Runat=”Server”>

</asp:Content>

<asp:Content

ID=”Content3”

Runat=”Server”>

</asp:Content>

The Services.aspx page in Listing 5.9 uses the SectionService.master Master Page

When this page is opened in a browser, the contents of Site.master,

SectionServices.master, and Services.aspx combine to generate the rendered output

(see Figure 5.4)

LISTING 5.9 Services.aspx

<%@ Page Language=”C#” MasterPageFile=”~/SectionServices.master” Title=”Services” %>

<asp:Content

ID=”Content1”

Runat=”Server”>

Services, Services, Services

<br />Services, Services, Services

</asp:Content>

<asp:Content

ID=”Content2”

Runat=”Server”>

Trang 8

Services, Services, Services, Services, Services

<br />Services, Services, Services, Services, Services

</asp:Content>

Using Images and Hyperlinks in Master Pages

You must be careful when using relative URLs in a Master Page For example, you must be

careful when adding images and links to a Master Page Relative URLs are interpreted in

different ways, depending on whether they are used with HTML tags or ASP.NET controls

If you use a relative URL with an ASP.NET control, the URL is interpreted relative to the

Master Page For example, suppose that you add the following ASP.NET Image control to a

Master Page:

<asp:Image ImageUrl=”Picture.gif” Runat=”Server” />

The ImageUrl property contains a relative URL If the Master Page is in a folder named

MasterPages, the URL is interpreted like this:

/MasterPages/Picture.gif

FIGURE 5.4 Nesting Master Pages to display the Services.aspx pages

Trang 9

Even if a content page is in a completely different folder, the ImageUrl is interpreted

rela-tive to the folder that contains the Master Page and not relarela-tive to the content page

The situation is completely different in the case of HTML elements If an HTML element

such as an <img> or <a> tag includes a relative URL, the relative URL is interpreted relative

to the content page For example, suppose you add the following <img> tag to a Master

Page:

The src attribute contains a relative URL, which is interpreted relative to a particular

content page For example, if you request a content page in a folder named ContentPages,

the relative URL is interpreted like this:

/ContentPages/Picture.gif

Using relative URLs with HTML elements is especially tricky because the URL keeps

changing with each content page If you request content pages from different folders, the

relative URL changes You can solve this problem in three ways

First, you can replace all the HTML elements that use relative URLs with ASP.NET controls

An ASP.NET control automatically reinterprets a relative URL as relative to the Master

Page

NOTE

Relative URLs used by ASP.NET controls in a Master Page are automatically

reinterpret-ed relative to the Master Page This process of reinterpretation is callreinterpret-ed rebasing Only

ASP.NET control properties decorated with the UrlProperty attribute are rebased

Second, you can avoid relative URLs and use absolute URLs For example, if your

applica-tion is named MyApp, you can use the following <img> tag to display an image file located

in the MasterPages folder:

The disadvantage of using absolute URLs is that they make it difficult to change the

loca-tion of a web applicaloca-tion If the name of your applicaloca-tion changes, the absolute URLs no

longer work and you end up with a bunch of broken images and links

The final option is to use the Page.ResolveUrl() method to translate an

application-rela-tive URL into an absolute URL This approach is illustrated with the page in Listing 5.10

The Page.ResolveUrl() method is used with the <img> tag in the body of the Master Page,

which displays the website logo

Trang 10

LISTING 5.10 MasterPages\ImageMaster.master

<%@ Master Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<title>Image Master</title>

</head>

<body>

<div>

<img src=’<%=Page.ResolveUrl(“~/MasterPages/Logo.gif”) %>’ alt=”Website Logo” />

<asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server” />

</div>

</form>

</body>

</html>

The Master Page in Listing 5.10 is in a folder named MasterPages This folder also includes

an image named Logo.gif This image displays with the following HTML tag:

<img src=’<%=Page.ResolveUrl(“~/MasterPages/Logo.gif”) %>’ alt=”Website Logo” />

The Page.ResolveUrl() method converts the tilde into the correct path for the current

application directory

The content page in Listing 5.11 uses the Master Page and correctly displays the website

logo (see Figure 5.5):

LISTING 5.11 ImageContent.aspx

<%@ Page Language=”C#” MasterPageFile=”~/MasterPages/ImageMaster.master” %>

<asp:Content

ID=”Content1”

Runat=”Server”>

<h1>Content</h1>

</asp:Content>

Định dạng
Số trang	10
Dung lượng	580,48 KB