Professional ASP.NET 3.5 in C# and Visual Basic Part 31 ppt

When an end user requests a content page in the browser, the event ordering is as follows: ❑ Master page child controls initialization::All server controls contained within the master pa

Listing 5-18 illustrates how you can work with this main master from a submaster file.

Listing 5-18: The submaster page

ReutersEurope.master

<%@ Master Language="VB" MasterPageFile="~/ReutersMain.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderId="ContentPlaceHolder1"

runat="server">

<asp:Label ID="Label1" runat="server" BackColor="#E0E0E0" BorderColor="Black"

BorderStyle="Dotted" BorderWidth="2px" Font-Size="Large">

Reuters Europe </asp:Label><br /><hr />

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</asp:Content>

Looking this page over, you can see that it isn’t much different than a typical.aspxpage that makes

use of a master page TheMasterPageFileattribute is used just the same, but instead of using the@Page directive, the@Masterpage directive is used Then theContent2control also uses the

ContentPlace-HolderIdattribute of the Content control This attribute is tying this content area to the content area

ContentPlaceHolder1, which is defined in the main master page

One new feature of ASP.NET 3.5 is the ability to view nested master pages directly in the Design view

of Visual Studio 2008 The previous Visual Studio 2005 would actually throw an error when trying to

present a nested master page Figure 5-15 shows a nested master page in the Design view of Visual

Studio 2008

Within the submaster page presented in Listing 5-18, you can also now use as many ContentPlaceHolder server controls as you want Any content page that uses this master can use these controls Listing 5-19 shows a content page that uses the submaster pageReutersEurope.master

Listing 5-19: The content page

Default.aspx

<%@ Page Language="VB" MasterPageFile="~/ReutersEurope.master" %>

<asp:Content ID="Content1" ContentPlaceHolderId="ContentPlaceHolder1"

runat="server">

Hello World

</asp:Content>

As you can see, in this content page the value of theMasterPageFileattribute in thePagedirective

is the submaster page that you created Inheriting theReutersEuropemaster page actually combines

both master pages (ReutersMain.masterandReutersEurope.master) into a single master page

The Content control in this content page points to the content area defined in the submaster page as

well You can see this in the code with the use of theContentPlaceHolderIdattribute In the end, you

get a very non-artistic page, as shown in Figure 5-16

Figure 5-15

Figure 5-16

As you can see, creating a content page that uses a submaster page works pretty well

Container- Specific Master Pages

In many cases, developers are building applications that will be viewed in a multitude of different con-tainers Some viewers may view the application in Microsoft Internet Explorer and some might view it

using Opera or Netscape Navigator And still other viewers may call up the application on a Pocket PC

or Nokia cell phone

For this reason, ASP.NET allows you to use multiple master pages within your content page Depending

on the viewing container used by the end user, the ASP.NET engine pulls the appropriate master file

Therefore, you want to build container-specific master pages to provide your end users with the best

possible viewing experience by taking advantage of the features that a specific container provides The

capability to use multiple master pages is demonstrated in Listing 5-20

Listing 5-20: A content page that can work with more than one master page

<%@ Page Language="VB" MasterPageFile="~/Wrox.master"

Mozilla:MasterPageFile="~/WroxMozilla.master"

Opera:MasterPageFile="~/WroxOpera.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderId="ContentPlaceHolder1"

runat="server">

Hello World

</asp:Content>

As you can see from this example content page, it can work with three different master page files The

first one uses the attributeMasterPageFile This is the default setting used for any page that doesn’t

fit the criteria for any of the other options This means that if the requestor is not a Mozilla or Opera

browser, the default master page,Wrox.master, is used However, if the requestor is an Opera browser, WroxOpera.masteris used instead This is illustrated in Figure 5-17

Figure 5-17

You can find a list of available browsers on the production server where the application will be hosted

atC:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers Some of the available options

include the following:

❑ cassio

❑ Default

❑ ericsson

❑ generic

❑ Jataayu

