Unit 3. Server Control in ASP.

NET
3.1 Web Server Controls (Button, Check Box, Check Box List, Drop Down List,
HyperLink, Image, image Button, Label, Link Button, List Box, List Item, Panel, Place
Holder, Radio Button, Radio Button List, Text Box)

[Link] Web Forms Server Controls

[Link] provides web forms controls that are used to create HTML components.
These controls are categories as server and client based. The following table contains
the server controls for the web forms.

Control Name Applicable Events Description

Label None It is used to display text on the HTML page.

TextBox TextChanged It is used to create a text input in the form.

Button Click, Command It is used to create a button.

LinkButton Click, Command It is used to create a button that looks similar to

the hyperlink.

ImageButton Click It is used to create an imagesButton. Here, an

image works as a Button.

Hyperlink None It is used to create a hyperlink control that

responds to a click event.

DropDownList SelectedIndexChanged It is used to create a dropdown list control.

ListBox SelectedIndexCnhaged It is used to create a ListBox control like the

HTML control.

DataGrid CancelCommand, It used to create a frid that is used to show data.

EditCommand, We can also perform paging, sorting, and
DeleteCommand, formatting very easily with this control.
ItemCommand,
SelectedIndexChanged,
PageIndexChanged,
SortCommand,
UpdateCommand,
ItemCreated,
ItemDataBound

DataList CancelCommand, It is used to create datalist that is non-tabular and

EditCommand, used to show data.
DeleteCommand,
 ItemCommand,
SelectedIndexChanged,
UpdateCommand,
ItemCreated,
ItemDataBound

CheckBox CheckChanged It is used to create checkbox.

CheckBoxList SelectedIndexChanged It is used to create a group of check boxes that all

work together.

RadioButton CheckChanged It is used to create radio button.

RadioButtonList SelectedIndexChanged It is used to create a group of radio button controls

that all work together.

Image None It is used to show image within the page.

Panel None It is used to create a panel that works as a

container.

PlaceHolder None It is used to set placeholder for the control.

Table None It is used to create table.

[Link] Web Forms Label

This control is used to display textual information on the web forms. It is mainly used
to create caption for the other controls like: textbox.

To create label either we can write code or use the drag and drop facility of visual
studio .

This is server side control, asp provides own tag to create label. The example is given
below.

1. < asp:LabelID="Label1" runat="server" Text="Label" ></asp:Label>

This control has its own properties that are tabled below.

Property Description

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

TabIndex The tab order of the control.

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

BorderColor It is used to set border color of the label.

BorderWidth It is used to set width of border of the label.

Font It is used to set font for the label text.

ForeColor It is used to set color of the label text.

Text It is used to set text to be shown for the label.

ToolTip It displays the text when mouse is over the label.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

[Link] Web Forms TextBox

This is an input control which is used to take user input. To create TextBox either we
can write code or use the drag and drop facility of visual studio IDE.

This is server side control, asp provides own tag to create it. The example is given
below.

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

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

1. <input name="TextBox1" id="TextBox1" type="text">

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.

BorderColor It is used to set border 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.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

MaxLength It is used to set maximum number of characters that can be entered.

Readonly It is used to make control readonly.

[Link] Web Forms Button

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.

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

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

1. <input name="Button1" value="Submit" id="Button1" title="Submit" style="

border-style:Solid;" type="submit">

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.

BorderColor It is used to set border 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.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

[Link] Web Forms HyperLink

It is a control that is used to create a hyperlink. It responds to a click event. We can
use it to refer any web page on the server.

To create HyperLink either we can write code or use the drag and drop facility of
visual studio IDE. This control is listed in the toolbox.

This is a server side control and [Link] provides own tag to create it. The example
is given below.

1. < asp:HyperLinkID="HyperLink1" runat="server" Text="JavaTpoint" Navigat

eUrl="[Link]" ></asp:HyperLink>

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

1. <a id="HyperLink1" href="[Link]">JavaTpoint</a>

 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.

