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

Database-Driven Web Sites, Second Edition2 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

Database-Driven Web Sites, Second Edition3 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

Database-Driven Web Sites, Second Edition4 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

Database-Driven Web Sites, Second Edition5 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

Database-Driven Web Sites, Second Edition6 Server-Side Processing Using HTML Forms 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

Database-Driven Web Sites, Second Edition7 Server-Side Processing Using HTML Forms Figure 8-2 shows standard HTML form processing

Database-Driven Web Sites, Second Edition8 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

Database-Driven Web Sites, Second Edition9 Server-Side Processing Using Web Forms Figure 8-5 shows Web form processing

Database-Driven Web Sites, Second Edition10 Server-Side Processing Using Web Forms 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

Database-Driven Web Sites, Second Edition11 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

Database-Driven Web Sites, Second Edition12 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_commands End Sub

Database-Driven Web Sites, Second Edition13 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

Database-Driven Web Sites, Second Edition14 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

Database-Driven Web Sites, Second Edition15 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

Database-Driven Web Sites, Second Edition16 Creating HTML Elements in Web Forms 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

Database-Driven Web Sites, Second Edition17 Creating HTML Elements in Web Forms 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

Database-Driven Web Sites, Second Edition18 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

Database-Driven Web Sites, Second Edition19 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

Database-Driven Web Sites, Second Edition20 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 tags, the Label’s InnerText property is used

Database-Driven Web Sites, Second Edition21 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

Database-Driven Web Sites, Second Edition22 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

Database-Driven Web Sites, Second Edition23 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

Database-Driven Web Sites, Second Edition24 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

Database-Driven Web Sites, Second Edition25 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

Database-Driven Web Sites, Second Edition26 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

Database-Driven Web Sites, Second Edition27 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

Database-Driven Web Sites, Second Edition28 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

Database-Driven Web Sites, Second Edition29 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

Database-Driven Web Sites, Second Edition30 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

Database-Driven Web Sites, Second Edition31 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

Database-Driven Web Sites, Second Edition32 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

Database-Driven Web Sites, Second Edition33 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

Database-Driven Web Sites, Second Edition34 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

Database-Driven Web Sites, Second Edition35 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

Database-Driven Web Sites, Second Edition36 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

Database-Driven Web Sites, Second Edition37 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

Database-Driven Web Sites, Second Edition38 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

Database-Driven Web Sites, Second Edition39 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

Database-Driven Web Sites, Second Edition40 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

Database-Driven Web Sites, Second Edition41 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