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