BorderColor It is used to set border 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.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

NavigateUrl It is used to set navigate URL.

Target Target frame for the navigate url.

[Link] Web Forms RadioButton

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.

To create RadioButton we can drag it from the toolbox of visual studio.

This is a server side control and [Link] provides own tag to create it. The example
is given below.

1. < asp:RadioButtonID="RadioButton1" runat="server" Text="Male" GroupNa

me="gender"/>
 Server renders it as the HTML control and produces the following code to the
browser.

1. <input id="RadioButton1" type="radio" name="gender" value="RadioButton

1" /><labelforlabelfor="RadioButton1">Male</label>

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.

BorderColor It is used to set border 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.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

GroupName It is used to set name of the radio button group.

[Link] Web Forms 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.

To create CheckBox we can drag it from the toolbox in visual studio.

 This is a server side control and [Link] provides own tag to create it. The example
is given below.

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

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

1. < input id="CheckBox2" type="checkbox" name="CheckBox2" /><label for

="CheckBox2">J2EE</label>

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.

BorderColor It is used to set border 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.

Visible To set visibility of control on the form.

Height It is used to set height of the control.

Width It is used to set width of the control.

Checked It is used to set check state of the control either true or false.

[Link] DropDownList
The DropDownList is a web server control which is used to create an HTML Select
component. It allows us to select an option from the dropdown list. It can contain any
number of items
Panel control:

The Panel control works as a container for other controls on the page. It controls the
appearance and visibility of the controls it contains. It also allows generating controls
programmatically.
The basic syntax of panel control is as follows:
<asp:Panel ID= "Panel1" runat = "server"></asp:Panel>

Button Control:
Displays a push button control on the Web page. The Push button can be a command
button or a submit button. A command button has a command name and permits us to
create multiple buttons on a page. When a command button is clicked, we can also
implement an event handler to control the actions to be performed. A Submit button
does not have a command name and when the button is clicked, it posts the web page
back to the server. When a submit button is clicked, we can also implement an event
handler to control the actions to be performed.
Some of the important properties of a button control are:
CausesValidation: This indicates whether validation will be performed when this
button will be clicked. Here, the Value can be set as true or false.
PostBackUrl: This specifies the URL of the page to post to from the current page
when a button is clicked.
ValidationGroup: It enables you to specify which validators on the page are called
when the button is clicked. If no validation groups are established, a button click calls
all of the validators that are on the page.
OnClientClick: Attach a client side (JavaScript) event that will fire when this button
will be clicked.
OnClick: Raises the Click event of the Button control.

Note:
In spite of whether the JavaScript is enabled or not, this button will work if the
property for user SubmitBehavior is set to true and if this property is set to false and
JavaScript is disabled then this control will not work at all.

LinkButton Control
The LinkButton control is used to create a hyperlink-style button on the Web page.
This control looks like a Hyperlink control but almost has the functionality of the
Button control. Despite being a hyperlink, you can't specify the target URL. There is
no UserSubmitBehavior property like the Button control with this control.
Some of the important properties of LinkButton Control are:
CausesValidation: This indicates whether validation will be performed when this
button will be clicked. Here, the Value can be set as true or false.
PostBackUrl: This Specifies the URL of the page to post to from the current page
when the LinkButton control is clicked.
ValidationGroup: The group of controls for which the LinkButton control causes
validation when it posts back to the server.
OnClick: Attach a server side method that will fire when this button will be clicked.
OnClientClick: Attach a client side (JavaScript) method that will fire when this
button will be clicked.
Note:
Usually, this control is used to give a uniform look and feel throughout the page or
site if you are using a hyperlink. Also if you have less space and want to show a
control that can fire a server-side event; placing a Button control will not work as this
takes more space as well as its look and feel is completely different than the
LinkButton control.

