ASP .Net, Web Forms and Web Controls

1

Outline

Web ControlsText and Graphics ControlsAdRotator ControlValidation Controls

Web Controls• Text and Graphics Control• Label, Button, TextBox, Image, RadioButtonList and DropDownList

• AdRotator Control• Randomly selects an image to display and then generates a

hyperlink to the Web page associated with that image• Validation Controls• Determines whether the data in another Web control are in the

proper format• Validates user input• Information in required field?• Zip-code contains exactly 5-digits

• Done on client side (unless client doesn’t support or diables scripting) 2

3Button control

RadioButtonList control

Hyperlink control

DropDownList control

TextBox control

Image control

4

Defining style class which can be applied to any element in the document by setting the HTML attribute class

5

Image control to place image on Web page

Specify file location of image display

6

NavigateUrl property specifies the resource that is requested

Defines the ListItems that display when the drop-down list is expanded

Button Web control typically maps to an input HTML element with attribute type and value “button”

7

NOTE: This application contained NO functionality.

You would need to add code to event handlers in WebControls.aspx.cs

This could be left as an exercise.

AdRotator Control• Address problem of displaying sponsor advertisement• Randomly selects an image to display• Generates hyperlink to a Web page

• Figure rotates the flags of eleven countries.• When the user clicks the image, the browser is redirected to a

Web page containing information about the country the flag represents.

• If user refreshes page, one of 11 flags is chosen at random and displayed.

8

AdRotator.aspx 9

Set adXmlDataSource control’s DataFile property to AdRotatorInformation.xml

10No code-behind because AdRotator control does “all the work”

AdRotator.aspx.cs program output

11

AdRotator image

AlternateText

AdRotator.aspx.cs Program Output

12

13

Ad elements each provide information about the advertisement

AlternateText is a tool tip which displays the message when mouse points over image

The higher the Impression value the more often the advertisement will appear

ImageUrl specifies the location of the advertisement imageNavigateUrl indicates URL for the

web page that loads when a userclicks the advertisement

Validation Controls• Validators• Determine if data in Web controls are proper format

• Example: Demonstrates two type of validation controls.

14

15

16

Create a RegularExpressionValidator name emailFormatValidator

Regular expression with which to validate user input

Indicate that that emailExistsValidator verifies inputTextBox’s contents

ErrorMessage’s text to display if error occurs

Confirm that nameTextBox’s content is not empty

17Visible property set to false initially – will not appear when page loads for the first time

18

19

Determine whether the page is being loaded due to postback

retrieve TextBox’s values

Set outputTextBox’s Visible property to true

Validation.aspx.

cs Program

Output

20

21

View HTML file

22