Visual Guide to Visual Web Developer
This topic provides a brief overview of many of the features and tools that are included in Visual Web Developer. Visual Web Developer is the set of features that are used to create Web projects in Visual Studio 2010 or Visual Web Developer 2010 Express.
This topic contains the following sections:
When you start Visual Studio, by default, the first page that opens is the Start page. The Start page provides an easy way to access or create projects, learn about upcoming product releases and professional events, and read the latest development news. To display the Start page, in the View menu, click Start Page.
The Start page also provides guidance and resources to help create your project. This includes tasks such as planning and tracking your application, designing code, developing and testing code, and administering your applications.
The following illustration shows the Visual Studio Start page.
Solutions and their projects contain items that represent the pages, code files, folders, references, and data connections that are part of your application. A solution is a container that can contain multiple projects. A project typically contains multiple files, folders, and other resources. For more information, see Solutions as Containers and Projects as Containers.
When you use Visual Web Developer, you typically create either ASP.NET Web application projects or ASP.NET Web site projects. Both project types let you create a Web application.
The main factors to consider when you select between a Web application project and a Web site project is how you intend to deploy your project and how you want to maintain it after it is deployed. It is important to select the appropriate project type before you create a project. For more information, see Web Application Projects versus Web Site Projects.
The New Web Site dialog box enables you to create a new Web site on your local computer or on a remote computer, or to connect to a Web site location using FTP to read and write files. The following illustration shows the New Web Site dialog box.
The New Project dialog box enables you to create a new Web application. For more information, see How to: Create Solutions and Projects. The following illustration shows the New Project dialog box.
For more information about Web projects, see Types of Web Site Projects in Visual Studio.
Web Project Items
After you have created a Web project, you use the Add New Item dialog box to add pages and other items to the project. When you select an item from a list of installed templates, the item is added to your project. Items are displayed in the list based on the selected programming language, the project type, and the target version of the .NET Framework. The following illustration shows the Add New Item dialog box.
The Visual Studio product family shares a single integrated development environment (IDE) that is composed of elements such as toolbars, tool windows that can be docked or auto-hidden, and editor windows. When you develop Web applications, you use tools, menus, and toolbars that are specific to Web projects.
Tools, menus, and toolbars that are specific to Web projects are displayed in Visual Studio if you selected the Web Development collection of settings when you started Visual Studio the first time. For more information, see How to: Select Web Development Environment Settings.
The following illustration shows you the windows and tools that are available in Visual Web Developer.
This illustration shows default windows and window locations. The View menu lets you display additional windows. In addition, you can rearrange and resize windows to suit your preferences. If changes have been made to the development environment, what you see in the IDE will not match the illustration.
Many of the tool windows that you use in Visual Web Developer can be docked. You can configure them to be permanently visible (pinned) or to scroll out of sight when they are not in use (autohide).
Customizing Menus and Toolbars
The menus and toolbars in Visual Web Developer are customizable. To customize menus commands and toolbars, click Customize in the Tools menu. The Customize dialog box is displayed. The following illustration shows the Customize dialog box.
The Customize dialog box lets you select toolbars to display, create custom toolbars and menus, add and remove items from toolbars and menus, and change the appearance of toolbar and menu items.
The Solution Explorer window displays solutions, projects, and the items in those projects. Solution Explorer provides you with an organized view of your projects and their files as well as access to the commands that pertain to them.
From Solution Explorer, you can open files for editing, add new files to a project, and set solution, project, and item properties. A toolbar that is associated with this window offers typical commands that are used to manage the item that you select in the window. To access Solution Explorer, click Solution Explorer in the View menu. The following illustration shows the Solution Explorer window.
The illustration includes the Team Explorer tab. This tab is available when you use Visual Studio Team System edition.
Use the Properties window to view and set the properties and events of objects that you are working with in the editor and page designer. You can also use the Properties window to edit and view file, project, and solution properties. To display the Properties window, click Properties Window in the View menu.
The Properties window lets you work with property values in different ways, depending on the selected property. For some properties, you enter a value in a text box. For other properties, you use a drop-down list or you click a button to display a custom editor dialog box. Properties that are displayed in gray are read-only. The following illustration shows the Properties window.
You can use the Server Explorer window to open data connections and to log in to servers and explore server-based databases and services.
In Visual Web Developer Express, the Server Explorer window is named Database Explorer, because it provides access only to database connections, not to other server-based services.
When you work with designer windows in Visual Studio, you can typically drag items from Server Explorer and drop them onto the design surface. This creates new components that are configured to reference the item that you have selected.
For more information, see Accessing Server Resources with Server Explorer. The following illustration shows the Server Explorer window.
You create pages and write code using an editor and using designer windows. The functionality of the editor and of designers that you use depends on the type of file or document that you are working with.
Web page editors and designers have two views: a graphical design view, and a source-code view. When you are working with a Web page, Design view lets you see controls and other items in a WYSIWYG-like way. The following illustration shows the Visual Web Developer in Design view.
Source view displays the source code for the file. This view supports coding help such as IntelliSense, collapsible code sections, refactoring, and code snippets. Source view also supports editing features like word wrap, bookmarks, and line numbers. For more information, see Editor Convenience Commands and Features. The following illustration shows Visual Web Developer in Source view.
You can drag controls from the Toolbox to the page in either Design view or Source view.
Some editors also provide a view that lets you see the design view and source view at the same time. This view is called Split view. The following illustration shows Visual Web Developer in Split view.
Editing Web Pages in the Designer
An ASP.NET Web page consists of visual elements and programming logic. Visual elements for the page include markup, server controls, and static text. Programming logic for the page includes event handlers and other code. When you work with ASP.NET Web pages, you can work with the markup in the designer and with the code in a code editor.
The Toolbox displays controls that you can add to Visual Web Developer projects. To display the Toolbox, click Toolbox in the View menu.
The following illustration shows the Toolbox.
The CSS Properties window is used when you are editing an ASP.NET Web page. The window shows you the styles that are used by the current selection in a Web page. It also shows you the order of precedence for the styles. In addition, the window gives you a comprehensive list of all CSS properties. This enables you to add properties to an existing style, modify properties that you have already set, and create new inline styles. For more information, see How to: Use the CSS Properties Window. The following illustration shows the CSS Properties window.
In addition to the CSS Properties window, you manage CSS styles using the Manage Styles window and apply CSS styles using the Apply Styles window. For more information, see How to: Use the Apply Styles and Manage Styles Windows.
Before a Web application can be displayed, it must be compiled, or built. Visual Web Developer provides a robust set of build (compilation) and debugging options. By using build configurations, you can select the components to build, exclude those that you do not want to include in a finished application, and specify details about how a project will be built. You can create build configurations for solutions and projects. For more information, see How to: Create and Edit Configurations and Builds During Application Development.
When you build, you are beginning the debug process. Building your application helps you detect compile-time errors. These errors can include incorrect syntax, misspelled keywords, and type mismatches. The Output window displays these types of errors. The following illustration shows the Output window.
After you have built your application, you can use the debugger to detect and correct run-time problems, such as logic errors. You can stop (break) a code as it is running. In break mode, you can examine local variables and other data by using tools such as the Variable window, the QuickWatch dialog box, and the Memory windows. For more information, see Variable Windows and Memory Windows. The following illustrations shows debugging tools windows.
Visual Studio, ASP.NET, and IIS provide tools that help you deploy your Web application or Web site. Some of the Visual Studio tools work only with Web application projects, and others work only with Web site projects.
For information about the difference between Web application projects and Web site projects, see Web Application Projects versus Web Site Projects.
Web Application Project Deployment
The following are typical Web deployment scenarios for Web application projects:
Deploying a Web application to a remote server from Visual Studio.
Deploying a Web application by using Visual Studio to create a package (.zip file) that contains information that is required for deployment, and that you can install on a destination Web server.
Deploying a Web application in a batch process by using special tools, such as MSBuild.
For more information about these deployment scenarios and other deployment options for Web application projects, see ASP.NET Deployment Content Map.
Web Site Project Deployment
The following are typical Web deployment scenarios for Web site projects:
Deploying a Web site by using the Copy Web Site tool, which can copy and synchronize files between your computer a destination computer or location.
Deploying a Web site by using the Windows XCopy command.
Deploying a prebuilt (precompiled) Web site.
For more information about these deployment scenarios and other deployment options of Web site projects, see ASP.NET Deployment Content Map.