Developing Web Applications Using ASP.

NET
Objectives

In this session, you will learn to:

Explain the differences between HTML controls and Web
server controls
Describe the different types of Web server controls
Explain how to use HTML controls and Web server controls
Explain how the postback model of ASP.NET 2.0 works
Create Web-based user interfaces with HTML controls and
Web server controls
Write code that interacts with Web server controls
Write code that interacts with the postback model of ASP.NET
2.0

Ver. 1.0 Slide 1 of 26

Developing Web Applications Using ASP.NET
HTML Controls and Web Server Controls

HTML Controls:
HTML controls are used to add static HTML elements to a Web
page.
By default, HTML controls are not accessible to the server-side
code in the Web page.
To enable your server-side code to interact with HTML
controls, you must specify that the control runs on the server.
Web Server Controls:
Web Server controls are .NET Framework objects that are
converted by ASP.NET to HTML elements at run time.
On receiving a request for a Web page containing Web server
controls, ASP.NET :
Generates HTML output based on the Web server controls.
Returns the HTML output to the browser.

Ver. 1.0 Slide 2 of 26

Developing Web Applications Using ASP.NET
HTML Controls and Web Server Controls
(Contd.)

Difference between HTML controls and Web server

controls:
Web Server controls are more versatile than HTML controls if
you wish to run server-side code associated with controls.
Web Server controls incur more overhead when processing the
page as compared to HTML controls.
Web Server controls support a rich programming model as
compared to their HTML equivalents.

Ver. 1.0 Slide 3 of 26

Developing Web Applications Using ASP.NET
Types of Web Server Controls

Visual Studio 2005 groups Web server controls together in

the Toolbox, based on their functionality.
The various groups of controls are:
Standard Controls
Data Controls
Validation Controls
Navigation Controls
Login Controls
WebPart Controls

Ver. 1.0 Slide 4 of 26

Developing Web Applications Using ASP.NET
Types of Web Server Controls (Contd.)

Standard Controls:
This group contains controls that provide common user
interface elements.
Standard controls include:
TextBox
ListBox
Standard Controls
DropDownList
Checkbox
RadioButton
Button
Image
Table
Calendar

Ver. 1.0 Slide 5 of 26

Developing Web Applications Using ASP.NET
Types of Web Server Controls (Contd.)

Data Controls:
This group contains controls used to manipulate data stored in
databases, XML files, and other .NET Framework objects.
Data controls include:
Grid View
SqlDataSource

Data Controls

Ver. 1.0 Slide 6 of 26

Developing Web Applications Using ASP.NET
Types of Web Server Controls (Contd.)

Validation Controls:
This group contains controls that are used to validate user
input.
Simple validation is done on the client side by generating
JavaScript code. This reduces the load on the Web server and
improves responsiveness.
Complex validation is done on the Web server.
Validation controls include:
RequiredFieldValidator
CompareValidator

Validation Controls

Ver. 1.0 Slide 7 of 26

Developing Web Applications Using ASP.NET
Types of Web Server Controls (Contd.)

Navigation Controls:
The controls in this group are used to enable the user to move
through the Web site.
Navigation controls include:
Menu
TreeView
SiteMapPath

Navigation Controls

Ver. 1.0 Slide 8 of 26

Developing Web Applications Using ASP.NET
Types of Web Server Controls (Contd.)

Login Controls:
The controls in this group are used to create login and sign-up
pages for your Web sites.
Login controls include:
Login
ChangePassword
PasswordRecovery

Login Controls

Ver. 1.0 Slide 9 of 26

Developing Web Applications Using ASP.NET
Types of Web Server Controls (Contd.)

WebPart Controls:
The controls in this group can be used to build the framework
for dynamic Web pages.
These controls are typically used in portal-type Web
applications.
WebPart controls include:
WebPartManager
WebPartZone

Web Part Controls

Ver. 1.0 Slide 10 of 26

Developing Web Applications Using ASP.NET
Working with Web Server Controls

