St.

Stephen Institute of Business Management & Technology, Anand

B. C. A. Semester – V
US05CBCA21 Advanced Web Development Technology
Unit 2
Syllabus Unit 2: Standard Controls and Master Page

Web Server Controls : Button, Image Button, Link Button, Textbox, Hyperlink, ImageMap control
(Creating Hotspots),CheckBox and RadioButton, CheckBoxList, RadioButtonList, ListBox, DropdownList

Rich Controls:Calendar, Adrotator control (showing advertisement from XML file and Database),
FileUpload control

Grouping Controls : Panel, PlaceHolder

Using Navigation Controls : TreeView, SiteMapPath, Menu, Creating sitemap file for navigation
Designing Master page

Web Server Controls

1. Button

The Button is an asp.net web server control. This control is used to perform events. It is also used to
submit client request to the server. To create Button either we can write code or use the drag and
drop facility of visual studio IDE. We can display a simple push button on a web page by adding
button control on asp.net web page.

There are three type of button in asp.net.

1. Simple Push Button: Simple Push Button displays text on a button control.
2. Link Button: Link button displays text that looks like a link or hyperlink.
3. Image Button: Image Button displays an image on a button control.

These entire three buttons has main two events Click and Command events. By default in asp.net
button has click events.
This is a server side control and asp provides own tag to create it. The example is given below.

< asp:ButtonID="Button1" runat="server" Text="Submit" BorderStyle="Solid" ToolTip="Submit"/>

Server renders it as the HTML control and produces the following code to the browser.

<input name="Button1" value="Submit" id="Button1" title="Submit" style="border-

style:Solid;" type="submit">

1
 This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.
BackColor It is used to set background color of the control.
BorderWidth It is used to set width of border of the control.
Font It is used to set font for the control text.
ForeColor It is used to set color of the control text.
Text It is used to set text to be shown for the control.
ToolTip It displays the text when mouse is over the control.
PostBackUrl Path of the page when redirect while click the button.
OnClientClick write any client side script code function name.

2. ImageButton

Use of ImageButton control is to display an image that responds to mouse clicks. Both the Click and
Command events are raised when the ImageButton control is clicked. You can use the OnCommand
event handler to make the ImageButton control behave like a Command button.

This is a server side control and asp provides own tag to create it.
<asp:ImageButton ID=”ImageButton1″ runat=”server” />

This control has its own properties that are tabled below.

Property Description

ID Identification of ImageButton control–

ImageUrl set image path to display image on image button control.
AlternateText AlternateText text display when image can not display on web page.
PostBackUrl Path of the page when redirect while click the Image button.
OnClientClick write JavaScript or any client side script code function name.

3. Link Button

It is a server web control that acts as a hyperlink. It is used to display a hyperlink-style button control
on the web page. ASP.NET provides a tag to create LinkButton and has following syntax. The Link
Button code is like:

<asp:LinkButton ID=”LinkButton1″ runat=”server”>LinkButton</asp:LinkButton>

2
 Property Description

ID Identification of LinkButton control

Text Display text on LinkButton like hyperlink.
PostBackUrl Path of the page when redirect while click the Link button.
OnClientClick Write any client side script code function name.

4. Textbox

Textbox control is most usable web server control in asp.net. TextBox control is a rectangular box
which is used to take user to input. In simple word the TextBox is a place where user can input some
text on asp.net web form. To use TextBox on page we can write code or just drag and drop from
toolbox. This is server side control, asp provides own tag to create it. The example is given below.

< asp:TextBoxID="TextBox1" runat="server" ></asp:TextBox>

Properties Description

ID Identification name of textbox control.

Text It is used to display text in a control.

BackColor It is used to set background color of textbox control.

ForColor It is used to set text color of the control.

ToolTip It displays a text on control when mouse over on it.

TabIndex It is used manage tab order of control.

CssClass It is used to apply style on control.

Enable true/false – used to enable or disable control.

Visible true/false – It is used to hide or visible control on web page.

It is used to set maximum number of characters that can be input in

MaxLenght TextBox.

TextMode Single / Multiline / Password

ReadOnly true/false – used to enable or disable control readonly.

5. Hyperlink

