1111 Master Pages Beginning ASP.NET in C# and VB Chapter 6

2222 Objectives You will be able to Use ASP.NET Master Pages to provide a consistent appearance to multiple pages of a web site. Apply page specific styles to pages that use the same master page.

Why Master Pages? A convenient way to specify common elements to multiple pages in a web site. Headers Footer Sidebars Updating a master page automatically updates all pages that use that master page. 3

Example: Employ Florida Marketplace 4 Click Search for a Job

Quick Job Search 5 Enter ASP.NET and click Search Left Nav Header Footer

Search Result 6 New content in same frame.

Job Details Page 7 New content in same frame.

Master Page Similar to a normal ASP.NET page EXCEPT Contains a placeholder to be filled in from various content pages. Can’t be requested directly. Tags along with content pages Identified as master rather than page. File name extension is.master rather than.aspx Can have multiple content placeholders Each with a unique ID 8

Content Page The page requested by browsers. Normal ASPX.NET page minus the parts provided by the master page. Identifies its master page by file name. Has tags with html to fill the placeholders in the master page. Each identifies the placeholder that it is to fill. 9

When a content page is requested Content page is merged with its master page on the server. Result processed like a normal.aspx page. Result is rendered to the browser as HTML. Let’s look at an example. 10

Master Page Example In Visual Studio, create an empty ASPX web site. Name MasterPageDemo 11

Master Page Example Master pages are normally in their own folder at the top level of the web site hierarchy. Typically called “MasterPages” Right click on MasterPageDemo in Solution Explorer and select Add > New Folder. 12

Adding a Master Pages Folder 13

Adding a Master Pages Folder 14 Rename the new folder MasterPages.

Adding a Master Pages Folder 15

Adding a Master Page Right click on MasterPages (the folder name) in Solution Explorer and select Add, then Add New Item 16

Adding a Master Page In the middle panel, scroll down and select Master Page. Set the name to Demo.master 17

Initial Master Page 18

Add Some Master Page Content Set the title to “Master Page Demo” Add some dummy content as shown on the next slide 19

Add Some Master Page Content Master Page Demo Header Goes Here Sidebar Goes Here Footer Goes Here 20

Add a Content Page 21

Initial Content Page Default.aspx is created with its MasterPageFile specified and tags corresponding to each ContentPlaceHolder in the master page. 22 Set Default.aspx as the start page in Solution Explorer.

Add Some Content 23 Press F5, or click the “Play” button, to run the app.

First Run 24

Add Some Style Click the “Stop” button, or press Shift-F5 Note that closing the browser does not stop the app. It’s still waiting for more requests until we stop it. We need style rules to display the header, footer, and sidebar correctly. Add a folder for css files. Right click on MasterPageDemo in Solution Explorer and select New Folder. 25

Folder for Stylesheets 26

Rename the New Folder “Styles” 27 Just a meaningful name. Not a keyword.

Download Styles.css 060_MasterPages/ 060_MasterPages/ File Styles.css 28 Download to the new Styles directory.

Download Styles.css 29

Add Styles.css to the Website Add Styles.css to the Styles folder in SolutionExplorer 30

Styles.css in MasterPageDemo 31 Look at Styles.css

Styles.css 32

Add Stylesheet Link Add a link to the stylesheet to the section of the master page. View the page in a browser, Experiment with window size. 33

Page with Style in Chrome 34

More Content Let’s add some more substantial content. Google “lorem ipsum” Replace “Hello, World!” in Default.aspx with a lorem ipsum paragraph. Put some more lorem ipsum into the below “Sidebar Goes Here” in Demo.master. 35

Text for MainContent 36

Text for Sidebar 37 In the master page

Page with More Content 38

More Pages Now let’s add some more pages using the same master page. Include “Next Page” and “Previous Page” links with the page content. 39

Add New Item to Web Site 40

Add New Item to Web Site 41

Set Master Page for Page2.aspx 42 Do the same for Page3.aspx

Page 2 Content Page 2 Page 2 Line 2 Page 2 Line 3 Page 2 Line 4 Page 2 Line 5 Page 2 Line 6 Page 2 Line 7 Page 2 Line 8 Page 2 Line 9 Page 2 Line 10 43

Page 3 Content Page 3 Page 3 Line 2 Page 3 Line 3 Page 3 Line 4 Page 3 Line 5 Page 3 Line 6 Page 3 Line 7 Page 3 Line 8 Page 3 Line 9 Page 3 Line 10 44

Add Links 45 Default.aspx

Page 2 Page 2 Line 2 Page 2 Line 3 Page 2 Line 4 Page 2 Line 5 Page 2 Line 6 Page 2 Line 7 Page 2 Line 8 Page 2 Line 9 Page 2 Line 10 Previous Page Next Page Page2.aspx 46

Page3.aspx 47 Try it!

First Page in Chrome 48

Page Specific Style Each page can have its own styles, in addition to those from Styles.Styles.css. Add a stylesheet link to the first Content section of the.aspx page. Let’s add page specific stylesheets for Page1 and Page2. Set different fonts for the content. 49

Add a New Item to the Styles Folder 50

Make it a Style Sheet 51 Set the Name.

Page2.css 52

Add Stylesheet Link 53 Page2.aspx

Add a Stylesheet for Page3 Follow the same steps to add a page specific stylesheet for Page3. Page3.css #MainContent { font-family: "Freestyle Script" ; font-size:x-large; } 54

Page3.aspx 55

Default.aspx 56 font-family:Arial; font-size:x-large;

Page2.aspx 57 font-family:Courier New; font-size:small;

Page3.aspx 58 font-family:"Freestyle Script"; font-size:x-large;

Summary Master pages permit us to create content that is contained in multiple pages. Typically provides a "frame" for content. Often provides style rules. Each content page can provide its own stylesheet, which can override style rules in the master page. 59