Designing a Web Form Application
Web page design starts with a web project. As previously discussed, there are two different ways for you to construct a web page or website with Visual Studio. Both of these approaches are represented by their own unique project templates. Specifically, we are talking about “web application” versus “website” projects. In Chapter 4, “Solutions and Projects,” we broached some of the core differences between these two project types; even more detail is waiting for you in Chapter 17, “Building Modern Websites with ASP.NET 5.” However, because the actual construction of a web page with the web designer remains the same between the two project types, we concentrate here on illustrating our points by walking through a website project.
Select File, New Web Site, and from the dialog box select the ASP.NET Web Forms 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 WPF Designer; it has a design surface that acts as a canvas, allowing objects from the Toolbox to be placed and positioned on its surface. Although they look slightly different from the pane controls we saw in the WPF designer, they have the same basic functions. You can work in a “split” mode in which the designer and markup editor are visible in separate panes, or you can elect to work strictly with either the designer or the editor open.
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 simple one for comparison’s sake.)
Adding and Arranging Controls
The process of adding and arranging controls doesn’t change from the Windows Forms or WPF 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 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, 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 generates 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.45 shows the design in progress. The text boxes don’t line up, and you probably want to apply a style for the label fonts and buttons; but the general layout and intent are evident. Note that the designer provides a box above the currently selected control that indicates both the control’s type and the instance name of the control on the page.
Tip
As a further aid for control alignment, be sure to turn on the ruler, the positioning grid, or both; they are accessed from the View menu under Ruler and Grid.
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, the HTML source editor supports IntelliSense and other interactive features for navigating and validating markup.
Looking back at Figure 6.42, you can see the markup generated by the designer when the controls were added to the login page.
As with the other designer/editor pairs, you can write your own HTML and see it implemented immediately in the design view. The HTML editor has a toolbar as well: the HTML source editing toolbar provides quick access to code “forward and back” navigation, commenting, and schema validation options. (We discuss schema validation in the later section “Browser Output and Validation.”)
One key feature realized with the HTML editor is source format preservation. The HTML source editor works 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 never reformats HTML code that you have written.
Working with Tables
HTML tables provide a quick and easy way to align controls on a web page. A dedicated Insert Table dialog box provides extensive control over table layout and appearance. To place a table onto the design surface, select Insert Table from the Table menu. The Insert Table dialog box supports custom table layouts in which 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 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.46).
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). For example, this level of control is useful if your particular coding style uses line breaks within your table column tags (<td>) but not with your table row tags (<tr>). In Figure 6.47, the tr tag is being set to support line breaks before and after the tag, but not within the tag.
Managing Styles and Style Sheets
Visual Studio has a complete set of tools for managing styles and cascading style sheets. The Manage Styles and Apply Styles windows are both used to perform common style editing tasks, including applying a style to the current HTML document or attaching/detaching a cascading style sheet file to/from the current HTML document. The third tool, the CSS Properties window, enumerates all the CSS properties for the currently selected page element, allowing for quick changes for any of the property values.
A typical workflow for editing styles might look like this:
1. Open a web page.
2. Define a new style.
3. Apply the style.
4. Tweak the style.
Figure 6.48 shows the Manage Styles window and its capability to itemize and preview any of the formatting elements within a style sheet. The Options button at the upper right of the window is used to control the way that the list of elements within a style sheet is shown (by order, by type, and so on) or to filter the elements that are shown (all, only those used in the current page, and so on).
You access both the Manage Styles window and the Apply Styles window from the View menu.
Browser Output and Validation
The result of all 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 validates the syntax on the fly against your selected browser target. If a piece of markup violates the rules of your particular validation target, it is flagged by the familiar red squiggly line (complete with a ToolTip explaining the exact violation), and the error is 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.
The validation rules for a given browser or standard can actually be customized to support targets that do 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 regard to XHTML requirements. Using the various XHTML validation targets helps 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. (Note that this button is not added by default on those toolbars; you’ll have to use the “add or remove buttons” feature to add it.)
Figure 6.49 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 appears 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.
