Web Forms Designer

The Web Forms Designer allows you to add controls to a form, arrange them, and write code for their events. Using the designer you can:

• Add components, data controls, or Web-based controls to a form.
• Double-click the form or a control it contains in the designer and write code in that item's default event in the designer.

The Web Forms Designer provides a rapid development solution for creating ASP.NET Web applications. Controls may be dragged or drawn onto its surface from the Toolbox. The Toolbox tabs available to the Web Forms Designer are the Web Forms tab, the Data tab, and the Components tab. Non-visual components added to the Web Forms Designer are placed on the tray below it in the development environment so that they are easily accessible without cluttering the visual design space.

Additionally, by right-clicking the Web Forms Designer, you get a menu that allows you to switch to the Code Editor, view the HTML source, view the page in a browser, synchronize the document outline, and view properties for the form.

This designer has two tabs: the Design tab and the HTML tab. In addition, you can right-click and select View Code to access the code-behind file for your Web Forms page.

Design Tab

The Design tab in the Web Forms designer allows you to switch to a WYSIWYG view of your Web Forms page. When you create or open a Web Forms page, the designer opens it in Design view by default. To change this default, see General, HTML Designer, Options Dialog Box.

You can arrange elements in two modes:

• Grid layout mode - You can arrange elements using absolute positioning (x and y coordinates).
• Flow layout mode - You can arrange elements as in a word processing document (top to bottom).

You can change the layout mode for the page by setting its pageLayout property. For details, see Setting the pageLayout Property of an HTML Document.

In Design view, you can do the following:

• Drag ASP.NET controls, HTML elements, and data components from the Toolbox onto your form.
• Move and resize elements.
• Add static HTML text. In flow layout mode, you can type the text directly into the page. In grid layout mode, you add static HTML text using a Flow Layout Panel. For details, see Positioning HTML Elements in Design View
• Use the Properties window to configure elements on the page.
• Use a menu command to convert HTML elements to HTML server controls. For details, see Adding HTML Server Controls to a Web Forms Page.
• Launch the Style Builder dialog box to apply CSS styles to selected elements.

For more information, see Design View, HTML Designer.

HTML Tab

The HTML tab in the Web Forms designer allows to switch to a view in which you can see the HTML syntax of elements in your Web Forms page.

• Add HTML text and elements directly.
• Add ASP.NET controls directly. For details, see Adding Web Server Controls to a Web Forms Page and Adding HTML Server Controls to a Web Forms Page.
• Create client script. For details, see Creating Scripts and Editing Event Handlers in HTML Designer.

For more information, see HTML View, HTML Designer.

See Also

Web Forms Pages | Web Server Controls | Walkthrough: Creating a Basic Web Forms Page