❑ mozilla

❑ netscape

❑ panasonic

Of course, you can also add any additional.browserfiles that you deem necessary

Event Ordering

When you work with master pages and content pages, both can use the same events (such as theLoad

event) Be sure you know which events come before others You are bringing two classes together to

create a single page class, and a specific order is required When an end user requests a content page in

the browser, the event ordering is as follows:

❑ Master page child controls initialization::All server controls contained within the master page

are first initialized

❑ Content page child controls initialization::All server controls contained in the content page are

initialized

❑ Master page initialization::The master page itself is initialized

❑ Content page initialization::The content page is initialized

❑ Content page load::The content page is loaded (this is thePage_Loadevent followed by the

Page_LoadCompleteevent)

❑ Master page load::The master page is loaded (this is also thePage_Loadevent followed by the

Page_LoadCompleteevent)

❑ Master page child controls load::The server controls on the master page are loaded onto

the page

❑ Content page child controls load::The server controls on the content page are loaded onto

the page

Pay attention to this event ordering when building your applications If you want to use server

con-trol values that are contained on the master page within a specific content page, for example, you can’t retrieve the values of these server controls from within the content page’sPage_Loadevent This is

because this event is triggered before the master page’sPage_Loadevent This problem prompted the

creation of the newPage_LoadCompleteevent The content page’sPage_LoadCompleteevent follows the master page’sPage_Loadevent You can, therefore, use this ordering to get at values from the master

page even though it isn’t populated when the content page’sPage_Loadevent is triggered

Caching with Master Pages

When working with typical.aspxpages, you can apply output caching to the page by using the following construct (or variation thereof):

<%@ OutputCache Duration="10" Varybyparam="None" %>

This caches the page in the server’s memory for 10 seconds Many developers use output caching to

increase the performance of their ASP.NET pages It also makes a lot of sense for use on pages with data that doesn’t become stale too quickly

How do you go about applying output caching to ASP.NET pages when working with master pages?

First, you cannot apply caching to just the master page You cannot put theOutputCachedirective on the master page itself If you do so, on the page’s second retrieval, you get an error because the application cannot find the cached page

To work with output caching when using a master page, stick theOutputCachedirective in the content page This caches both the contents of the content page as well as the contents of the master page (remem-ber, it is just a single page at this point) TheOutputCachedirective placed in the master page does not

cause the master page to produce an error, but it will not be cached This directive works in the content page only

ASP.NET AJAX and Master Pages

Many of the larger ASP.NET applications today make use of master pages and the power this technology provides in the ability of building templated Web sites ASP.NET 3.5 introduces ASP.NET AJAX as part

of the default install and you will find that master pages and Ajax go together quite well

ASP.NET AJAX is covered in Chapter 19 of this book.

Every page that is going to make use of AJAX capabilities will have to have the new ScriptManager

control on the page If the page that you want to use AJAX with is a content page making use of a master page, then you are going to have to place the ScriptManager control on the master page itself

Note that you can only have one ScriptManager on a page.

ASP.NET 3.5 makes this process easy Opening up the Add New Item dialog, you will notice that

in addition to the Master Page option, you will also find an AJAX Master Page option as illustrated

in Figure 5-18

Figure 5-18

Selecting this option produces a page like the one presented in Listing 5-21

Listing 5-21: The AJAX master page

<%@ Master Language="VB" %>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</div>

</form>

</body>

</html>

As you can see from Listing 5-21, the only real difference between this AJAX master page and the stan-dard master page is the inclusion of the ScriptManager server control You are going to want to use this technique if your master page includes any AJAX capabilities whatsoever, even if the content page makes

no use of AJAX at all

The ScriptManager control on the master page also is beneficial if you have common JavaScript items to place on all the pages of your Web application For instance, Listing 5-22 shows how you could easily

include JavaScript on each page through the master page

Listing 5-22: Including scripts through your master page

<%@ Master Language="VB" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Path="myScript.js" />

</Scripts>