HyperLink is an asp.net web server control. We can display a hyperlink on a web page by adding a
hyplerlink control on asp.net web page. HyperLink control used to navigate user to anther page or on
the same page. It responds to a click event. The main property of hyperlink control is NavigateUrl.
The NavigateUrl property of hyperlink control store the address of destination page. The HyperLink
control display both as text and as image by specifying Text or ImageUrl property of hyperlink
control. If we set any image in ImageUrl property of hyperlink control then the hyperlink display

3
 image on it. If we set any text value in Text Property of hyperlink control then the hyperlink control
display as text link.

This is a server side control and ASP.NET provides own tag to create it. The example is given
below.

< asp:HyperLinkID="HyperLink1" runat="server" Text="JavaTpoint"

NavigateUrl="www.javatpoint.com" ></asp:HyperLink>

Server renders it as the HTML control and produces the following code to the browser.
<a id="HyperLink1" href="www.javatpoint.com">JavaTpoint</a>

This control has its own properties that are tabled below.

Property Description

BackColor It is used to set background color of the control.

Font It is used to set font for the control text.
ForeColor It is used to set color of the control text.
Text It is used to set text to be shown for the control.
NavigateUrl It is used to set navigate URL.
Target Target frame for the navigate url.
ImageUrl set image path to display image on control.

6. ImageMap Control

The ImageMap control in ASP.NET 2.0 and onward versions can be used to create an image that
contains defined hot spot regions. When a user clicks a hot spot region, the control can either
generate a post back to the server or navigate to a specified URL.

There are three kinds of hot spot regions defined in ImageMap control.

 RectangleHotSpot
 CircleHotSpot
 PolygonHotSpot

The RectangleHotSpot defines rectangular hot spot regions. The CircleHotSpotdefines circle-shaped
ones and the PolygonHotSpot is used for irregularly shaped hot spot area.

<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/Hit Target.jpg"

onclick="ImageMap1_Click">
<asp:CircleHotSpot X="210" Y="210" Radius="20" NavigateUrl="Default.aspx"
AlternateText="Home Page" />
</asp:ImageMap>

4
This control has its own properties that are tabled below.

Property Description

ImageUrl Url of image location.

AlternetText Appears if image not loaded properly

Tooltip Appears when on mouse over the image

ImageAlign Used to align the Text beside image.

HotSpotMode PostBack/Navigate .... When Navigate, the user is navigated to a different URL. In case of
PostBack, the page is posted back to the server.

OnClick Attach a server side event that fires after clicking on image when HostSpotMode is
PostBack.

PostBackValue You can access it in the server side click event through ImageMapEventArgs. (eg.
e.PostBackValue)

7. CheckBox

It is used to get multiple inputs from the user. It allows user to select choices from the set of choices.
It takes user input in yes or no format. It is useful when we want multiple choices from the user.
This is a server side control and ASP.NET provides own tag to create it. The example is given
below.

< asp:CheckBox ID="CheckBox2" runat="server" Text="J2EE"/>

Server renders it as the HTML control and produces the following code to the browser.

< input id="CheckBox2" type="checkbox" name="CheckBox2" />

<label for="CheckBox2">J2EE</label>

This control has its own properties that are tabled below.

Property Description

AutoPostBack Form is automatically posted back when CheckBox is checked or

Unchecked.

CausesValidation true/false. If true, Form is validated if Validation control has been

used in the form.

Checked true/false. If true, Check box is checked by default.

OnCheckedChanged Fires when CheckBox is checked or Unchecked. This works only

if AutoPostBack property is set to true.

ValidationGroup Used to put a checkbox under a particular validation group. It is

used when you have many set of form controls and by clicking a
paricular button you want to validate a particular set of controls
only.

5
 8. Radio Button

It is an input control which is used to takes input from the user. It allows user to select a choice from the
group of choices.
This is a server side control and ASP.NET provides own tag to create it. The example is given below.

<asp:RadioButtonID="RadioButton1" runat="server" Text="Male" GroupName="gender"/>

Following are some important properties that are very useful.

Property Description

AutoPostBack Form is automatically posted back when Radio button selection is

changed.

CausesValidation true/false. If true, Form is validated if Validation control has been

used in the form.

