SlideShare a Scribd company logo
1 of 18
Slide 1 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
In this session, you will learn to:
Describe the concept of a master page
Describe the concept of a content page
Describe nested master pages
Design master pages
Configure content pages
Design nested master pages
Objectives
Slide 2 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Master pages:
Are ASP.NET files similar to ASP.NET Web Forms.
Define consistent, reusable layouts, code, and content that is
typically used by more than one Web page in a Web
application.
Have a file extension of .master.
Contain the @Master directive.
Do not represent complete Web pages. The content and
functionality is incorporated with other Web pages on the same
Web site at run time.
What Are Master Pages?
Slide 3 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Advantages of using master pages:
Allow centralization of the common functionality of Web pages.
Make it easy to create one set of controls and code and apply
the results to a set of pages.
Provide fine-grained control over the layout of Web pages.
Allow customization of master page from the individual content
pages.
What Are Master Pages? (Contd.)
Slide 4 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
ASP.NET includes a handler that prevents master pages
from being served directly to a browser.
When a Web page references a master page, ASP.NET:
1. Fetches the requested Web page.
2. Fetches the master page referenced by the requested Web
page.
3. Merges the content from the master page with that of the
requested Web page.
4. Sends the merged results to the browser.
What Are Master Pages? (Contd.)
Slide 5 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Designing a Master Page:
Master page typically includes one or more
ContentPlaceHolder controls identified by their ID
attributes.
ContentPlaceholder control provides a location where
content from referencing pages will be merged at run time.
HTML markup, HTML controls, and Web server controls
(outside the ContentPlaceHolder control) can also be
added to the page.
Any server-side code can also be added to the master page.
What Are Master Pages? (Contd.)
Slide 6 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
What Are Master Pages? (Contd.)
Content Place Holder
Control
Slide 7 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Content Pages:
Reference a master page for consistent layout, reusable code,
reusable content, and controls.
Enable you to create specific content that is included at run
time with the generic content from a master page.
Reference a master page by including a MasterPageFile
attribute in the @Page directive.
Contain page-specific content in Content controls. These
Content controls are merged at run time with corresponding
ContentPlaceholder controls on the referenced master
page.
What Are Content Pages?
Slide 8 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
What Are Content Pages? (Contd.)
Page-Specific Content
Slide 9 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
When a master page references another master page, the
referencing page is known as a child master, and the
referenced page is called the parent master.
A child master page references a parent master page by
including the MasterPageFile attribute in the @Master
directive.
A nested master page can include additional content within
its Content controls.
These Content controls correspond to
ContentPlaceHolder controls on the parent master.
Child master pages typically contain their own
ContentPlaceHolder controls that will be used by
content pages.
Nested Master Pages
Slide 10 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
To create a nested master page, the following three files
may be created:
Parent.master: Acts as a parent master file.
Child.master: Acts as a child master file that references the
Parent.master page.
Child.aspx: Acts as a child file that references the Child.master
page .
How to Create Nested Master Pages
Slide 11 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Parent.master file:
<%@ Master Language="C#" %>
<HTML>
<BODY>
----------Some Tags---------
<asp:ContentPlaceHolder ID="MainContent"
runat="server“ />
----------Some Tags---------
</BODY>
</HTML>
How to Create Nested Master Pages (Contd.)
Slide 12 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Child.master file:
<%@ Master Language="C#“
MasterPageFile="Parent.master"%>
<asp:Content id="Content1“
ContentPlaceholderID="MainContent"
runat="server">
--------------Some Tags--------
<asp:ContentPlaceHolder ID= "ChildContent"
runat="server" />
--------------Some Tags----------
<asp:ContentPlaceHolder ID="ChildFooter“
runat="server" />
-----------Some Tags------------
</asp:Content>
How to Create Nested Master Pages (Contd.)
Slide 13 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Child.aspx file:
<%@ Page Language="C#“
MasterPageFile="Child.Master"%>
<asp:Content id="pageContent"
ContentPlaceholderID="ChildContent"
runat="server">
----------Some Tags---------
</asp:Content>
<asp:Content id="footerContent"
ContentPlaceholderID="ChildFooter"
runat=server>
----------Some Tags---------
</asp:Content>
How to Create Nested Master Pages (Contd.)
Slide 14 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Problem Statement:
You are a developer in the Adventure Works organization, a
fictitious bicycle manufacturer. You have been asked to assist
in the development of the Business-to-Consumer (B2C) Web
application and a related Business-to-Employee (B2E) extranet
portal.
Decisions on the design of the application have already been
made. You have been asked to carry out a number of specific
tasks in order to implement various elements of this design. As
part of the first phase of the B2C development, you have been
asked to implement a hierarchy of master pages that enable
commonly used user interface elements to be defined in one
place and then reused in many Web pages throughout the site.
Demo: Creating a Common Layout by Using Master Pages
Slide 15 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
Solution:
You need to perform following tasks:
1. Design a Master Page
a. Open the Adventure Works Web site.
b. Create the TopLevel.master page.
c. Define the layout of the TopLevel.master page.
d. Write code for the TopLevel.master page.
Demo: Creating a Common Layout by Using Master Pages
(Contd.)
Slide 16 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
2. Add and Configure Content Pages
a. Add a new Contact.aspx Web page.
b. Define the layout of the new Contact.aspx Web page.
c. Add code to the Contact.aspx page.
d. Specify the master page for the existing Default.aspx Web page.
e. Programmatically access controls on the master page from the Default.aspx
content page.
f. Add preconfigured content Web pages to the Adventure Works Web site.
Demo: Creating a Common Layout by Using Master Pages
(Contd.)
Slide 17 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
3. Design Nested Master Pages
a. Add a nested master page.
b. Design the nested master page.
c. Add content pages for the nested master page.
d. Test the Adventure Works Web site.
e. Modify the TopLevel.master page.
Demo: Creating a Common Layout by Using Master Pages
(Contd.)
Slide 18 of 18Ver. 1.0
Developing Web Applications Using ASP.NET
In this session, you learned that:
Master pages are ASP.NET files with the .master extension.
Master pages define consistent, reusable layouts, code and
content for multiple Web pages.
Master pages are not sent to the browser directly.
Master page elements are merged with referencing Web pages
at run time.
Merged content is sent to the browser.
Content pages are Web pages that reference a master page.
Content pages include their own page-specific content that is
merged with the master page at run time.
A master page can reference another master page.
Summary

