7/30/2019 ASP.net Session 05
1/32
Slide 1 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
In this session, you will learn to:
Work with themes
Work with master pages
Work with site maps
Work with navigation controls
Objectives
7/30/2019 ASP.net Session 05
2/32
Slide 2 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Problem Statement:
After looking at the Home page and the AboutUs page, the
team leader appreciates your creativity and suggests you to
provide a consistent appearance to all the Web pages on the
website. To implement the team leaders suggestion, you
decide to create a theme and apply it to all the Web pages onthe website. The theme should apply a consistent appearance
to all the Button controls placed on the website.
Activity 3.1: Implementing Themes
7/30/2019 ASP.net Session 05
3/32
Slide 3 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Solution:
To create and implement the theme to the Web pages, you
need to perform the following tasks:
1. Create a theme.
2. Apply the theme.
3. Verify the theme.
Activity 3.1: Implementing Themes(Contd.)
7/30/2019 ASP.net Session 05
4/32
Slide 4 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
A website contains multiple Web pages connected to each
other.
There are certain components that need to be present
across all the Web pages on the website.
ASP.NET provides you with the master pages feature, whichenables you to create a page layout that you can use with
selected or all Web pages on your website.
Master pages:
Are used to create a consistent look and feel for your website.
Can contain static text, HTML elements, and server controls.Define the structure and common ingredients of the content
pages.
Working with Master Pages
7/30/2019 ASP.net Session 05
5/32
Slide 5 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
The file extension of master pages is .master.
You cannot view master pages directly on a browser.
In order to view master pages on a browser, they must be
used by other Web pages, known as content pages.
The master page in ASP.NET contains a special @ Masterdirective, as shown in the following code snippet:
In addition to the @ Master directive, the master page
contains the following elements:HTML or ASP.NET elements
ContentPlaceHolder controls
Working with Master Pages (Contd.)
7/30/2019 ASP.net Session 05
6/32
Slide 6 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Once you have created the master page, you need to
connect it to the content pages to standardize the layout of
the website.
To bind a master page with the content page, you need toinclude the MasterPageFile attribute in the @ Page
directive of the content page.
In addition to the MasterPageFile attribute, the @ Page
directive of the content page contains another attribute,Title.
The master page file contains the tag within the tag.
If a title is specified in the master page, it will also be
displayed in the content page because the content page
cannot modify the contents of the master page.
Connecting Master Pages and Content Pages
7/30/2019 ASP.net Session 05
7/32Slide 7 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
The title specified in the master page can be overridden inthe content page by the using the Title attribute.
The source code of the content page is different from that of
a normal page.
The content page:Cannot define anything that is already defined in the masterpage such as the section, the root element,
and the element.
Can supply a Content tag that corresponds to the
ContentPlaceHolder tag in the master page.
The Content tag is the place where you can insert the
content for the content page.
Connecting Master Pages and Content Pages (Contd.)
7/30/2019 ASP.net Session 05
8/32Slide 8 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
The following figure shows how the placeholder content for
the master page is supplied by a content page.
Connecting Master Pages and Content Pages (Contd.)
7/30/2019 ASP.net Session 05
9/32Slide 9 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Master pages are used to standardize the look and feel of
all the Web pages on a website.
However, sometimes it is required that some of the Web
pages on a website should follow certain standard features
in addition to the features provided by the master pages.In such situations, you can use nested master pages.
Similar to master pages, the extension of the nested master
page file is .master.
Like any content page, a nested master page contains the
controls that are mapped to the controls on a master page.
Creating Nested Master Pages
7/30/2019 ASP.net Session 05
10/32Slide 10 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Problem Statement:
You have to create a master page to define a common layout
for all the Web pages of the MusicMania website. Your
manager instructs you that in some of the pages of the
website, such as ContactUs page and AboutUs pages, the
message, We care for our customers needs to be displayedat the bottom of the page. For this, you need to create a
nested master page.
Activity 3.2: Implementing Master Pages
7/30/2019 ASP.net Session 05
11/32Slide 11 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Solution:
To implement master page and nested master page on the
website, you need to perform the following tasks:
1. Add a master page.
2. Design the master page.
3. Modify the Home page.
4. Modify the About Us page.
5. Add a nested master page.
6. Design the nested master page.
7. Modify the About Us page.
8. Execute the application.
Activity 3.2: Implementing Master Pages(Contd.)
7/30/2019 ASP.net Session 05
12/32Slide 12 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
There are situations where you may want to change the
layout of the master page through a particular content page.
Suppose you want to hide the navigation controls, which are
implemented in the master page to have more space to see
the page content in a particular content page.
You can do this by adding a public property to the master
page class that can be accessed from the content page.
Interacting with a Master Page Programmatically
7/30/2019 ASP.net Session 05
13/32Slide 13 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
To provide smooth navigation on a website, you need to
provide a path, known as the navigation path that can direct
a user to any part or Web page on the website.
The site navigation feature of ASP.NET:
Provides a consistent way to navigate a website.Enables you to store the structure of your website at a central
location, called a site map.
A site map:
Is an XML file that describes the hierarchical and logical
structure of the website.
Stores links to all the Web pages on a website. These links can
be rendered through navigation controls.
Working with Site Maps
7/30/2019 ASP.net Session 05
14/32Slide 14 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
To create a site map, you need to create an XML file with
the .sitemap extension.
This XML file must be located in the application root
directory.
Every .sitemap file contains the element.All the information regarding the site map is written withinthe opening and closing tags of the element, as
shown in the following example:
...
Defining a Site Map
7/30/2019 ASP.net Session 05
15/32Slide 15 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
A site map defines the hierarchical structure of the Web
pages on a website.
To create the hierarchical structure, you need to use the element within the opening and closing
tags of the element.
Each page in the hierarchical structure is represented by a element.
The element contains various attributes,
as shown in the following example:
Defining a Site Map (Contd.)
7/30/2019 ASP.net Session 05
16/32Slide 16 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Creating hierarchical group of links in site maps:
There are situations when you want the Web pages in a site
map to be divided into groups.
To represent such a group in the site map file, you need toplace one element inside another, as
shown in the following example:
Defining a Site Map (Contd.)
7/30/2019 ASP.net Session 05
17/32Slide 17 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Once the navigation structure of a website is defined in the
site map file, it needs to be bound to a Web page.
To bind the site map file to a Web page, you need to add the
SiteMapDataSource control to the Web page by using the
following code:
Binding a Page to a Site Map
7/30/2019 ASP.net Session 05
18/32Slide 18 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
After adding the SiteMapDataSource control, you need to
add navigation controls to the Web page.
The navigation controls are linked to the
SiteMapDataSource control and are capable of displaying
the navigation structure contained in the site map file.
To use a navigation control, such as a TreeView control, you
need to use the following markup:
Binding a Page to a Site Map (Contd.)
7/30/2019 ASP.net Session 05
19/32Slide 19 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
ASP.NET provides various navigation controls that use thedefault site-map provider or the XmlSiteMapProvider
class to read site-map information from the Web.sitemap
file.
However, instead of using the default site-map provider, you
may want to implement your own site-map provider when:
You need to store the site-map information in a data source
that is not supported by the default site-map provider
You need to use a data source other than the Web.sitemap file
Configuring the Site Map Provider
7/30/2019 ASP.net Session 05
20/32Slide 20 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
You can create a custom site-map provider by:
Creating a class that inherits the SiteMapProvider abstract
class from the System.Web namespace.
Implementing the abstract members that are exposed by theSiteMapProvider class.
The following table lists the methods that need to be
implemented in the custom site-map provider.
Configuring the Site Map Provider (Contd.)
Method Descr ipt ion
FindSiteMapNode Gets an instance of the SiteMapNode class that
represents a page.
GetChildNodes Gets the child nodes of a specific instance of theSiteMapNode class.
GetParentNode Gets the parent node of a specific instance of theSiteMapNode class.
GetRootNodeCore Gets the root node of all the nodes that are
managed by the current provider.
7/30/2019 ASP.net Session 05
21/32Slide 21 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
The process of implementing navigation on websites
includes:
Creating a navigational structure.
Associating the structure with navigational controls.
This can be done by defining a structure of the site in a sitemap file and binding it with the page by using the
SiteMapDataSource control.
Implementing Navigation Using Navigation Controls
7/30/2019 ASP.net Session 05
22/32Slide 22 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
After binding a page to a sitemap by using the
SiteMapDataSource control, you need to associate the
SiteMapDataSource control with any of the following three
navigational controls:
The SiteMapPath control
The TreeView control
The Menu control
Implementing Navigation Using Navigation Controls (Contd.)
7/30/2019 ASP.net Session 05
23/32
Slide 23 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
The SiteMapPath control is one of the navigational controls
that display the navigational structure of a website.
The navigational structure or the navigation path of the
website displayed in the SiteMapPath control is known as a
breadcrumb.
A breadcrumb:
Shows the users current page location.
Displays a link as a hierarchical path back to the home page.
The SiteMapPath control obtains navigation data from the
site map.
The SiteMapPath Control
7/30/2019 ASP.net Session 05
24/32
Slide 24 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
A TreeView control:
Is used to display hierarchical data.
Can be used to display the navigational structure of a website.
Enables you to show a portion of the site map or the entire site
map.
The hierarchy of the Web pages in the site map is shown in
the form of nodes and subnodes.
All the nodes or subnodes are represented as links, which
enable you to navigate to a new page.
The TreeView Control
7/30/2019 ASP.net Session 05
25/32
Slide 25 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
To use the TreeView control on a Web page, you need to
perform the following steps:
1. Add a SiteMapDataSource control to the Web page.
2. Set the DataSourceID property of the TreeView control to the
ID of the existing SiteMapDataSource control.
The TreeView Control (Contd.)
7/30/2019 ASP.net Session 05
26/32
Slide 26 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
The Menu control is another control that supports
hierarchical data.
Therefore, it can also be used to display the navigational
structure of a website.
The Menu control displays hierarchical data in the form of amain menu and submenus.
It only displays the main menu on a Web page.
When a user hovers over an option in the main menu, a
drop-down menu is displayed containing links to other Web
pages in the hierarchy.This avoids congestion on a Web page when many links are
to be displayed.
The Menu Control
7/30/2019 ASP.net Session 05
27/32
Slide 27 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
To use the Menu control on a Web page, you need to
perform the following steps:
1. Add a SiteMapDataSource control to the Web page.
2. Set the DataSourceID property of the Menu control to the ID of
the existing SiteMapDataSource control.
A Menu control is similar to a TreeView control as they both
display the hierarchical navigation system of a website.
The Menu Control (Contd.)
7/30/2019 ASP.net Session 05
28/32
Slide 28 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Besides the similarity, there are some differences between
Menu and TreeView controls.
The following table lists the differences between Menu and
TreeView controls.
The Menu Control (Contd.)
Menu Control TreeView Control
Can display a single submenu at a
time.
Can expand arbitrary number of node
branches at a time.
Displays only root level node on a
Web page. All other node items
appear as pop-up when a user
hovers over a node with the mouse
pointer.
Displays all the levels of nodes on the
Web page.
Supports templates. Does not support templates.
Does not support check boxes for
any node.
Supports check boxes for nodes.
Supports horizontal and vertical
layouts.
Supports only vertical layout.
7/30/2019 ASP.net Session 05
29/32
Slide 29 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Problem Statement:
The number of Web pages in the MusicMania website has
increased. Now, you need to create a proper navigation
system for the website to enable the visitors to easily navigate
between the Web pages.
Activity 4.1: Implementing Navigation
7/30/2019 ASP.net Session 05
30/32
Slide 30 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
Solution:
To create a proper navigation system for the website, you
need to perform the following tasks:
1. Create a site map for the website.
2. Modify the web.config file to set the SiteMapProvider.
3. Bind the site map to the master page.
4. Verify the application.
Activity 4.1: Implementing Navigation(Contd.)
7/30/2019 ASP.net Session 05
31/32
Slide 31 of 32Ver. 1.0
Developing Web Applications Using ASP.NET
In this session, you learned that:
Master pages enable you to create a page layout that you can
use with selected or all Web pages on your website.
A master page contains the following elements:
HTML or ASP.NET elements
ContentPlaceHolder controls
To bind a master page with the content page, you need toinclude the MasterPageFile attribute in the @ Page directive
of the content page.
Content pages can interact with the master pages
programmatically.A navigation path describes the structure of a website and acts
as a roadmap for a user.
A site map is an XML file that describes the hierarchical and
logical structure of the website.
Summary
7/30/2019 ASP.net Session 05
32/32
Developing Web Applications Using ASP.NET
A site map stores links to all the Web pages on a website.
After creating the site map file, you need to bind it to a Web
page.
The site map can be bound to a Web page by using the
SiteMapDataSource control.
After adding the SiteMapDataSource control, you need to adda navigational control to the Web page.
The three navigational controls provided by ASP.NET are:
The SiteMapPath control
The TreeView control
The Menu control
Summary (Contd.)