Source View
Source view displays the HTML markup for your Web page, which you can edit. By default, all HTML elements and scripts are displayed when you initially select Source view. You can drag elements from the Toolbox, just as you do when you are editing a Web page in Design view, and then see their markup inserted into the document.
To select Source view, click the Source tab at the bottom of the HTML Designer window.
Source view provides the following advantages over Design view:
You can fine-tune the markup for your elements and controls.
You can format the document to your liking.
You can edit elements that are not in the body. Design view only displays elements that are located between body elements. For example, you can directly edit the head element when you are working in Source view.
You can edit page directives.
You can create and edit client script.
You can edit the server code for the page when you are working with a single-file page (as opposed to a page with a code-behind file).
When you switch to Design view, any changes that you have made in Source view are reflected immediately.
Note
Some markup errors can prevent you from switching to Design view because the errors would cause problems for the editor, including possible data loss. For example, if a tag is not properly closed, the editor displays an error and stops the view switch. Details about the error are displayed in the Error List Window. You can preview your page by running it, even if you cannot switch to Design view.
Navigating in Source View
To help you move between elements and select them, Source view provides the following options:
Tag navigator The tag navigator displays the current element, along with the hierarchy of parent elements to which it belongs. You can use the tag navigator to see which element has the focus, and to move from the current element to an element that is located higher in the hierarchy. For details, see HTML Editor Tag Navigation in Visual Web Developer.
Document outline The Document Outline window makes it possible for you to locate and select all of the elements within a document, including those elements that are not displayed. For details, see How to: Navigate in the HTML Editor in Visual Web Developer.
Validation
In Source view, the editor automatically checks the document's syntax and marks tags, attributes, or values that are not valid. You can select a validation schema to work with, either by browser (for example, Microsoft Internet Explorer) or by standard (for example, XHTML 1.1 Strict). For details, see Markup Validation in Visual Web Developer.
IntelliSense
IntelliSense is the feature of Visual Studio that displays a drop-down list of possible keywords that would complete what you are typing. For example, if you type the beginning of a class name, IntelliSense displays a drop-down list that contains all of the class names that begin with the characters that you have typed so far.
In Source view, the editor displays IntelliSense for virtually all elements, including ASP.NET Web server controls, markup, page directives, and client script. The IntelliSense offered by the editor is controlled by the current validation schema, so that the editor does not offer you IntelliSense for tags, attributes, or values that are not valid for the current schema.
Note
You can turn off statement completion. For details, see General, HTML, Text Editor, Options Dialog Box.
Formatting
The editor offers the following options for formatting the document and individual tags:
Dragging or pasting elements When you drag elements from the Toolbox or paste them from the Clipboard, the editor can either create the elements exactly as they were formatted before or reformat the elements, according to options that you specify. For details, see Miscellaneous, HTML, Text Editor, Options Dialog Box.
Adding quotation marks or closing tags You can set options that cause the editor to automatically insert quotation marks around attribute values and automatically create an end tag when you finish a start tag. For details, see Format, HTML, Text Editor, Options Dialog Box.
Formatting per tag You can specify rules for how the editor formats tags as you create elements. Options include how to capitalize tags and attributes, and where to put line breaks. For details, see Tag Specific Options.
Formatting elements or documents You can apply the current formatting rules to a selected section or to the document as a whole.
Outlining documents You can collapse and expand elements to create more working space in the editor. For example, you can collapse a table element to hide all of its rows and cells, and then expand it when you want to edit it. You can collapse and expand elements manually, and you can specify rules for how large an element is before the editor automatically adds outlining to an element. For details, see How to: Collapse and Expand HTML Elements in Visual Web Developer.
Writing Client Script and Server Code
In Source view, you can create client script that runs in the browser. If you are working with a single-file ASP.NET Web page, you can also edit the page's server code in Source view. For information about client script in ASP.NET pages, see Client Script in ASP.NET Web Pages. For information about single-file ASP.NET pages, see ASP.NET Web Page Code Model.
Client Script
You can write client script as you would in any editor, including it either as part of an element or in its own <script> block. Inside a script block, the editor offers IntelliSense that is keyed to the object model of the current document and to the client scripting language you specify for the script block. If you do not specify a language, the editor assumes that it is ECMAScript.
Note
The editor does not validate client script.
The editor displays two drop-down lists at the top of the window. For client scripting, the drop-down list on the left side displays a list of document objects for which you can write event handlers; the drop-down list on the right side displays events for the selected object. You can create a new handler by selecting the object and then selecting the event. Events that already have handlers are displayed in bold.
To help with navigating client script, the drop-down list on the left side also displays the Client Script option. When you select Client Script, the drop-down list on the right side displays a list of the client-script event handlers. You can select a handler and jump directly to it.
Server Code
If you are working in an ASP.NET Web page that uses the single-file code model, Source view displays the page's server code in a script block that includes the attribute runat="server".
Note
Server code does not require a language attribute; the page's server code language is established in the @ Page directive.
For server code, the drop-down list at the top-left of the page displays the server controls for which you can write code. The drop-down list on the right side displays a list of events for the control that is currently selected. You can create a new event handler by selecting the object and then selecting the event. Events that already have handlers are displayed in bold.