Checked true/false. If true, Radio button is selected by default.

OnCheckedChanged Fires when Radio button selection changes. This works only
if AutoPostBack property is set to true.

ValidationGroup Used to put a radio button under a particular validation group. It is

used when you have many set of form controls and by clicking a
paricular button you want to validate a particular set of controls
only.

GroupName It is used a group a set of radion buttons so only one of them can be
selected at a time.

9. ChechkboxList

CheckBoxList control is a single control that groups a collection of checkable list items,
Following are some important properties that are very useful.

Property Description

SelectedValue Gets the value of first selected item.

SelectedIndex Gets or Sets the index of the first selected item.

SelectedItem Gets the first selected item

TextAlign Gets or Sets the alignment of the checkbox text.

DataTextField Name of the data source field to supply the text of the items.

DataValueField Name of the data source field to supply the value of the items.

DataSourceID ID of the datasource component to provide data.

6
DataSource The datasource that populates the items in the checkboxlist box.

AutoPostBack true/false. If true, the form is automatically posted back to the server when user
click any of the checkbox. It will also fire OnSelectedIndexChanged method.

AppendDataBoundItems true/false. If true, the statically added item (added from .aspx page) is maintained
when adding items dynamically (from code behind file) or items are cleared.

OnSelectedIndexChanged Method name that fires when user click any of the checkbox in the list. (Fires
only when AutoPostBack=true.)

Items Gets the colleciton of the items from the list.

RepeatLayout table/flow. Gets or Sets the layout of the chekboxes when rendered to the page.

RepeatColumns Gets or Sets the no. of columns to display when the control is rendered.

RepeatDirection Horizontal/Vertical. Gets or Sets the the value to indicate whether the control
will be rendered horizontally or vertically.

10. RadioButtonList

RadioButtonList control is a single control that groups a collection of radiobuttons,

Note: RadioButtonList controls supports the same set of properties as the CheckBoxList control
does.

11. ListBox

ListBox control is an asp.net web server control. ListBox control used to store the multiple items and
allow user to select multiple item from listbox control. In a ListBox control there is a SelectionMode
property to change the mode of section from single to multiple. By default listbox control selection
mode is single if you want to select multiple items from listbox, then just change the SelectionMode
property to multiple.

Following are some important properties that are very useful.

Property Description

Rows No. of rows (items) can be set to display in the List.

SelectionMode Single or Multiple. If multiple, it allows user to select multiple items from the list
by holding Ctrl or Shift key.

SelectedValue Get the value of the Selected item from the dropdown box.

SelectedIndex Gets or Sets the index of the selected item in the dropdown box.

SelectedItem Gets the selected item from the list.

Items Gets the collection of items from the dropdown box.

DataTextField Name of the data source field to supply the text of the items.

DataValueField Name of the data source field to supply the value of the items.
7
DataSourceID ID of the datasource component to provide data.

DataSource The datasource that populates the items in the listbox box.

AutoPostBack true or false. If true, the form is automatically posted back to the server when
user changes the dropdown list selection.

AppendDataBoundItems true or false. If true, the statically added item (added from .aspx page) is
maintained when adding items dynamically (from code behind file) or items are
cleared.

OnSelectedIndexChanged Method name that fires when user changes the selection of the dropdown box.
(Fires only when AutoPostBack=true.)

12. DropDownList

The DropDownList control is asp.net web server control. We can use dropdownlist control for hold
group of items. The dropdownlist control is used to store the multiple items and allow user to select
only one item from it.The dropdownlist control is also known as combo box control. In dropdownlist
control we can store multiple items but we can select only one item at a time, that’s why it is also known
as Single Row Selection Box.

Following are some important properties that are very useful.

Property Description

SelectedValue Get the value of the Selected item from the dropdown box.

SelectedIndex Gets or Sets the index of the selected item in the dropdown box.

SelectedItem Gets the selected item from the list.

Items Gets the collection of items from the dropdown box.

DataTextField Name of the data source field to supply the text of the items.

DataValueField Name of the data source field to supply the value of the items.

DataSourceID ID of the datasource component to provide data.

DataSource The datasource that populates the items in the listbox box.