ImageButton
Its like an ASP Button control, the only difference is, you have the ability to place
your own image as a button. You use an image Button when you want your button to
look different than the plain rectangular button. Any image can be a button!. Some of
the important properties of an ImageButton Control are:
ImageUrl: Gets or Sets the location of the image to display as button control.
CausesValidation: This indicates whether validation will be performed when this
button will be clicked. Here, the Value can be set as true or false.
PostBackUrl: This Specifies the URL of the page to post to from the current page
when the LinkButton control is clicked.
OnClick: Attach a server side method that will fire when this button will be clicked.
OnClientClick: Attach a client side (JavaScript) method that will fire when this
button will be clicked.

How to create an image button?

To create an image, you first add an image. You can add an image button visually or
manually. Here is an example: <%@ Page Language="C#" %> html> Setting the
Image button properties visually. Manually, in the Solution Explorer, right-click to the
Project->add new folder->rename it as images->add some images into it. After that,
when we insert the imageButton tool from the toolbox into our design window form,
then go to the properties of the ImageButton by pressing F4. In this one the property
called ImageUrl will show you some of the images that you have inserted before, then
select any of them and click Ok.

The following .aspx Code example demonstrates how to design Button, LinkButton
and ImageButton controls:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="[Link]" In

herits="buttons" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
style="z-index: 1; left: 23px; top: 56px; position: absolute" Text="click!" />
<asp:LinkButton ID="LinkButton1" runat="server" EnableTheming="True"
onclick="LinkButton1_Click"
style="z-index: 1; left: 24px; top: 194px; position: absolute"
ToolTip="Link to another page">LinkButton</asp:LinkButton>
 <p style="height: 669px">
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/images/[Link]" onclick="ImageButton1_Click"
style="z-index: 1; left: 16px; top: 294px; position: absolute; height: 80px;
width: 88px; right: 1177px; bottom: 421px" />
<asp:TextBox ID="TextBox1" runat="server"
style="z-index: 1; left: 20px; top: 383px; position: absolute"></asp:TextBox>
</p>
<p>&nbsp;</p>
</form>
</body>
</html>
.[Link] Code

using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
public partial class buttons : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
[Link] = "You clicked the button!";
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
[Link]("[Link]");//move to the next link i.e [Link]
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
[Link]="keep smiling";
}
}

The output will be as follows:

When we click on the click! button, the output is:

When we click on linkbutton, it will open the new link; press to click and it will
show you the output as:

Now when we click on the imagebutton, which is a smiley, it will send the message to
the Textbox:
<!DOCTYPE html>
<html>
<body>

<form runat="server">
<table>
<tr>
<td>
<table bgcolor="#b0c4de" cellspacing="10">
<tr>
<td align="right">Name:</td>
<td><asp:TextBox id="txt_name" runat="server"/></td>
<td>
<asp:RequiredFieldValidator
ControlToValidate="txt_name"
ErrorMessage="Name"
Text="*"
runat="server"/>
</td>
</tr>
<tr>
<td align="right">Card Type:</td>
<td>
<asp:RadioButtonList id="rlist_type"
RepeatLayout="Flow"
runat="server">
<asp:ListItem>Diners</asp:ListItem>
 <asp:ListItem>MasterCard</asp:ListItem>
<asp:ListItem>Visa</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:RequiredFieldValidator
ControlToValidate="rlist_type"
ErrorMessage="Card Type"
InitialValue=""
Text="*"
runat="server"/>
</td>
</tr>
<tr>
<td></td>
<td><asp:Button id="b1" Text="Submit" runat="server"/></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<asp:ValidationSummary
HeaderText="You must enter a value in the following fields:"
DisplayMode="BulletList"
EnableClientScript="true"
runat="server"/>
</form>

</body>
</html>

3.2 Rich Controls: Calendar, Wizard, File Upload

Rich Controls
[Link] provides large set of controls. These controls are divided into different categories,
depends upon their functionalities. The followings control comes under the rich controls
category.

 FileUpload control
 Calendar control
 AdRotator control
 MultiView control
 Wizard control
