Developing Web Forms

Web forms represent the user interface element to a web application. Traditionally with .NET, the term web form is used to refer specifically to pages processed dynamically on the server (using ASP .NET). We use a broader definition here and use the term to refer to any web page, static or dynamic, that can be developed and designed within the Visual Studio IDE.

The HTML designer (also referred to as the Web designer) is the sister application to the Windows Forms designer; it allows you to visually design and edit the markup for a web page. As with the Windows Forms designer, it works in conjunction with the HTML designer and source view to cover all of the bases needed for web page design. We will cover the entire web application development process in depth in Chapter 13, "Writing ASP.NET Applications"; in the following sections, we will simply cover the basics of the web designers and editors.

Designing a Web Form Application

Web page design starts first with a web project. Select File, New Web Site, and from the dialog box, select the ASP .NET Web Site option. After you set the source code directory and source language, click OK to have Visual Studio create the project and its initial web page.

The web designer looks similar to the Windows Forms designer; it has a document window that acts as a canvas, allowing objects from the Toolbox to be placed and positioned on its surface. View tabs are oriented at the bottom of the designer. These tabs, not present in the other designers, allow you to quickly switch between design view and source view. In this case, source view is the actual HTML markup for the page you are designing.

Now examine what happens when you try to mimic the login form that was previously built using Windows forms. (There is actually a prebuilt login form component that you could use here; for the sake of demonstrating the development process, however, we will go ahead and cobble together our own simplistic one for comparison's sake.)

Adding and Arranging Controls

The process of adding and arranging controls doesn't change from the Windows Forms designer process. Simply drag the controls from the Toolbox onto the designer's surface. In this case, you want two labels, two text boxes, and an OK button (because this isn't a dialog box, you can dispense with the Cancel button). Changing control properties is also handled the same way via the Properties window. You can select the labels and command buttons and set their text this way.

Note

As you add controls to a web page, you should note that the default layout mode is relative. That is, controls are not placed at absolute coordinates on the screen but instead are placed relative to one another. Absolute positioning is accommodated via style sheets. For instance, you can select a label control, edit its style properties, and select Absolutely Position as the position mode. This will now allow you to range freely over the form with the control.

A formatting toolbar is provided by default; it supplies buttons for common text formatting actions such as changing font styles, colors, paragraph indenting, and bulleting.

To line up control edges the way you want, you can press Shift+Enter to insert spacing between the controls as necessary (this will generate a break tag, <br>, in the HTML). In this case, a break was added between the first text box and the second label, and between the second text box and the first button. Figure 6.34 shows the design in progress. The text boxes don't line up and you will probably want to apply a style for the label fonts and buttons, but the general layout and intent are evident.

Figure 6.34. Creating a web form.

Editing Markup

As controls and other elements are added and manipulated on the designer's surface, HTML is created to implement the design and layout. As a designer or developer, you are free to work at either the visual level with the designer or the text/source level with the HTML Source Editor. Like the other editors within Visual Studio 2005, the HTML Source Editor supports IntelliSense and other interactive features for navigating and validating markup.

To toggle between the designer and the HTML editor, use the Design and Source tabs at the bottom of the document tab. Figure 6.35 provides a peek at the HTML generated by the designer when you added the controls for the login page. Toward the bottom of the document tab, you will see the Design and Source tabs, with the Source tab selected.

Figure 6.35. Web form: source view.

Using the HTML editor, you can write your own HTML and then toggle back to the designer view to see how your changes will look within the browser. As with the design surface, a toolbar is provided here. The HTML source editing toolbar provides quick access to code "forward and back" navigation, commenting, and schema validation options (we'll discuss this specific part in a bit).

One key feature realized with the HTML editor is the concept of source format preservation: The HTML source editor works very hard to respect the way that you, the developer, want your markup formatted. This includes the placement of carriage returns and whitespace, the use of indentation, and even how you want to handle word and line wrapping. In short, Visual Studio will never reformat HTML code that you have written!

Working with Tables

HTML tables provide a quick and easy way to align controls on a web page. With Visual Studio 2005, there is a dedicated Insert Table dialog box that provides extensive control over table layout and appearance. To place a table onto the design surface, select Insert Table from the Layout menu. The Insert Table dialog box supports custom table layouts where you specify the row and column attributes and the general style attributes such as borders and padding. Through this dialog box, you can also select from a list of preformatted table templates.

After you've added a table to the designer, it is fully interactive for drag-and-drop resizing of its columns and rows.

Formatting Options

In addition to preserving the format of HTML that you write, Visual Studio 2005 also provides fine-grained control over how the designer generates and formats the HTML that it produces. You use the HTML page and its subpages in the Options dialog box (Tools, Options, Text Editor, HTML) to configure indentation style, quotation use, word wrapping, and tag casing (see Figure 6.36).

Figure 6.36. HTML formatting options.

Settings can be applied globally for all markup, or you can set options on a per-tag basis by clicking the Tag Specific Options button (Text Editor, HTML, Format). As an example, this level of control is useful if your particular coding style uses line breaks within your table column tabs (<td>), but not with your table row tags (<tr>). In Figure 6.37, the TR tag is being set to support line breaks before and after the tag, but not within the tag.

Figure 6.37. Setting HTML formatting at the tag level.

Browser Output and Validation

The result of all of the design effort put into an HTML document is its final rendering within a browser. With various flavors of browsers in use supporting various levels of HTML specifications (including XHTML), it is difficult to ensure that the page's design intent actually matches reality. Visual Studio's browser target settings help with this problem by enabling you to easily target a specific HTML standard or browser. As you type HTML into the source editor, Visual Studio will validate the syntax on-the-fly against your selected browser target. If a piece of markup violates the rules of your particular validation target, it will be flagged by the familiar red squiggly line (complete with a ToolTip explaining the exact violation), and the error will be listed within the Task List window.

The target can be selected on the HTML designer or source editor toolbar: Just pick the target from the drop-down.

Note

The validation rules for a given browser or standard can actually be customized to support targets that may not ship out of the box with Visual Studio.

Standards Compliance

The HTML code generated by the HTML designer is, by default, XHTML compliant; tags, for instance, are well formed with regards to XHTML requirements. Using the various XHTML validation targets will help you to ensure that the code you write is compliant as well.

Visual Studio also focuses on providing compliance with accessibility standards: those standards that govern the display of web pages for persons with disabilities. You launch the Accessibility Checker by using the Check Page for Accessibility button on the HTML Source Editing or Formatting toolbars.

Figure 6.38 shows the Accessibility Validation dialog box. You can select the specific standards you want to have your HTML validated against. You can also select the level of feedback that you receive (errors, warnings, or a text checklist). Each item flagged by the checker will appear in the Task List window for resolution. For more details on the two standards supported here (WCAG and Access Board Section 508), see their respective websites: http://www.w3.org/TR/WCAG10/ and http://www.access-board.gov/508.htm.

Figure 6.38. Setting accessibility validation options.