AutoPostBack true or false. If true, the form is automatically posted back to the server when
user changes the dropdown list selection. It will also
fire OnSelectedIndexChanged method.

AppendDataBoundItems true or false. If true, the statically added item (added from .aspx page) is
maintained when adding items dynamically (from code behind file) or items are
cleared.

OnSelectedIndexChanged Method name that fires when user changes the selection of the dropdown box.
(Fires only when AutoPostBack=true.)

8
Rich Controls

1. AdRotator
2. FileUpload
3. Calendar

1. AdRotator

 The AdRotator control is used to display a sequence of ad images.

 This control uses an XML file to store the ad information.
 The XML file must begin and end with an <Advertisements> tag.
 Inside the <Advertisements> tag there may be several <Ad> tags which defines each ad.

Element Description
<ImageUrl> Optional. The path to the image file
<NavigateUrl> Optional. The URL to link to if the user clicks the ad
<AlternateText> Optional. An alternate text for the image
<Keyword> Optional. A category for the ad
<Impressions> Optional. The display rates in percent of the hits

Properties of Control

Property Description
AdvertisementFile Specifies the path to the XML file that contains ad information
AlternateTextField Specifies a data field to be used instead of the Alt text for an ad
Specifies a data field to be used instead of the ImageURL attribute for
ImageUrlField
an ad
KeywordFilter Specifies a filter to limit ads after categories
Specifies a data field to be used instead of the NavigateUrl attribute
NavigateUrlField
for an ad
runat Specifies that the control is a server control. Must be set to "server"
Target Specifies where to open the URL

Example of Advertisement File (Ad1.xml)

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements>
<Ad>
<ImageUrl>learnjava.jpg</ImageUrl>
<NavigateUrl>http://www.w3schools.com</NavigateUrl>
<AlternateText>W3Schools Main Site</AlternateText>
<Impressions>30</Impressions>
<Keyword>elearning</Keyword>
</Ad>
<Ad>
<ImageUrl>books.jpg</ImageUrl>
<NavigateUrl>http://www.bookhouse.com</NavigateUrl>

9
 <AlternateText>Books Available</AlternateText>
<Impressions>50</Impressions>
<Keyword>elearning</Keyword>
</Ad>
</Advertisements>

2.FileUpload

The FileUpload control allows the user to browse for and select the file to be uploaded.
It provides a Browse button and a text box for entering the filename.

Properties Description

FileBytes Returns an array of the bytes in a file to be uploaded..

FileContent Returns the stream object pointing to the file to be uploaded.
FileName Returns the name of the file to be uploaded.
HasFile Specifies whether the control has a file to upload.
PostedFile Returns a reference to the uploaded file.

Designing:

10
 Output:

3. Calendar

It is powerful Web server control that you can use to add calendar to the web page.
The calendar control is a functionally rich web control, which provides the following capabilities:

1. Displaying one month at a time

2. Selecting a day, a week or a month
3. Selecting a range of days
4. Moving from month to month
5. Controlling the display of the days programmatically

The Calendar is complex, powerful Web server control that you can use to add calendar
feature to your web page. We can use calendar control display any date between 0 A.D. and
9999A.D.

The Calendar control is represented as:

<asp:Calendar ID="Calendar1" runat="server" </asp:Calendar>
11
 The Calendar control when rendered to a user browser, it generates an HTML <table>
element and a set of associated JavaScript.
The Calender control can be used to select a single date or multiple dates. The selectionMode
property is used for this.

The SelectionMode properties are as:

Property Description
Day Allow selection of a single date.
DayWeek Allows the selection of a single date or a complete week.
DayWeekMonth Allow selection of single date, complete week or complete month.
None Doesn't allow you to select any date.

You can also set the properties for the calendar either by selecting the Auto Format property
by right clicking on the Calendar control or by manually setting them one by one.

Grouping Controls
1. Panel
2. PlaceHolder

1) Panel

The Panel control works as a container for other controls on the page. It controls the appearance and
visibility of the controls it contains.

<asp:Panel ID= "Panel1" runat = "server"> </asp:Panel>

If we want to Hide or visible more then one Control as same time, so we can place them to in
Panelcontrol and Just Visible or Hide Panel control the all the control will be Visible or Hide
according to Panel Control.