Methods for adding Web server controls to Web forms:

Drag and drop the control from the Toolbox onto the Design
view of the Web page.
Drag and drop the control from the Toolbox into the Source
view of the Web page.
Type the markup text for the control directly into the Source
view of the Web page.

Ver. 1.0 Slide 11 of 26

Developing Web Applications Using ASP.NET
Working with Web Server Controls (Contd.)

Methods for Setting Web Server Control Properties at

Design Time:
Select the control in the Design view and set the property
values in the Properties window.
Select the markup text for the control in the Source view and
set the property values in the Properties window.
Edit the markup text for the control directly in the Source view
of the Web page.

Ver. 1.0 Slide 12 of 26

Developing Web Applications Using ASP.NET
Working with Web Server Controls (Contd.)

You can manipulate Web server controls at run time by:

Setting a writable property
Invoking a method
Reading a readable property
//Set a writable property
Textbox1.Text = “Hello World!”;
//Invoke a method
TextBox1.Focus();
//Reading a readable property
string sName = TextBox1.Text

Ver. 1.0 Slide 13 of 26

Developing Web Applications Using ASP.NET
The ASP.NET 2.0 Page Postback Model

Postback model provides a mechanism for:

Sending control properties on Web pages from the Web
browser to the Web server.
Restoring the values when a response is sent back from the
Web server to the Web browser.
This model enables Web server controls to retain their
values over multiple requests to the server.
It enables you to develop Web pages as if they are part of a
stateful application.

Ver. 1.0 Slide 14 of 26

Developing Web Applications Using ASP.NET
The ASP.NET 2.0 Page Postback Model
(Contd.)

AutoPostBack Property:
Some Web server controls support the AutoPostBack
property.
This property controls whether user interaction with the control
should invoke a round-trip request to the server.
EnableViewState Property:
This property determines whether the control should retain its
state for the duration of the postback.
This property should be set to true for those controls whose
properties are set in server-side code.

Ver. 1.0 Slide 15 of 26

Developing Web Applications Using ASP.NET
Cross-Page Posting in an ASP.NET Web Page

By default, buttons and other controls that cause a postback

on a Web page submit the page back to itself.
Controls can be configured to post to a different target page.
To enable cross-page posting, you need to set the
PostBackURL property of a control to the URL of the target
page.
To retrieve control values on the submitting page from the
target page, you can use the Page.PreviousPage object.
To retrieve the public properties on the submitting page
from the target page, you need to include the
PreviousPageType directive in the target page as:
<%@ PreviousPageType VirtualPath=
“~/SourcePage.aspx” %>

Ver. 1.0 Slide 16 of 26

Developing Web Applications Using ASP.NET
Determine How an ASP.NET Web Page Was
Invoked

A Web page can be invoked in a variety of ways:

By an original request
By a postback
By a cross-page post from another page
By transfer from another page by using the Server.Transfer
method
To determine how a page was invoked, you can examine the
following properties of the Page object:
Page.IsPostBack: This property is true when page is invoked
by a postback page and false otherwise.
Page.PreviousPage: This property contains a reference to the
source page when the page is invoked by either a cross page
posting or a server transfer. In all other cases, it contains Null.
Page.PreviousPage.IsCrossPagePostBack: This property
is true when the page is invoked by a cross page posting.

Ver. 1.0 Slide 17 of 26

Developing Web Applications Using ASP.NET
The Button.OnClientClick Property

Use the Button.OnClientClick property to specify

client-side script to be run when the Button object is
clicked.
The code that you add to this property is added to the
onclick attribute of the control.

Ver. 1.0 Slide 18 of 26

Developing Web Applications Using ASP.NET
Demo: Adding and Configuring Server Controls

Problem Statement:
You are a developer in the Adventure Works organization, a
fictitious bicycle manufacturer. You have been asked to assist
in the development of the Business-to-Consumer (B2C) Web
application and a related Business-to-Employee (B2E) extranet
portal.
Decisions on the design of the application have already been
taken. You have been asked to carry out a number of specific
tasks to implement various elements of this design.

