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

2. 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.

3. 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

4. Example: Employ Florida Marketplace https://www.employflorida.com 4 Click Search for a Job

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

6. Search Result 6 New content in same frame.

7. Job Details Page 7 New content in same frame.

8. 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

9. 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

10. 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

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

12. 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

13. Adding a Master Pages Folder 13

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

15. Adding a Master Pages Folder 15

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

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

18. Initial Master Page 18

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

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

21. Add a Content Page 21

22. 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.

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

24. First Run 24

25. 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

26. Folder for Stylesheets 26

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

28. Download Styles.css http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ 060_MasterPages/http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ 060_MasterPages/ File Styles.css 28 Download to the new Styles directory.

29. Download Styles.css 29

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

31. Styles.css in MasterPageDemo 31 Look at Styles.css

32. Styles.css 32

33. 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

34. Page with Style in Chrome 34

35. More Content Let’s add some more substantial content. Google “lorem ipsum” http://www.lipsum.com/ 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

36. Text for MainContent 36

37. Text for Sidebar 37 In the master page

38. Page with More Content 38

39. 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

40. Add New Item to Web Site 40

41. Add New Item to Web Site 41

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

43. 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

44. 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

45. Add Links 45 Default.aspx

46. 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

47. Page3.aspx 47 Try it!

48. First Page in Chrome 48

49. 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

50. Add a New Item to the Styles Folder 50

51. Make it a Style Sheet 51 Set the Name.

52. Page2.css 52

53. Add Stylesheet Link 53 Page2.aspx

54. 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

55. Page3.aspx 55

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

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

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

59. 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