The basic syntax of panel control is as follows:

<asp:Panel ID= "Panel1" runat = "server">

</asp:Panel>

The Panel control is derived from the WebControl class. Hence it inherits all the properties, methods
and events of the same. It does not have any method or event of its own. However it has the
following properties of its own:

Properties Description

BackImageUrl URL of the background image of the panel.

DefaultButton Gets or sets the identifier for the default button that is contained
in the Panel control.

Direction Text direction in the panel.

12
 GroupingText Allows grouping of text as a field.

HorizontalAlign Horizontal alignment of the content in the panel.

ScrollBars Specifies visibility and location of scrollbars within the panel.

Wrap Allows text wrapping.

Let us start with a simple scrollable panel of specific height and width and a border style. The
ScrollBars property is set to both the scrollbars, hence both the scrollbars are rendered.
The source file has the following code for the panel tag:

<asp:Panel ID="Panel1" runat="server" BorderColor="#990000" BorderStyle="Solid"

Borderstyle="width:1px" Height="116px" ScrollBars="Both" style="width:278px">

This is a scrollable panel.

<br />
<br />

<asp:Button ID="btnpanel" runat="server" Text="Button" style="width:82px" />

</asp:Panel>

The panel is rendered as follows:

2. PlaceHolder

The PlaceHolder control is used to reserve space for controls added by code.
PlaceHolder is an asp.net web server control which used to store dynamically added web server
controls on the web page.

13
 By using a PlaceHolder control we can dynamically add Label, TextBox, Button, RadioButton,
Image and many more web server controls in an asp.net web page.

<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{ Image img = new Image();
img.ImageUrl = @"~/Images/sea.jpg";
img.BorderWidth = 3;
img.BorderColor = System.Drawing.Color.SaddleBrown; PlaceHolder1.Controls.Add(img);
}
</script>

Navigation Controls
1. TreeView
2. SiteMapPath
3. Menu

1. TreeView

The TreeView Web control is useful to display hierarchical data in a tree structure. A TreeView is a
collection of TreeNode objects. It provides a way to display information in a hierarchical structure by
using collapsible nodes. The top level in a treeview are root nodes that can be expanded or collapsed
if the nodes have child nodes.

The contents of the TreeView control can be specified directly in the control or bound to,
1. XML file
2. web.sitemap file
3. Database table
14
 The user can expand the TreeNode by clicking the plus sign (+) button, if one is displayed next to the
TreeNode, or you can expand the TreeNode by calling the TreeNode.Expand method. You can also
navigate through tree views with various properties: FirstNode, LastNode, NextNode, PrevNode,
NextVisibleNode, PrevVisibleNode.
The fullpath method of treeview control provides the path from root node to the selected node.

Properties

BackgroundImage Gets or set the background image for the TreeView control.
BackgroundImageLayout Gets or sets the layout of the background image for the TreeView
control.
BorderStyle Gets or sets the border style of the tree view control.
ForeColor The current foreground color for this control, which is the color the
control uses to draw its text.
FullRowSelect Gets or sets a value indicating whether the selection highlight spans the
width of the tree view control.
HideSelection Gets or sets a value indicating whether the selected tree node remains
highlighted even when the tree view has lost the focus.
HotTracking Gets or sets a value indicating whether a tree node label takes on the
appearance of a hyperlink as the mouse pointer passes over it.
ImageIndex Gets or sets the image-list index value of the default image that is
displayed by the tree nodes.
ImageList Gets or sets the ImageList that contains the Image objects used by the
tree nodes.
Indent Gets or sets the distance to indent each of the child tree node levels.
ItemHeight Gets or sets the height of each tree node in the tree view control.
LabelEdit Gets or sets a value indicating whether the label text of the tree nodes
can be edited.
LineColor Gets or sets the color of the lines connecting the nodes of the
TreeView control.
Nodes Gets the collection of tree nodes that are assigned to the tree view
control.