FileUpload control
FileUpload control is used to browse and upload files. After the file is uploaded, you can store
the file on any drive or database. FileUpload control is the combination of a browse button
and a text box for entering the filename.

The FileUpload control supports the following important properties.

 FileBytes: It returns the contents of uploaded file as a byte array
 FileContent: You can get the uploaded file contents as a stream.
 FileName: Provides the name of uploaded file.
 HasFile: It is a Boolean property that checks whether particular file is available or
not.
 PostedFile: Gets the uploaded file wrapped in the HttpPostedFile object.

Example

using System;
using [Link];
public partial class RichControl : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSave_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
if ([Link])
{
try
{
[Link](" Uploaded file: {0}", [Link]);
//save the file
[Link](@"C:\" + [Link]);
//Showing the file information
[Link]("<br/> File Name: {0}" + [Link]);
[Link]("<br/> File type: {0}"+ [Link]);

[Link]("<br/> File length: {0}" + [Link]);

[Link] = [Link]();
}
catch (Exception ex)
{
[Link]("<br/> Error <br/>");
[Link]([Link]);
[Link] = [Link]();
}
 }
else
{
[Link] = [Link]();
}
}
}

Calendar control
Calendar control provides you lots of property and events. By using these properties and
events you can perform the following task with calendar control.

 Select date.
 Selecting a day, a week or a month.
 Customize the calendar's appearance.
The Calendar control supports three important events:

Event Description

SelectionChanged This event is fired when you select a day, a week or an entire month.

DayRender This event is fired when each data cell of the calendar control is rendered.

VisibleMonthChanged It is raised when user changes a month.

Calendar control supports SelectionMode property that allows you to select a single day,
week, or entire month.

Example

using System;
using [Link];
public partial class RichControl : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{
}
 protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
[Link] ="Todays date is: "+ [Link]();
[Link] = "Your date of birth is: " + [Link]();
}
}

When you select a date, SelectionChanged event will fired and displays the date in a label
controls.
In this example the date format is MM/DD/YYYY.

Output:

Wizard Control

This control is same as MultiView control but the main difference is that, it has inbuilt
navigation buttons.

The wizard control enables you to design a long form in such a way that you can work in
multiple sub form. You can perform the task in a step by step process. It reduces the work of
developers to design multiple forms. It enables you to create multi step user interface. Wizard
control provides with built-in previous/next functionality.

The Wizard control can contains one or more WizardStep as child controls. Only one
WizardStep is displayed at a time. WizardStep control has an important property called as
StepType. The StepType property determines the type of navigation buttons that will be
displayed for that step. The possible values are:
 The StepType associated with each WizardStep determines the type of navigation buttons that
will be displayed for that step. The StepTypes are:

 Start:
 Step:
 Finish:
 Complete:
 Auto:
Drag the Wizard control on the web page from toolbox, you will get the following code.

<asp:Wizard ID="Wizard1" runat="server" Height="75px" Width="140px">

<WizardSteps>
<asp:WizardStep runat="server" title="Step 1">
</asp:WizardStep>
<asp:WizardStep runat="server" title="Step 2">
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>

You can put WizardStep according to application need.

Important events of Wizard control are as follows:

 ActiveStepChanged:
 CancelButtonClick:
 FinishButtonClick:
 NextButtonClick:
 PreviousButtonClick:
Now we will create an application as we had done with MultiView control. We will create
three different WizardStep in Wizard control.

1. In First step we will design to capture Product details

2. In Second step we will design to capture Order details
3. Next we will show summary for confirmation
[Link] file

using System;
using [Link];

public partial class WizardControl : [Link]

{
protected void Page_Load(object sender, EventArgs e)
 {
}
protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
[Link]("[Link]");
}
protected void Wizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
{
if ([Link] == 2)
{
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
}
}
}

Register the event for Next button by using property window with event tab. In the given
example, for going third step from second we have to set [Link] == 2. Here
StepIndex is zero based.

FinishButtonClick event performs the final WizardStep with a summary of the answers
entered in the previous WizardStep controls.

