Database-Driven Web Sites, Second Edition1 Chapter 8 Processing ASP.NET Web Forms and Working With Server Controls

Database-Driven Web Sites, Second Edition 1

Chapter 8

Processing ASP.NET Web Forms and Working With

Server Controls


Objectives

In this chapter, you will:

• Learn how Web servers use server-side processing to create dynamic Web pages

• Learn how to create event handlers for ASP.NET server controls

• Understand the differences between HTML server controls and rich server controls


Objectives

In this chapter, you will:

• Create HTML elements in Web forms

• Create HTML server controls

• Create list, radio button, check box, and calendar rich server controls

• Learn how to create validation controls


Creating Dynamic Web Pages Using Server-Side Processing

• When a user runs a dynamic Web page that uses server-side processing, the Web server: – Receives a request from a user’s browser

– Processes the commands to create the dynamic Web page

– Sends the finished Web page back to the user’s browser


Server-Side Processing Using HTML Forms

• The client browser first requests a static Web page from the Web server

• The Web server returns the static Web page, which contains an HTML form

• The user enters data values in the HTML form and clicks the form’s Submit button

• This causes the browser to run the Web server servicing program that the HTML form’s action attribute specifies



• The browser also submits the form input values to the Web server

• The servicing program processes the form inputs and creates a dynamic Web page, which the Web server then returns to the client browser



Figure 8-2 shows standard HTML form processing


Server-Side Processing Using Web Forms

• The client browser initially requests the Web form using the Web form’s URL

• The Web server returns to the client browser an HTML document that represents the Web form

• When the browser posts the Web form back to the server, the server runs the event handlers associated with the events that the user raises on the form

• The Web server returns the Web form’s HTML source code to the client browser, which displays the source code as a Web page



Figure 8-5 shows Web form processing



• Each time that the browser sends the form to the server and then receives back its HTML source code is called a round trip

• The Web form processing stages are ASP.NET Page Framework Initialization, User Code Initialization, Validation, Event Handling, and Cleanup


Creating Event Handlers in Web Forms

• Event handlers: procedures that execute in response to user events

• An event handler has an associated control, such as a button, and an associated event, such as the user clicking the button

• To create an event handler in a Web form, the developer needs to open the Web form in the Design window in Design view


Creating Event Handlers in Web Forms

• An event handler has the following general syntax:

Private Sub controlID_Event (parameter_list) Handles controlID.Event event_handler_commandsEnd Sub


Creating HTML Elements and Server Controls in Web Forms

• Web forms can contain standard HTML elements, such as text and tags that represent images, text inputs, and hyperlinks

• Web forms can also contain HTML server controls

• HTML server controls are almost identical to HTML form elements, except they have associated event handlers that run on the server


Creating HTML Elements and Server Controls in Web Forms

• Web forms can also contain rich server controls, which are similar to HTML server controls, except that they have a wider array of properties and richer functionality

• To minimize Web server processing and optimize the performance of a Web applications, standard HTML elements should be used to create items that program commands do not reference or modify


Creating HTML Elements in Web Forms

• The Toolbox contains tools to create standard HTML elements

• The Toolbox also contains two elements that are not standard HTML elements: Label and File Field



• HTML Label element: represents a distinct text element that appears on the Web form

• HTML File Field element: consists of a text input and a Browse button

• When the user clicks Browse, the system allows the user to select a file from his or her local workstation and upload the file to a location on the Web server



• The HTML Toolbox tab also contains Flow Layout Panel and Grid Layout Panel selections

• When a Flow Layout Panel is created on a Web form, Visual Studio .NET creates a distinct area on the Web form in which the elements appear within a flow layout

• When a Grid Layout Panel is created on a Web form, Visual Studio .NET creates a distinct area in which the elements appear within a grid layout


Creating HTML Server Controls in Web Forms

• An HTML server control is a standard HTML element whose tag contains the runat="server" attribute specification

• To convert an HTML element to an HTML server control in Visual Studio .NET, a developer needs to:– Create the HTML element in Design view

– Right-click the element

– Check Run As Server Control so a check mark appears before this selection


Creating New HTML Server Controls

• To create a new HTML server control, a Web developer needs to: – Open the Web form in the Browser Window in

Design view

– Create the server control as an HTML element

– Convert the element to a server control

– Modify the control’s ID attribute value in the Properties Window


Creating HTML Server Control Event Handlers

• To create event handlers for HTML server controls, a developer would double-click the control on the Web form in Design view

• Visual Studio .NET creates a template for the event handler in the Web form’s code behind file

• To reference the current value that appears between an HTML Label server control’s <div> tags, the Label’s InnerText property is used


Creating a File Field HTML Server Control

• Web programmers use File Field HTML server controls to allow users to upload files to the Web server

• A File Field HTML server control consists of a text input field, a Browse button, and an associated Submit button


Creating a File Field HTML Server Control

• When the user clicks Browse, a Choose file dialog box opens, which allows the user to select a file from the file system on his or her workstation

• When the user clicks the Submit button that is associated with the File Field, the browser posts the Web form back to the server, and an event handler executes that uploads the selected file to a location in the Web server’s file system


Creating Rich Server Controls in Web Forms