15
Padding Gets or sets the spacing between the TreeView control's contents and
its edges.
PathSeparator Gets or sets the delimiter string that the tree node path uses.
Scrollable Gets or sets a value indicating whether the tree view control displays
scroll bars when they are needed.
SelectedImageIndex Gets or sets the image list index value of the image that is displayed
when a tree node is selected.
SelectedNode Gets or sets the tree node that is currently selected in the tree view
control.
ShowLines Gets or sets a value indicating whether lines are drawn between tree
nodes in the tree view control.
ShowNodeToolTips Gets or sets a value indicating ToolTips are shown when the mouse
pointer hovers over a TreeNode.
ShowPlusMinus Gets or sets a value indicating whether plus-sign (+) and minus-sign (-)
buttons are displayed next to tree nodes that contain child tree nodes.
ShowRootLines Gets or sets a value indicating whether lines are drawn between the
tree nodes that are at the root of the tree view.
Sorted Gets or sets a value indicating whether the tree nodes in the tree view
are sorted.
Text Gets or sets the text of the TreeView.
TopNode Gets or sets the first fully-visible tree node in the tree view control.
TreeViewNodeSorter Gets or sets the implementation of IComparer to perform a custom sort
of the TreeView nodes.
VisibleCount Gets the number of tree nodes that can be fully visible in the tree view
control.

Methods
BeginUpdate Disables any redrawing of the tree view.
CollapseAll Collapses all the tree nodes.
EndUpdate Enables the redrawing of the tree view.
ExpandAll Expands all the tree nodes.
GetNodeAt Retrieves the tree node that is at the specified location.
GetNodeCount Retrieves the number of tree nodes, optionally including those in all subtrees,
assigned to the tree view control.
HitTest Provides node information, given a point.
Sort Sorts the items in TreeView control.

16
 Introduction to SiteMapPath

If you anytime traveled to unknown areas you know the importance of maps. They help you to travel
easily making your journey pleasurable. The same holds true for web sites. The visitors coming to
your web sites should be presented with simple yet flexible navigation structure so that they can
travel to various parts of your web site easily. ASP.NET provides a feature called SiteMap that help
you achieve this goal.

The SiteMap

A site map is an XML file that details the overall navigational layout of your web site. You can then
consume this site map file as per your requirement. The site map file must have extension .sitemap.

The following sitemap file:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<siteMap>
<siteMapNode title="Home" url="/aspnet/home.aspx">
<siteMapNode title="News" url="/aspnet/news.aspx">
<siteMapNode title="Product" url="/aspnet/product.aspx"/>
<siteMapNode title="Contact Us" url="/aspnet/contactUs.aspx"/>
<siteMapNode title="Order" url="/aspnet/order.aspx"/>
</siteMapNode>
</siteMapNode>
</siteMap>

Rules for creating a sitemap file:

 The XML file must contain a <siteMap> tag surrounding the content
 The <siteMap> tag can only have one <siteMapNode> child node (the "home" page)
 Each <siteMapNode> can have several child nodes (web pages)
 Each <siteMapNode> has attributes defining page title and URL

Note: The sitemap file must be placed in the root directory of the web and the URL attributes must be
relative to the root directory.

SiteMapPath control

The SiteMapPath control displays the trail (navigation path) to the current page. The path acts as
clickable links to previous pages. The SiteMapPath control uses the web.sitemap file by default.

Code Example:

<form runat="server">
<asp:SiteMapPath runat="server" />
</form>

17
Property Description

ShowToolTips Set this to False if you don’t want the description text to appear when
the user hovers over a part of the site map path.
ParentLevelsDisplayed This sets the maximum number of levels above the current page that
will be shown at once. By default, this setting is -1, which means all
levels will be shown
RenderCurrentNodeAsL If True, the portion of the page that indicates the current page is turned
ink into a clickable link. By default, this is False because the user is already
at the current page.
PathDirection You have two choices: RootToCurrent (the default) and CurrentToRoot
(which reverses the order of levels in the path).
PathSeparator This indicates the characters that will be placed between each level in
the path. The default is the greater-than symbol (>). Another common
path separator is the colon (:).

Using SiteMapPath Styles and Templates

Style Template Applies To

NodeStyle NodeTemplate All parts of the path except the root and
current node
CurrentNodeStyle CurrentNodeTemplate The node representing the current page.

RootNodeStyle RootNodeTemplate The node representing the root. If the root