More Related Content

What's hot (20)

Web forms in ASP.net
Web forms in ASP.netWeb forms in ASP.net
Web forms in ASP.net
 
Asp.Net Tutorials
Asp.Net TutorialsAsp.Net Tutorials
Asp.Net Tutorials
 
14 asp.net session20
14 asp.net session2014 asp.net session20
14 asp.net session20
 
03 asp.net session04
03 asp.net session0403 asp.net session04
03 asp.net session04
 
02 asp.net session02
02 asp.net session0202 asp.net session02
02 asp.net session02
 
ASP.NET - Web Programming
ASP.NET - Web ProgrammingASP.NET - Web Programming
ASP.NET - Web Programming
 
Aspnet master pages_tutorial_10_cs
Aspnet master pages_tutorial_10_csAspnet master pages_tutorial_10_cs
Aspnet master pages_tutorial_10_cs
 
ASP.NET Web form
ASP.NET Web formASP.NET Web form
ASP.NET Web form
 
03 asp.net session04
03 asp.net session0403 asp.net session04
03 asp.net session04
 
How to build Android Chat App with Firebase for 2 hours?
How to build Android Chat App with Firebase for 2 hours?How to build Android Chat App with Firebase for 2 hours?
How to build Android Chat App with Firebase for 2 hours?
 
02 asp.net session02
02 asp.net session0202 asp.net session02
02 asp.net session02
 
Introduction to asp
Introduction to aspIntroduction to asp
Introduction to asp
 
ASP.NET 06 - Customizing Your Sites Appearance
ASP.NET 06 - Customizing Your Sites AppearanceASP.NET 06 - Customizing Your Sites Appearance
ASP.NET 06 - Customizing Your Sites Appearance
 