Ver. 1.0 Slide 19 of 26

Developing Web Applications Using ASP.NET
Demo: Adding and Configuring Server Controls (Contd.)

As part of the first phase of the B2C development, you have

been asked to complete the prototypes for the following pages:
Survey.aspx. You will design a rich graphical user interface for this
page that enables users to submit responses to an online survey.
You will also add a SiteMapPath control to this page to aid user
navigation.
SurveyReceipt.aspx. You will design this page to receive the
information provided by the user in the Survey.aspx page.
FeedbackForm.aspx. You will design this page to receive the
information provided by the user in the existing Feedback.aspx
page.
Default.aspx. You will add a Menu control to this page to aid user
navigation.

Ver. 1.0 Slide 20 of 26

Developing Web Applications Using ASP.NET
Demo: Adding and Configuring Server Controls (Contd.)

You will also add and review a Web.sitemap file that will be
used to add navigation features to the Web application.
Additionally, you will add and review an advertising schedule
file that will be used to add dynamic image display features to
the Web application.

Ver. 1.0 Slide 21 of 26

Developing Web Applications Using ASP.NET
Demo: Adding and Configuring Server Controls (Contd.)

Solution:
To solve this problem, you need to perform the following tasks:
1. Build the Graphical User Interfaces with HTML Controls
a. Review the proposed design of the Survey.aspx page.
b. Open the Adventure Works Web site.
c. Define the Survey.aspx page layout by using HTML controls in Design view.
d. Define the Survey.aspx page layout by modifying HTML markup in Source
view.
e. Add HTML Input controls to the Web page.

Ver. 1.0 Slide 22 of 26

Developing Web Applications Using ASP.NET
Demo: Adding and Configuring Server Controls (Contd.)

2. Build Graphical User Interfaces with Web Server Controls

a. Review the proposed design of the Survey.aspx page.
b. Refine the Survey.aspx page layout by using an ASP.NET Table Web server
control in Design view.
c. Modify the properties of the Table Web server control.
d. Add rows to the Table Web Server control by using Source view.
e. Add a nested Table Web server control in Source view.
f. Add Web server controls to the Table control.
g. Add site navigation functionality by using Web server controls.
h. Incorporate advertising functionality with Web server controls.

Ver. 1.0 Slide 23 of 26

Developing Web Applications Using ASP.NET
Demo: Adding and Configuring Server Controls (Contd.)

3. Program Web Server Controls and Work with Postbacks

a. Manage the Click event for the ImageMap object.
b. Create the OnClientClick property and the server-side Click event for
the Submit button.
c. Determine if an ASP.NET Web page was invoked as part of the postback
process.
d. Create a page that can receive and process information submitted as part of a
cross-page postback.
e. Test the Web application.

Ver. 1.0 Slide 24 of 26

Developing Web Applications Using ASP.NET
Summary

In this session, you learned that:

HTML controls are representations of HTML markup which are
not accessible to the server side code.
Web server controls are .NET Framework objects that are
converted by ASP.NET to HTML elements at run time.
Visual Studio 2005 provides many groups of Web server
controls based on their functionality, such as Standard
Controls and Data Controls.
You can add Web server controls to Web forms from the
Toolbox or by typing markup text.
You can set Web server control properties at design time as
well at run time.
The ASP.NET postback model is designed to provide stateful
rendering of dynamic content on a Web page.

Ver. 1.0 Slide 25 of 26

Developing Web Applications Using ASP.NET
Summary (Contd.)

The Page object exposes the IsPostBack property that you

can use to determine how a page was invoked.
You can configure the controls to post to a different target page
referred to as cross-page posting.
When a page is invoked by another page, you can retrieve
control values and public properties of the invoking page from
the invoked page.

Ver. 1.0 Slide 26 of 26