3.5 Styles, themes and Master pages in [Link]

 CSS Introduction
CSS (Cascading Style Sheets) is used for defining styles to display the elements written in a markup
language. It helps user separate the HTML or XHTML content from it style. The separation provides
flexibility, faster accessibility to content, reduces complexity and repetition of data.
The syntax for CSS has two parts, a selector and one or more declarations. The selector contains
HTML element for which the style is to added. The declaration contains property and a value
associated with it. The pictorial representation of the syntax is shown below:
There are two types of style sheets declaration used for designing. The list of details are explained
below:

o Internal Style Sheet

o External Style Sheet

Internal Style Sheet: The style is defined in the <head> section of the web page using the <style> tag.
The styles defined are limited to the particular web page in which it is declared. User must create a new
style for every new page added in the document. Internal Styles are also known as ‘Embedded’ styles.
External Style Sheet: The styles created in an external style sheets can be reused by many applications.
There is an external style page created and it can be linked to the web page. The external style sheet is a
text file created with .css extension.
Inline Style Sheet: The Inline style sheets are used for adding style to the particular element in the web
page. The inline style element is embedded directly in the html elements. The selector element is not
required in Inline styles. An example of adding an Inline style in an html element is as mentioned
below:
It is not efficient to use the Inline style for large codes as the style is limited for an individual element.
<p style=”font-family : arial; color:red; font-size:16px;”></p>

Themes
A theme decides the look and feel of the website. It is a collection of files that define
the looks of a page. It can include skin files, CSS files & images.

We define themes in a special App_Themes folder. Inside this folder is one or more
subfolders named Theme1, Theme2 etc. that define the actual themes. The theme
property is applied late in the page's life cycle, effectively overriding any
customization you may have for individual controls on your page.

How to apply themes

There are 3 different options to apply themes to our website:

1. Setting the theme at the page level: the Theme attribute is added to the
page directive of the page.
1. <%@ Page Language="C#" AutoEventWireup="true
" CodeFile="[Link]" Inherits="Defau
lt" Theme="Theme1"%>
2. Setting the theme at the site level: to set the theme for the entire website
you can set the theme in the [Link] of the website. Open the
 [Link] file and locate the <pages> element and add the theme
attribute to it:
1. <pages theme="Theme1">
2. ....
3. ....
4. </pages>
3. Setting the theme programmatically at runtime: here the theme is set at
runtime through coding. It should be applied earlier in the page's life
cycle ie. Page_PreInit event should be handled for setting the theme. The
better option is to apply this to the Base page class of the site as every
page in the site inherits from this class.

[Link] = Theme1;
Uses of Themes
1. Since themes can contain CSS files, images and skins, you can change
colors, fonts, positioning and images simply by applying the desired
themes.

2. You can have as many themes as you want and you can switch between
them by setting a single attribute in the [Link] file or an individual
aspx page. Also you can switch between themes programmatically.

3. Setting the themes programmatically, you are offering your users a quick
and easy way to change the page to their likings.

4. Themes allow you to improve the usability of your site by giving users
with vision problems the option to select a high contrast theme with a
large font size.
Example

Create 2 themes for the page – one with red background (Theme1) and another with
an image as a background (Theme2). When the user selects a particular theme from
the ListBox then that theme should be applied dynamically for the page.

Answer
1. Solution Explorer -> Right click -> Add [Link] folder -> Themes.

A new folder App_Themes is added to the Solution Explorer and a new

folder Theme1 is added inside it.

2. Theme1 -> Right click -> Add new item -> Stylesheet -> name it as
[Link]

3. Inside [Link]
1. body
2. {
3. background-color:Red;
4. }
4. Again add a new file.

App_Themes -> Right click -> Add [Link] folder -> Themes

A new folder Themes2 is created.

5. Themes2 -> Right click -> Add new item -> Stylesheet -> name it as
[Link]

