ASP.net Session 05

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


2/32



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


3/32



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


4/32



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


5/32



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


6/32



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/32Slide 7 of 32Ver. 1.0


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




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




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


10/32Slide 10 of 32Ver. 1.0


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


11/32Slide 11 of 32Ver. 1.0


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


12/32Slide 12 of 32Ver. 1.0


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


13/32Slide 13 of 32Ver. 1.0


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


14/32Slide 14 of 32Ver. 1.0


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


15/32Slide 15 of 32Ver. 1.0


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


16/32Slide 16 of 32Ver. 1.0


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


17/32Slide 17 of 32Ver. 1.0


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


18/32Slide 18 of 32Ver. 1.0


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


19/32Slide 19 of 32Ver. 1.0


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


20/32Slide 20 of 32Ver. 1.0


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.


21/32Slide 21 of 32Ver. 1.0


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


22/32Slide 22 of 32Ver. 1.0


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


23/32



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


24/32



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


25/32



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


26/32



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


27/32



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


28/32



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.


29/32



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


30/32



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


31/32



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


32/32


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

Date post:	14-Apr-2018
Category:	Documents
Upload:	prerana-tokas
View:	224 times
Download:	0 times

ASP.net Session 05

Documents