Firebase for the Web
Firebase for the WebFirebase for the Web
Firebase for the Web
 
05 asp.net session07
05 asp.net session0705 asp.net session07
05 asp.net session07
 
A View about ASP .NET and their objectives
A View about ASP .NET and their objectivesA View about ASP .NET and their objectives
A View about ASP .NET and their objectives
 
Creating Real-Time Data Mashups with Node.JS and Adobe CQ
Creating Real-Time Data Mashups with Node.JS and Adobe CQCreating Real-Time Data Mashups with Node.JS and Adobe CQ
Creating Real-Time Data Mashups with Node.JS and Adobe CQ
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013
 
Html5
Html5Html5
Html5
 
Walkthrough asp.net
Walkthrough asp.netWalkthrough asp.net
Walkthrough asp.net
 

Similar to 04 asp.net session05

16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23Vivek chan
 
11 asp.net session16
11 asp.net session1611 asp.net session16
11 asp.net session16Niit Care
 
Asp.Net 2.0 Presentation
Asp.Net 2.0 PresentationAsp.Net 2.0 Presentation
Asp.Net 2.0 Presentationsasidhar
 
12 asp.net session17
12 asp.net session1712 asp.net session17
12 asp.net session17Vivek chan
 
Overview of ASP.Net by software outsourcing company india
Overview of ASP.Net by software outsourcing company indiaOverview of ASP.Net by software outsourcing company india
Overview of ASP.Net by software outsourcing company indiaJignesh Aakoliya
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23Niit Care
 
Asp.net architecture
Asp.net architectureAsp.net architecture
Asp.net architectureIblesoft
 
02 asp.net session02
02 asp.net session0202 asp.net session02
02 asp.net session02Mani Chaubey
 
Foundation and PathwaysCOS10020 Creating Web Application.docx
Foundation and PathwaysCOS10020 Creating Web Application.docxFoundation and PathwaysCOS10020 Creating Web Application.docx
Foundation and PathwaysCOS10020 Creating Web Application.docxhanneloremccaffery
 
Introduction to asp.net
Introduction to asp.netIntroduction to asp.net
Introduction to asp.netSHADAB ALI
 
03 asp.net session04
03 asp.net session0403 asp.net session04
03 asp.net session04Mani Chaubey
 
5a329780735625624 ch10
5a329780735625624 ch105a329780735625624 ch10
5a329780735625624 ch10harkesh singh
 
Programming web application
Programming web applicationProgramming web application
Programming web applicationaspnet123
 
01 asp.net session01
01 asp.net session0101 asp.net session01
01 asp.net session01Vivek chan
 

Similar to 04 asp.net session05 (20)

Asp.net w3schools
Asp.net w3schoolsAsp.net w3schools
Asp.net w3schools
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23
 
11 asp.net session16
11 asp.net session1611 asp.net session16
11 asp.net session16
 
Asp.Net 2.0 Presentation
Asp.Net 2.0 PresentationAsp.Net 2.0 Presentation
Asp.Net 2.0 Presentation
 
Master page in Asp.net
Master page in Asp.netMaster page in Asp.net
Master page in Asp.net
 
12 asp.net session17
12 asp.net session1712 asp.net session17
12 asp.net session17
 
Overview of ASP.Net by software outsourcing company india
Overview of ASP.Net by software outsourcing company indiaOverview of ASP.Net by software outsourcing company india
Overview of ASP.Net by software outsourcing company india
 
Master page
Master pageMaster page
Master page
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23
 
Asp.net architecture
Asp.net architectureAsp.net architecture
Asp.net architecture
 
02 asp.net session02
02 asp.net session0202 asp.net session02
02 asp.net session02
 
Master pages
Master pagesMaster pages
Master pages
 
Foundation and PathwaysCOS10020 Creating Web Application.docx
Foundation and PathwaysCOS10020 Creating Web Application.docxFoundation and PathwaysCOS10020 Creating Web Application.docx
Foundation and PathwaysCOS10020 Creating Web Application.docx
 
