Scribd Logo
Upload

Welcome to Scribd!

  • Session 05

    Uploaded by

    Prerana Tokas
    291 views32 pages
    This document discusses various topics related to developing web applications using ASP.NET, including working with themes, master pages, site maps, and navigation controls. Specifically, it provides guidance on implementing themes to provide consistent styling, using master pages to define common page layouts, creating nested master pages, defining site maps in XML format to represent the website structure, and binding site maps to navigation controls.

    Original Description:

    Asp.Net

    Original Title

    ASP.net Session 05

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPS, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses various topics related to developing web applications using ASP.NET, including working with themes, master pages, site maps, and navigation controls. Specifically, it provides guidance on implementing themes to provide consistent styling, using master pages to define common page layouts, creating nested master pages, defining site maps in XML format to represent the website structure, and binding site maps to navigation controls.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPS, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    291 views32 pages

    Session 05

    Uploaded by

    Prerana Tokas
    This document discusses various topics related to developing web applications using ASP.NET, including working with themes, master pages, site maps, and navigation controls. Specifically, it provides guidance on implementing themes to provide consistent styling, using master pages to define common page layouts, creating nested master pages, defining site maps in XML format to represent the website structure, and binding site maps to navigation controls.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPS, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 32

    Developing Web Applications Using ASP.

    NET
    Objectives

    In this session, you will learn to:


    Work with themes Work with master pages Work with site maps Work with navigation controls

    Ver. 1.0

    Slide 1 of 32

    Developing Web Applications Using ASP.NET


    Activity 3.1: Implementing Themes

    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 on the website. The theme should apply a consistent appearance to all the Button controls placed on the website.

    Ver. 1.0

    Slide 2 of 32

    Developing Web Applications Using ASP.NET


    Activity 3.1: Implementing Themes (Contd.)

    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.

    Ver. 1.0

    Slide 3 of 32

    Developing Web Applications Using ASP.NET


    Working with Master Pages

    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, which enables 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.

    Ver. 1.0

    Slide 4 of 32

    Developing Web Applications Using ASP.NET


    Working with Master Pages (Contd.)

    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 @ Master directive, as shown in the following code snippet:
    <%@ Master Language="C#" CodeFile="MyMaster.master.cs" Inherits="MasterPage" %>

    In addition to the @ Master directive, the master page contains the following elements:
    HTML or ASP.NET elements ContentPlaceHolder controls

    Ver. 1.0

    Slide 5 of 32

    Developing Web Applications Using ASP.NET


    Connecting Master Pages and Content Pages

    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 to include 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 <Title> tag within the <Head> 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.
    Ver. 1.0

    Slide 6 of 32

    Developing Web Applications Using ASP.NET


    Connecting Master Pages and Content Pages (Contd.)

    The title specified in the master page can be overridden in the 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 master page such as the <head> section, the root <html> element, and the <body> 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.

    Ver. 1.0

    Slide 7 of 32

    Developing Web Applications Using ASP.NET


    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.

    Ver. 1.0

    Slide 8 of 32

    Developing Web Applications Using ASP.NET


    Creating Nested Master Pages

    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 <Content> controls that are mapped to the <ContentPlaceHolder> controls on a master page.

    Ver. 1.0

    Slide 9 of 32

    Developing Web Applications Using ASP.NET


    Activity 3.2: Implementing Master Pages

    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 displayed at the bottom of the page. For this, you need to create a nested master page.

    Ver. 1.0

    Slide 10 of 32

    Developing Web Applications Using ASP.NET


    Activity 3.2: Implementing Master Pages (Contd.)

    Solution:
    To implement master page and nested master page on the website, you need to perform the following tasks:
    1. 2. 3. 4. 5. 6. 7. 8. Add a master page. Design the master page. Modify the Home page. Modify the About Us page. Add a nested master page. Design the nested master page. Modify the About Us page. Execute the application.

    Ver. 1.0

    Slide 11 of 32

    Developing Web Applications Using ASP.NET


    Interacting with a Master Page Programmatically

    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.

    Ver. 1.0

    Slide 12 of 32

    Developing Web Applications Using ASP.NET


    Working with Site Maps

    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.

    Ver. 1.0

    Slide 13 of 32

    Developing Web Applications Using ASP.NET


    Defining a Site Map

    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 <siteMap> element. All the information regarding the site map is written within the opening and closing tags of the <siteMap> element, as shown in the following example:
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/ SiteMap-File-1.0"> ... </siteMap>

    Ver. 1.0

    Slide 14 of 32

    Developing Web Applications Using ASP.NET


    Defining a Site Map (Contd.)

    A site map defines the hierarchical structure of the Web pages on a website. To create the hierarchical structure, you need to use the <siteMapNode> element within the opening and closing tags of the <siteMap> element. Each page in the hierarchical structure is represented by a <siteMapNode> element. The <siteMapNode> element contains various attributes, as shown in the following example:
    <siteMapNode title="Home" description="Home" url="~/default.aspx" />

    Ver. 1.0

    Slide 15 of 32

    Developing Web Applications Using ASP.NET


    Defining a Site Map (Contd.)

    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 to place one <siteMapNode> element inside another, as shown in the following example:
    <siteMapNode title="Home" description="Home" url="~/default.aspx"> <siteMapNode title="Software description="Software choices url="~/software.aspx" /> <siteMapNode title="Hardware" description="Hardware choices" url="~/hardware.aspx" /> </siteMapNode>

    Ver. 1.0

    Slide 16 of 32

    Developing Web Applications Using ASP.NET


    Binding a Page to a Site Map

    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:
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

    Ver. 1.0

    Slide 17 of 32

    Developing Web Applications Using ASP.NET


    Binding a Page to a Site Map (Contd.)

    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:
    <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"/>

    Ver. 1.0

    Slide 18 of 32

    Developing Web Applications Using ASP.NET


    Configuring the Site Map Provider

    ASP.NET provides various navigation controls that use the default 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

    Ver. 1.0

    Slide 19 of 32

    Developing Web Applications Using ASP.NET


    Configuring the Site Map Provider (Contd.)

    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 the SiteMapProvider class.

    The following table lists the methods that need to be implemented in the custom site-map provider.
    Method FindSiteMapNode GetChildNodes GetParentNode GetRootNodeCore Description Gets an instance of the SiteMapNode class that represents a page. Gets the child nodes of a specific instance of the SiteMapNode class. Gets the parent node of a specific instance of the SiteMapNode class. Gets the root node of all the nodes that are managed by the current provider.

    Ver. 1.0

    Slide 20 of 32

    Developing Web Applications Using ASP.NET


    Implementing Navigation Using Navigation Controls

    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 site map file and binding it with the page by using the SiteMapDataSource control.

    Ver. 1.0

    Slide 21 of 32

    Developing Web Applications Using ASP.NET


    Implementing Navigation Using Navigation Controls (Contd.)

    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

    Ver. 1.0

    Slide 22 of 32

    Developing Web Applications Using ASP.NET


    The SiteMapPath Control

    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.

    Ver. 1.0

    Slide 23 of 32

    Developing Web Applications Using ASP.NET


    The TreeView Control

    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.

    Ver. 1.0

    Slide 24 of 32

    Developing Web Applications Using ASP.NET


    The TreeView Control (Contd.)

    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.

    Ver. 1.0

    Slide 25 of 32

    Developing Web Applications Using ASP.NET


    The Menu Control

    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 a main 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.

    Ver. 1.0

    Slide 26 of 32

    Developing Web Applications Using ASP.NET


    The Menu Control (Contd.)

    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.

    Ver. 1.0

    Slide 27 of 32

    Developing Web Applications Using ASP.NET


    The Menu Control (Contd.)

    Besides the similarity, there are some differences between Menu and TreeView controls. The following table lists the differences between Menu and TreeView controls.
    Menu Control Can display a single submenu 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. Supports templates. Does not support check boxes for any node. Supports horizontal and vertical layouts. TreeView Control Can expand arbitrary number of node branches at a time. Displays all the levels of nodes on the Web page.

    Does not support templates. Supports check boxes for nodes. Supports only vertical layout.

    Ver. 1.0

    Slide 28 of 32

    Developing Web Applications Using ASP.NET


    Activity 4.1: Implementing Navigation

    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.

    Ver. 1.0

    Slide 29 of 32

    Developing Web Applications Using ASP.NET


    Activity 4.1: Implementing Navigation (Contd.)

    Solution:
    To create a proper navigation system for the website, you need to perform the following tasks:
    1. 2. 3. 4. Create a site map for the website. Modify the web.config file to set the SiteMapProvider. Bind the site map to the master page. Verify the application.

    Ver. 1.0

    Slide 30 of 32

    Developing Web Applications Using ASP.NET


    Summary

    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 to include 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.
    Ver. 1.0

    Slide 31 of 32

    Developing Web Applications Using ASP.NET


    Summary (Contd.)

    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 add a navigational control to the Web page. The three navigational controls provided by ASP.NET are:
    The SiteMapPath control The TreeView control The Menu control

    Ver. 1.0

    Slide 32 of 32

    You might also like