</asp:ScriptManager>

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>

In this example, themyScript.jsfile will now be included on every content page that makes use of this AJAX master page If your content page also needs to make use of Ajax capabilities, then you simply

cannot add another ScriptManager control to the page Instead, the content page will need to make use

of the ScriptManager control that is already present on the master page

That said, if your content page needs to add additional items to the ScriptManager control, it is able to

access this control on the master page using the ScriptManagerProxy server control Using the

Script-ManagerProxy control gives you the ability to add any items to the ScriptManager that are completely

specific to the instance of the content page that makes the inclusions

For instance, Listing 5-23 shows how a content page would add additional scripts to the page through

the ScriptManagerProxy control

Listing 5-23: Adding additional items using the ScriptManagerProxy control

<%@ Page Language="VB" MasterPageFile="~/AjaxMaster.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"

Runat="Server">

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

<Scripts>

<asp:ScriptReference Path="myOtherScript.js" />

</Scripts>

</asp:ScriptManagerProxy>

</asp:Content>

In this case, this content page is using the ScriptManagerProxy control to add an additional script to the

page This ScriptManagerProxy control works exactly the same as the main ScriptManager control except

that it is meant for content pages making use of a master page The ScriptManagerProxy control will then

interact with the page’s ScriptManager control to perform the actions necessary

Summar y

When you create applications that use a common header, footer, or navigation section on pretty much

every page of the application, master pages are a great solution Master pages are easy to implement and

enable you to make changes to each and every page of your application by changing a single file Imagine

how much easier this makes managing large applications that contain thousands of pages

This chapter described master pages in ASP.NET and explained how you build and use master pages

within your Web applications In addition to the basics, the chapter covered master page event ordering,

caching, and specific master pages for specific containers In the end, when you are working with

tem-plated applications, master pages should be your first option — the power of this approach is immense

Themes and Skins

When you build a Web application, it usually has a similar look-and-feel across all its pages Not

too many applications are designed with each page dramatically different from the next Generally,

for your applications, you use similar fonts, colors, and server control styles across all the pages

You can apply these common styles individually to each and every server control or object on

each page, or you can use a capability provided by ASP.NET 3.5 to centrally specify these styles

All pages or parts of pages in the application can then access them

Themes are the text-based style definitions in ASP.NET 3.5 that are the focus of this chapter.

Using ASP.NET Themes

Themes are similar to Cascading Style Sheets (CSS) in that they enable you to define visual styles for

your Web pages Themes go further than CSS, however, in that they allow you to apply styles,

graphics, and even CSS files themselves to the pages of your applications You can apply ASP.NET

themes at the application, page, or server control level

Applying a Theme to a Single ASP.NET Page

In order to see how to use one of these themes, create a basic page, which includes some text, a text

box, a button, and a calendar, as shown in Listing 6-1

Listing 6-1: An ASP.NET page that does not use themes

<%@ Page Language="VB" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>STLNET</title>

Continued

<body>

<form id="form1" runat="server">

<h1>St Louis NET User Group</h1><br />

<asp:Textbox ID="TextBox1" runat="server" /><br />

<br />

<asp:Calendar ID="Calendar1" runat="server" /><br />

<asp:Button ID="Button1" runat="server" Text="Button" />

</form>

</body>

</html>

This simple page shows some default server controls that appear just as you would expect, but that you

can change with one of these new ASP.NET themes When this theme-less page is called in the browser,

it should look like Figure 6-1

Figure 6-1

You can instantly change the appearance of this page without changing the style of each server control

on the page From within thePagedirective, you simply apply an ASP.NET theme that you have either

built (shown later in this chapter) or downloaded from the Internet:

<%@ Page Language="VB" Theme="SmokeAndGlass" %>

Adding theThemeattribute to thePagedirective changes the appearance of everything on the page that

is defined in an exampleSmokeAndGlasstheme file Using this theme, when we invoked the page in the

browser, we got the result shown in Figure 6-2