Web ProgrammingBuilding ASP.NET Applications

T. Ahlam Algharasi4th Level

2

Standard Controls

Label Control

The Label control is one of the primary output controls.

It defines an area on the Web page to which output can

be written. This control can be used to display static text,

or it can be used as a dynamic output area controlled by

scripts. Description Property

The text to display in the label Text

3

Standard Controls

Displaying Static Text Example

4

Standard Controls

Using html Tags to format the output text .

Standard Controls

05.5

6

Standard Controls

Image Control Is used to place an image on the page.

Description Property

Url of image location. ImageUrl

Appears if image not loaded properly or if image is missing in the specified location.

AlternetText

Text message Appearing on mouse over the image

Tooltip

Used to align the Text beside image. ImageAlign

7

Standard Controls Hyperlink Control

Is used to link to another location or page.

Description Property

Used to place an image instead of text as Hyperlink.

ImageUrl

Used to specify the location to link to. NavigateUrl

To display link as text Text

Specifying where the linked page is opened.

Target

8

Standard Controls

If both Text and ImageUrl properties are set, the ImageUrl

property takes precedence and the Text property serves as

a Tool Tip. If the image is unavailable, the Text property is

displayed.

9

Standard Controls

Button Control Is used to link to another location or page.

LinkButton Control displays a clickable text link

ImageButton Control displays an image that responds to mouse clicks

like a button.

Description Property

Specifies the URL of the page to post to from the current page when a button is clicked

PostBackUrl

Specifies the text on a button Text

10

Standard Controls RadioButton control

Is used to give single select option to the user from multiple items.

Description Property

Form is automatically posted back when Radio button selection is changed.

AutoPostBack

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

Checked

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

GroupName

The text next to the radio button Text

On which side of the radio button the text should appear (right or left)

TextAlign

11

Standard Controls

Example

12

Standard ControlsExample of Automatic Post-Back

13

Standard Controls RadioButtonList control

is a single control that groups a collection of radio buttons.

Description Property

The value of the selected item in a list SelectedValue

The index number of the selected item in a list

SelectedIndex

A collection of list items in the list Items

On which side of the radio button the text should appear (right or left)

TextAlign

Specifies whether the radio button group should be repeated horizontally or vertically

RepeatDirection

14

Standard Controls

Example

15

Standard Controls

CheckBox control is used to give an option to the user.

Description Property

A Boolean value that specifies whether the form should be posted immediately after the Checked property has changed or not. Default is false

AutoPostBack

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

Checked

A collection of list items in the list Items

On which side of the radio button the text should appear (right or left)

TextAlign

16

Standard Controls

CheckBoxList control is a single control that groups a collection of checkable list

items.

Description Property

A Boolean value that specifies whether the form should be posted immediately after the Checked property has changed or not. Default is false

AutoPostBack

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

Checked

Get the first selected item SelectedItem

A collection of list items in the list Items

On which side of the radio button the text should appear (right or left)

TextAlign

Horizontal/Vertical. RepeatDirection

17

Standard Controls DropDownList control

is used to give a single select option to the user from multiple listed items.

ListBox control ListBox control is used to give a single or multiple select

option to the user.

Description Property

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

Rows

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

SelectionMode

Standard Controls

Example

05.18

19

Standard Controls

ImageMap control is used to create an image that contains clickable hotspot

region.

Description Property

Url of image location. ImageUrl

Appears if image not loaded properly AlternetText

Appears when on mouse over the image Tooltip

define any number of hot spot regions within the image

HotSpots

20

Standard Controls

Creating an Image Map An image map can be created from any graphic image by

defining rectangular, circular, or polygonal shapes overlying portions of the image. These shapes become the clickable hot spots to issue URL navigations or subprogram calls.

The information needed to define these shapes are Rectangle - the pixel coordinates of the top-left and

bottom-right corners

Circle - the pixel coordinates of the center and its radius

Polygon - the pixel coordinates of each corner point

21

Standard Controls

Image Map Coordinates

Standard Controls

Rectangle - left-top : 49,36; right-bottom : 216,148

Circle - center:368,200; radius:76

Polygon - corner points: 143,187 237,249 222,333 107,333 76,254

05.22

Image Map Coordinates

23

ASP.NET Web Forms

All server controls must appear within a <form> tag, and the <form> tag must contain the runat="server" attribute.

The form is always submitted to the page itself.

If you omit the method attribute, it will be set to method="post" by default.

<form runat="server">

...HTML + server controls

</form>

24

ASP.NET Web Forms

Request Object

The Request object can be used to retrieve user information

from forms.

User input can be retrieved with the Request.QueryString or

Request.Form command.

1. Request.QueryString

The Request.QueryString command is used to collect

values in a form with method="get".

Information sent from a form with the GET method is

visible to everyone (it will be displayed in the browser's

address bar) and has limits on the amount of information

to send.

25

ASP.NET Web Forms

2. Request.Form

The Request.Form command is used to collect values in a

form with method="post".

Information sent from a form with the POST method is

invisible to others and has no limits on the amount of

information to send.

Syntax:

Request.Form (Control_ID)

Request.QueryString(Control_ID)

26

ASP.NET Web Forms Example of sending information using “Post” Method

First Page

Second Page

27

ASP.NET Web Forms Code

First Page

Default method is post

28

ASP.NET Web Forms Code

Second Page

29

ASP.NET Web Forms Example of sending information using “Get” Method

First Page

Second Page

30

ASP.NET Web Forms Code

First Page

Method is Get

31

ASP.NET Web Forms Code

Second Page

Questions