6. Create an Images folder inside Theme2 and add a picture file [Link]
inside this. File [Link] contains –
1. body
2. {
3. background-image:url(Images/[Link]);

4. }
7. Now create a [Link] as follows. Add a heading and a list box
having AutoPostBack to True.
1. <body>
2. <form id="form1" runat="server">
3. <div>
4. <h3>Select your page Theme : </h3>
5. <asp:ListBox ID="ListBox1" runat="se
rver" AutoPostBack="True" Height="41px" onse
lectedindexchanged= "ListBox1_SelectedIndexC
hanged" Width="175px">
6. <asp:ListItem>Theme1</asp:Li
stItem>
7. <asp:ListItem>Theme2</asp:Li
stItem>
8. </asp:ListBox>
9. <br />
10. </div>
11. </form>
12. </body>
 8. Inside the [Link] file a static variable themeValue is defined
which saves the value of current theme. In the Page_PreInit event of the
page, selected theme from the ListBox is applied to the page and inside
the constrctor of the page this PreInit event is provided a EventHandler.
1. public partial class default : [Link].
Page
2. {
3. static string themeValue;
4.
5. public ThemeTest()
6. {
7. [Link]+=new EventHandler(Page_PreI
nit);
8. }
9.
10. private void Page_PreInit(object sende
r, EventArgs e)
11. {
12. [Link] = themeValue;
13. }
14.
15. protected void ListBox1_SelectedIndexC
hanged(object sender, EventArgs e)
16. {
17. themeValue = [Link].V
alue;
18. [Link]([Link]
ng());
19. }
20. }
Now run the page. When we select the Theme from the ListBox, immediately the
page is automatically applied with the theme.

Master Page:
In this chapter, we will learn about [Link] master pages. When we create
a master page, we can lay it out, apply styles, and add [Link] controls in
the same way as in other pages in Microsoft Expression Web. The layout
and content we create in a master page are applied to the pages attached to
the master page. It is a similar concept to Dynamic Web Template.

Dynamic Web Templates enable you to apply a common look and feel to all
the pages in your website. As Dynamic Web Templates are applied in the
pages to which they are attached at design time, applying changes to all the
pages in a site can cause a delay while the HTML is updated in all the pages.

If the server is running [Link], [Link] Master Pages allow for similar
functionality by defining the editable areas in the template. However, the
application of the template to the custom content in the pages is done
dynamically at runtime.

Example
Let’s take a look at a simple example in which we will create a master page
using CSS template and use this master page to create other pages.

Step 1 − Open the [Link] page in which we have defined different

sections using CSS style-sheet.

Step 2 − From the File menu, go to New → Page and you will see the New
page dialog.
Step 3 − From the left pane, select [Link] and from the middle list, select
Master Page and click the OK button.
Step 4 − The above screen will produce a pop-up named [Link].
Save this page and name it [Link].

Step 5 − We want to build our design into the master page that will be
shared throughout our site. So let’s copy the code of the content that you
would like to have on each page from the [Link] code and paste the
code to the [Link] page.
Step 6 − Now we have a layout that we would like to use on every page of
the site. However, if we were to start building the content pages now, we
wouldn't be able to actually enter any content into this layout. Hence, we
need to create ASPX content pages from the master page. To do this, we
have to add the content region as well so that we can add content to the
specified pages.
In the design view, right-click where you want the content on your pages.
Let’s say we want to add content in the main-content section and then click
the Manage Microsoft [Link] Content Regions…

Step 7 − In the Manage Content Regions wizard, enter the Region

Name and click Close.

Step 8 − As can be seen in the following screenshot, the Content

PlaceHolder is added in the main-content section. Now we have to add
ASPX web page.
Step 9 − Go to the File menu and select New → Create from Master
Page…

Step 10 − Browse to the [Link] page and click OK.

Step 11 − Now, a new ASPX page is created and all the layout styles are
applied from the master page.

Add some text in the main section.

Step 12 − Save this page and call it [Link] and then preview it in a
browser.