Using Views in the ASP.NET Mobile Designer
The ASP.NET Mobile Designer provides three views in the Microsoft Visual Studio environment: the Design View, the HTML View, and the Code Editor View. The designer's views are panes in the Visual Studio main window. You can switch views by clicking the view's tab at the top of its pane.
The Design View is what most people think of as "the designer." It displays an interactive rendering of an ASP.NET mobile Web Forms page. It enables techniques such as dragging controls from the Visual Studio Toolbox and dropping them onto the mobile Web Forms page. To present a development environment that enables the creation of highly portable applications, the Design View is not a WYSIWYG development environment. For details, see ASP.NET Mobile Designer.
The HTML View displays the markup language code that the designer generates for the current Web Forms page. In this view, you can edit the markup code directly.
The Code Editor View, often called simply "the Code Editor," displays the contents of a mobile Web Forms page's code-behind page. You can write the code-behind page in Microsoft Visual C# or Microsoft Visual Basic.
The following sections provide an introduction to each of these views.
When you open a mobile Web Forms page, the designer loads the file and displays it in the Design View by default. A new page consists of an initial Form control whose property values are set to their defaults. You can drag controls from the Toolbox and drop them on the page. However, you must follow the containment rules for the particular control. For example, most controls must be placed in a container control, a template, or a user control page. Most controls allow more than one instance per page. However, some controls, such as the StyleSheet control, allow only a single instance on a page. See the Containment Rules section of the topics on each control in the Control Reference for more information.
Some devices are capable of displaying multiple controls on a single line. However, others display only a single control per line. The ASP.NET Mobile Designer uses a linear layout for all controls (one control per line). However, it uses the BreakAfter property supported by many mobile Web controls to enable side-by-side display on capable devices. In addition, it automatically adapts the rendering for devices that do not support side-by-side rendering. Setting the BreakAfter property to false will instruct ASP.NET to place controls side by side on all capable devices.
The ASP.NET mobile controls do not support the absolute positioning of controls on a page. For details, please refer to the Control Placement section of the Organizing Content with Containers topic.
On a mobile Web Forms page, Microsoft ASP.NET Web Forms controls can be added only within a template. The designer displays an error if you attempt to drop an ASP.NET Web Forms control on a mobile Web Forms page. For more information, see Working with Environment Tools.
The HTML View panel displays source markup code for the current mobile Web Forms page as it is stored in the .aspx file. You can edit the markup language directly in this view. For the most part, you should not need to directly edit the markup language for mobile Web Forms pages. Instead, the interactive development and automatic code generation features of the designer can reduce, or possibly eliminate, the need to deal directly with markup language code.
The Code Editor panel displays the contents of the code-behind file containing the programming logic for a mobile Web Forms page. To enter the Code Editor and view the code-behind file of a mobile Web Forms page, select Code from the Visual Studio View menu.
The designer initially creates the required namespace entries automatically when you create a new page. It also generates a page class with methods that you can fill in with Visual Basic or Visual C# statements. For more information about using the Code Editor, see Managing the Code Editor and View.