node is the same as the current node, the
current node template or styles are used.
PathSeparatorStyle PathSeparatorTemplate The separator in between each node

2. Menu Control

The Menu Control can be used to display hierarchical data. It is very easy to navigate through the Menu
Control when there are many options in the hierarchy. Menus occupy less space in the web page. Menus
can be expanded at various levels or collapsed as required by the user.The Menu control can be bound to
a SiteMapDataSource to display the information available in the Web.sitemap file. The DataSourceID

18
 property of the Menu Control is set to the ID of the SiteMapDataSource control. Below is the tag for the
Menu Control.

< asp:Menu ID="Menu1"

runat="server"
DataSourceID="SiteMapDataSource1" >
< /asp:Menu >

Menu Styles

The Menu supports defining different menu styles for different menu levels.

Table Menu Styles

Static Style Dynamic Style Description

StaticMenuStyle DynamicMenuStyle Sets the appearance of the overall “box” in which

all the menu items appear. In the case of
StaticMenuStyle, this box appears on the page,
and with DynamicMenuStyle it appears as a pop-
up.
StaticMenuItemStyle DynamicMenuItemStyle Sets the appearance of individual menu items
StaticSelectedStyle DynamicSelectedStyle Sets the appearance of the selected item. Note
that the selected item isn’t the item that’s
currently being hovered over; it’s the item that
was previously clicked (and that triggered the
last postback)
StaticHoverStyle DynamicHoverStyle Sets the appearance of the item that the user is
hovering over with the mouse.

Following Figure shows the menu with StaticDisplayLevels set to 2 (and some styles applied through the
Auto Format link).

19
 Master Page
Master pages provide templates for other pages on your web site. Master pages allow you to create a
consistent look and behaviour for all the pages (or group of pages) in your web application.

A master page provides a template for other pages, with shared layout and functionality. The master page
defines placeholders for the content, which can be overridden by content pages. The output result is a
combination of the master page and the content page.

The content pages contain the content you want to display.

When users request the content page, ASP.NET merges the pages to produce output that combines the
layout of the master page with the content of the content page.
Master Page Example

<%@ Master %>

<html>
<body>
<h1>Standard Header From Masterpage</h1>
<asp:ContentPlaceHolder id="CPH1" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>

The content page above demonstrates how .NET controls can be inserted into the content page just like an
into an ordinary page.

MasterPage Key Points:

1. The extension of MasterPage is '.master'.

2. MasterPage cannot be directly accessed from the client because it just acts as a template for the other
Content Pages.
3. In a MasterPage we can have content either inside ContentPlaceHolder or outside it. Only content
inside the ContentPlaceHolder can be customized in the Content Page.
4. We can have multiple masters in one web application.
5. A MasterPage can have another MasterPage as Master to it.
6. The content page content can be placed only inside the content tag.
7. Controls of MasterPage can be programmed in the MasterPage and content page but a content page
control will never be programmed in MasterPage.
8. A master page of one web application cannot be used in another web application.

Terminology

Let us look at the basic terminology that needs to be understood before jumping into master pages:
 Masterpage: Gives us a way to create common set of UI elements that are required on multiple pages of our
website.
 ContentPage: The ASP.NET web page that will use master page to have the common UI elements displayed
on rendering itself.
 ContentPlaceHolder: A control that should be added on the MasterPage which will reserve the area for the
content pages to render their contents.

20
 Creating a MasterPage

To create a master page, we need to:

1. Go to "Add New Item".

2. Select the MasterPage.

3. Let's say our master page is MasterPageOne.Master.

4. We will now add a menu bar on this master page on top of the page. This Menu bar will be common to all
the pages (since it is in Masterpage).
5. Once we have menubar added, we can have content pages use the master page.
6. Let's add few content pages like default.aspx, about.aspx, Contact.aspx. (We are simply creating some
dummy pages with no functionality as we want to see the masterpage working, but these content pages can
have any level of complex logic in them).
7. When we add these content pages, we need to remember to select the option of "Use master Page".

21
Now let's look at the stuff that is important. When we look at the MasterPage, we will see
that masterpage has a ContentPlaceHolder control. All the code that is common for the content pages is
outside the ContentPlaceHolder control (in our case, a simple menubar).

Designing

22