• Some of the commonly used rich server controls are:– Button– Calendar– CheckBox– CheckBoxList– DropDownList– Label– ListBox– Panel– RadioButton– RadioButtonList– TextBox


Using Rich Server Controls to Create Lists

• ListBox: similar to a selection list; displays multiple items on the screen from which the user can make a selection

• DropDownList: similar to a selection list in which the size attribute value is 1


Using Rich Server Controls to Create Lists

• To create a ListBox or DropDownList rich server control, a developer – Selects the associated tool in the Toolbox– Draws the control on the Web form

• Each item in a ListBox or DropDownList rich server control is a member of a collection class named Items

• To reference a list item, the list item’s position in the list’s Items collection is specified using an index value that corresponds to the item’s list position


Using Rich Server Controls to Create Radio Buttons

• Radio buttons: allow the user to select a single value from a group of related values

• Radio button group: related radio buttons, which allow the user to select only one button in the group at one time

• RadioButtonList: a special kind of a list that displays its items as radio buttons


Using Rich Server Controls to Create Radio Buttons

• RadioButton: similar to the radio button HTML form element

• Each radio button has a – Text property that specifies the text value that

appears next to the radio button

– Checked property that can have a value of either True or False indicating whether or not the button is selected


Using Rich Server Controls to Create Check Boxes

• Check box: defines an element that can have one of two distinct values, such as on or off, or true or false

• CheckBox: creates a single check box• CheckBoxList: creates a series of check boxes• To reference an individual check box within the

CheckBoxList, the Items collection is used with the check box’s index value


Creating a Calendar Rich Server Control

• Calendar: displays a calendar showing the days in the current month

• The user can move to future and previous months, and select a date that then appears in a text input on the form


Setting the Tab Order of Web Form Controls

• In Web applications, users should be able to press the Tab key to move to form controls in a top-down, left-to-right order

• TabIndex property: controls the order that the insertion point moves through Web form HTML server and rich server controls


Creating Validation Controls in Web Forms

• Because validation controls automatically generate client-side form validation function commands, they save development time and effort

• In addition, if a user’s browser does not support JavaScript, the validation controls automatically perform the validation tasks using validation functions that the Web server processes during the Validation Web form processing stage


Creating RequiredFieldValidator Validation Controls

• One of the most common data entry validation tasks is to ensure that the user enters values in TextBox controls that contain required input values

• RequiredFieldValidator: confirms that the user enters a value in a specific TextBox control

• A separate RequiredFieldValidator must be created for each TextBox control that represents a required value


Creating RangeValidator Validation Controls

• RangeValidator: evaluates input values to confirm that the values are of a specific data type that fall within a specific range

• A separate RangeValidator control is created for each TextBox in which the value must fall within a specific range

• A RangeValidator validation control has three main properties: – MaximumValue – MinimumValue– Type


Creating CompareValidator Validation Controls

• CompareValidator: compares an input value with another input value or compares an input value with a predefined literal value

• ControlToValidate property: specifies the TextBox associated with the validation control

• ErrorMessage property: defines the error message that appears on the Web form


Creating CompareValidator Validation Controls

• To use the validation control to compare the input value to – the value of another TextBox, the other TextBox’s

(ID) value is specified in the validator control’s ControlToCompare property

– a literal value, the literal value is specified in the validation control’s ValueToCompare property


Creating RegularExpressionValidator Validation Controls

• Another important data validation task is to ensure that users enter input values in the correct formats

• RegularExpressionValidator: confirms that an input value is in a specific format based on a regular expression

• Regular expression: a concise syntax that programmers use to specify a pattern of letters, numbers, and formatting characters


Creating RegularExpressionValidator Validation Controls

• The required format is specified as a regular expression in the validation control’s ValidationExpression property

• The Regular Expression Editor can be used to select or specify the ValidationExpression property value


Creating ValidationSummary Validation Controls

• Every validation control mentioned so far displays its error message as a separate text message on the Web form

• A ValidationSummary validation control displays all form validation error messages in a single error message

• A ValidationSummary validation control can be configured to display the error summary in a JavaScript alert or to display the summary as text directly on the Web form


Creating CustomValidator Validation Controls

• To create custom validation controls, a CustomValidator validation control is used

• This control calls a custom client-side JavaScript function or a server-side VB .NET procedure that a Web programmer creates to validate the input values

• These custom functions or procedures can validate input values for one or more Web form controls


Summary

• ASP.NET Web form processing allows the user to raise events on the form by performing actions such as changing text inputs or clicking buttons

• Web form processing consists of the following stages: Initialization, User Code Initialization, Validation, Event Handling, and Cleanup

• Web developers should use HTML form elements to create static form items whose values do not change and are not referenced in program commands


Summary

• Developers should use HTML server controls to create controls for which there is no comparable rich server control

• They should use rich server controls to create form items that program commands reference

• Validation controls are Web form controls that validate user inputs

• These include the RequiredFieldValidator, the CompareValidator, the CustomValidator, the RangeValidator, the RegularExpressionValidator, and the ValidationSummary controls

Documents

Database-Driven Web Sites, Second Edition1 Chapter 8 Processing ASP.NET Web Forms and Working With Server Controls