Introduction to asp.net
Introduction to asp.netIntroduction to asp.net
Introduction to asp.net
 
03 asp.net session04
03 asp.net session0403 asp.net session04
03 asp.net session04
 
5a329780735625624 ch10
5a329780735625624 ch105a329780735625624 ch10
5a329780735625624 ch10
 
Programming web application
Programming web applicationProgramming web application
Programming web application
 
01 asp.net session01
01 asp.net session0101 asp.net session01
01 asp.net session01
 
Creating web form
Creating web formCreating web form
Creating web form
 
Creating web form
Creating web formCreating web form
Creating web form
 

04 asp.net session05

  • 1. Slide 1 of 18Ver. 1.0 Developing Web Applications Using ASP.NET In this session, you will learn to: Describe the concept of a master page Describe the concept of a content page Describe nested master pages Design master pages Configure content pages Design nested master pages Objectives
  • 2. Slide 2 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Master pages: Are ASP.NET files similar to ASP.NET Web Forms. Define consistent, reusable layouts, code, and content that is typically used by more than one Web page in a Web application. Have a file extension of .master. Contain the @Master directive. Do not represent complete Web pages. The content and functionality is incorporated with other Web pages on the same Web site at run time. What Are Master Pages?
  • 3. Slide 3 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Advantages of using master pages: Allow centralization of the common functionality of Web pages. Make it easy to create one set of controls and code and apply the results to a set of pages. Provide fine-grained control over the layout of Web pages. Allow customization of master page from the individual content pages. What Are Master Pages? (Contd.)
  • 4. Slide 4 of 18Ver. 1.0 Developing Web Applications Using ASP.NET ASP.NET includes a handler that prevents master pages from being served directly to a browser. When a Web page references a master page, ASP.NET: 1. Fetches the requested Web page. 2. Fetches the master page referenced by the requested Web page. 3. Merges the content from the master page with that of the requested Web page. 4. Sends the merged results to the browser. What Are Master Pages? (Contd.)
  • 5. Slide 5 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Designing a Master Page: Master page typically includes one or more ContentPlaceHolder controls identified by their ID attributes. ContentPlaceholder control provides a location where content from referencing pages will be merged at run time. HTML markup, HTML controls, and Web server controls (outside the ContentPlaceHolder control) can also be added to the page. Any server-side code can also be added to the master page. What Are Master Pages? (Contd.)
  • 6. Slide 6 of 18Ver. 1.0 Developing Web Applications Using ASP.NET What Are Master Pages? (Contd.) Content Place Holder Control
  • 7. Slide 7 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Content Pages: Reference a master page for consistent layout, reusable code, reusable content, and controls. Enable you to create specific content that is included at run time with the generic content from a master page. Reference a master page by including a MasterPageFile attribute in the @Page directive. Contain page-specific content in Content controls. These Content controls are merged at run time with corresponding ContentPlaceholder controls on the referenced master page. What Are Content Pages?
  • 8. Slide 8 of 18Ver. 1.0 Developing Web Applications Using ASP.NET What Are Content Pages? (Contd.) Page-Specific Content
  • 9. Slide 9 of 18Ver. 1.0 Developing Web Applications Using ASP.NET When a master page references another master page, the referencing page is known as a child master, and the referenced page is called the parent master. A child master page references a parent master page by including the MasterPageFile attribute in the @Master directive. A nested master page can include additional content within its Content controls. These Content controls correspond to ContentPlaceHolder controls on the parent master. Child master pages typically contain their own ContentPlaceHolder controls that will be used by content pages. Nested Master Pages
  • 10. Slide 10 of 18Ver. 1.0 Developing Web Applications Using ASP.NET To create a nested master page, the following three files may be created: Parent.master: Acts as a parent master file. Child.master: Acts as a child master file that references the Parent.master page. Child.aspx: Acts as a child file that references the Child.master page . How to Create Nested Master Pages
  • 11. Slide 11 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Parent.master file: <%@ Master Language="C#" %> <HTML> <BODY> ----------Some Tags--------- <asp:ContentPlaceHolder ID="MainContent" runat="server“ /> ----------Some Tags--------- </BODY> </HTML> How to Create Nested Master Pages (Contd.)
  • 12. Slide 12 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Child.master file: <%@ Master Language="C#“ MasterPageFile="Parent.master"%> <asp:Content id="Content1“ ContentPlaceholderID="MainContent" runat="server"> --------------Some Tags-------- <asp:ContentPlaceHolder ID= "ChildContent" runat="server" /> --------------Some Tags---------- <asp:ContentPlaceHolder ID="ChildFooter“ runat="server" /> -----------Some Tags------------ </asp:Content> How to Create Nested Master Pages (Contd.)
  • 13. Slide 13 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Child.aspx file: <%@ Page Language="C#“ MasterPageFile="Child.Master"%> <asp:Content id="pageContent" ContentPlaceholderID="ChildContent" runat="server"> ----------Some Tags--------- </asp:Content> <asp:Content id="footerContent" ContentPlaceholderID="ChildFooter" runat=server> ----------Some Tags--------- </asp:Content> How to Create Nested Master Pages (Contd.)
  • 14. Slide 14 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Problem Statement: You are a developer in the Adventure Works organization, a fictitious bicycle manufacturer. You have been asked to assist in the development of the Business-to-Consumer (B2C) Web application and a related Business-to-Employee (B2E) extranet portal. Decisions on the design of the application have already been made. You have been asked to carry out a number of specific tasks in order to implement various elements of this design. As part of the first phase of the B2C development, you have been asked to implement a hierarchy of master pages that enable commonly used user interface elements to be defined in one place and then reused in many Web pages throughout the site. Demo: Creating a Common Layout by Using Master Pages
  • 15. Slide 15 of 18Ver. 1.0 Developing Web Applications Using ASP.NET Solution: You need to perform following tasks: 1. Design a Master Page a. Open the Adventure Works Web site. b. Create the TopLevel.master page. c. Define the layout of the TopLevel.master page. d. Write code for the TopLevel.master page. Demo: Creating a Common Layout by Using Master Pages (Contd.)
  • 16. Slide 16 of 18Ver. 1.0 Developing Web Applications Using ASP.NET 2. Add and Configure Content Pages a. Add a new Contact.aspx Web page. b. Define the layout of the new Contact.aspx Web page. c. Add code to the Contact.aspx page. d. Specify the master page for the existing Default.aspx Web page. e. Programmatically access controls on the master page from the Default.aspx content page. f. Add preconfigured content Web pages to the Adventure Works Web site. Demo: Creating a Common Layout by Using Master Pages (Contd.)
  • 17. Slide 17 of 18Ver. 1.0 Developing Web Applications Using ASP.NET 3. Design Nested Master Pages a. Add a nested master page. b. Design the nested master page. c. Add content pages for the nested master page. d. Test the Adventure Works Web site. e. Modify the TopLevel.master page. Demo: Creating a Common Layout by Using Master Pages (Contd.)
  • 18. Slide 18 of 18Ver. 1.0 Developing Web Applications Using ASP.NET In this session, you learned that: Master pages are ASP.NET files with the .master extension. Master pages define consistent, reusable layouts, code and content for multiple Web pages. Master pages are not sent to the browser directly. Master page elements are merged with referencing Web pages at run time. Merged content is sent to the browser. Content pages are Web pages that reference a master page. Content pages include their own page-specific content that is merged with the master page at run time. A master page can reference another master page. Summary

Editor's Notes

  1. Provide the example code of @Master directive, Explain how layout, code and content can be reused. Also tell the alternate activity used for the same purpose
  2. Discuss the advantages with examale
  3. Explain the sequence, Define the role of ContentPlaceHoder with an example
  4. Explain @page directive with example, explain the relationship between Content control and ContentPlaceholder Control
  5. Explain @page directive with example, explain the relationship between Content control and ContentPlaceholder Control
  6. Explain @page directive with example, explain the relationship between Content control and ContentPlaceholder Control
  7. Explain @page directive with example, explain the relationship between Content control and ContentPlaceholder Control
  8. Explain with the example given in CG