Lesson 3: Using Visual Studio .NET

Lesson 3: Using Visual Studio .NET

The Visual Studio .NET programming environment presents new window types, new ways to manage those windows, and new integration with Internet content. This lesson offers a tour of these new features as well as an overview of some of the older Visual Studio .NET debugging and Help features presented from a Web application programming viewpoint.

If you ve programmed with earlier versions of Visual Studio and feel like skipping this lesson, be aware that you can no longer make changes to an application while debugging without restarting the application. That particular Visual Studio .NET feature, called edit-and-continue, is no longer available in Visual Basic .NET or Visual C#.

After this lesson, you will be able to

• Use the Start Page to open new or existing projects, get current product information, and set environment preferences

• List the two Visual Studio .NET window types and use the Auto Hide feature to make the most out of screen space for editing documents

• Cut and paste items using the Clipboard Ring in the Toolbox

• Edit Web forms and HTML pages visually or in HTML

• Write code using the Code Editor s automated features and modify Visual Studio .NET settings to turn those features on or off

• Build, run, and debug applications using Visual Studio .NET

• Get Help and set Help filters for your preferred programming language

Estimated lesson time: 30 minutes

The Start Page

When you start Visual Studio .NET, the first thing you see is the Start Page, shown in Figure 1-8. The Start Page contains various panes to make information easier to find and to help simplify some common tasks, such as opening a recent file.

The Projects pane, shown in Figure 1-8, displays the four most recently saved projects in the form of hyperlinks. To open one of these recent projects, click the project name. To create a new project or to open an existing project not displayed in the recent projects list, click the appropriate button on the Projects tab.

To the left of the Start Page is a list of other topics containing current information about Visual Studio .NET, other Microsoft products, programming, Web site hosting, and other information. If you click one of these topics, the Start Page displays the topic, as shown in Figure 1-9.

Figure 1-8. The Visual Studio .NET Start Page

Figure 1-9. Current Visual Studio .NET headlines

The information displayed in the Start Page is dynamic, with much of the information coming from the Internet. This ensures that the information is current; it s a good idea to check the Headlines and Downloads panes occasionally to get the latest news.

Of particular interest to Web application developers is the Web Hosting pane, shown in Figure 1-10. This pane links to Web sites that will host your ASP.NET Web applications on the Internet.

Figure 1-10. ASP.NET hosting services

Some of the sites, like Brinkster, offer limited free hosting. These hosting services are extremely useful when you re learning ASP.NET because they allow you to share your work with the world without the effort and expense of setting up your own Web server.

The My Profile pane of the Start Page lets you set your preferences for Visual Studio .NET, as shown in Figure 1-11.

These options let you change the default window layout for Visual Studio .NET, set the programming language you most commonly use, and specify whether Help is displayed in the Visual Studio .NET design panes or in a window as a separate application. The Help window can get a little cramped when displayed within Visual Studio .NET, so unless you have a 19-inch monitor, it s a good idea to select the External Help option.

Figure 1-11. Set your preferences in the My Profile pane

Visual Studio .NET Windows

Visual Studio .NET has two types of windows: Document windows and Tool windows. Document windows display the content of your application: the forms, Web pages, and code all appear in Document windows. You can have multiple Document windows open at once, and you can choose between them by clicking their tabs near the top of the screen, as shown in Figure 1-12.

Tool windows display the components you use to create your application. These components include the controls, database connections, classes, and properties you use in the project. Tool windows are displayed to the left and right of the Document windows and they can be set to slide in or out of view by clicking their tabs, as shown in Figure 1-13.

Figure 1-12. A Document window

Figure 1-13. The Toolbox window

To cause a tabbed Tool window to remain on screen, toggle the Auto Hide button at the top right of the Tool window. The Auto Hide button looks like a tiny pushpin. Click the pushpin again to cause the Tool window to return to tabbed display. You can use the tabbed display to hide the Tool windows on both sides of the Document window and provide more space for editing your application s content, as shown in Figure 1-14.

Figure 1-14. Tabbed Tool windows around the Document window

The tabbed display of the Document and Tool windows is the default setting for Visual Studio .NET. You can turn off this feature to use a more traditional windowed display by choosing Options from the Tools menu and then selecting your preferences from the dialog box shown in Figure 1-15.

Figure 1-15. The Options dialog box

The Toolbox

The Visual Studio .NET Toolbox displays the controls and components you can add to a Document window. The contents of the Toolbox change depending on the type of document you are currently editing. When you are editing a Web form, for example, the Toolbox displays the server controls, HTML controls, data controls, and other components that you can add to a Web form, as shown in Figure 1-16.

Figure 1-16. The Toolbox window

The components in the Toolbox are categorized as shown in Figure 1-16. When you click one of the categories, the Toolbox displays the items in that category. You can scroll through the items in the Toolbox by clicking the up and down arrows at the top and the bottom of the component list.

When the current document is code, the Toolbox contains only the Clipboard Ring, as shown in Figure 1-17. The Clipboard Ring keeps track of the last 20 items you have copied (Ctrl+C) or cut (Ctrl+X) so that you can paste them back into a document.

To paste an item from the Clipboard Ring, click the item and drag it to where you want to insert it. When you move the mouse pointer over an item in the Clipboard Ring, Visual Studio expands that item to show you more of the text it contains.

Figure 1-17. The Clipboard Ring in the Toolbox window

Editing Web Documents

You can edit Web forms and HTML documents visually by using the same drag-and-drop techniques that you use when editing Windows forms, or you can edit them as text files. To switch between edit modes, click the Design or HTML tabs at the bottom of the Document window, as shown in Figure 1-18.

Figure 1-18. A Web document in Design mode

There is no way to do some tasks visually, so you will often need to edit Web documents as text. Using the HTML mode can also be more convenient than using the visual tools if you are already familiar with HTML. The IntelliSense technology in Visual Studio .NET provides help for completing HTML elements, as shown in Figure 1-19.

Figure 1-19. IntelliSense for HTML elements in Visual Studio .NET

You can switch back to Design mode to preview any changes you make in HTML mode simply by clicking on the Design tab at the bottom of the Document window.

Editing Code-Behind Files

Web forms have code files associated with them. These files are created automatically when you create a new Web form and are called code-behind files. Code-behind files have the same base name as the Web form with the .vb or .cs filename extension added, as shown in Figure 1-20 and Figure 1-21.

Figure 1-20. A Web form s code-behind file (Visual Basic .NET)

Figure 1-21. A Web form s code-behind file (Visual C#)

A Web form is associated with its code file by the @Pagedirective found in the Web form s HTML, as shown here:

Visual Basic .NET

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Form1.aspx.vb" Inherits="WebApplication1.Webform1"%>

Visual C#

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %>

Visual Studio automatically maintains the file information in this Page directive, so if you save the Web form with a different file name, the CodeBehind attribute is automatically updated. However, Visual Studio does not automatically maintain the information in the Page directive s Inherits attribute. If you change the root namespace of the project or class name of a Web form, you must manually update the information in the Web form s Page directive.

Visual Studio .NET generates a class definition, initialization procedure, and Page_Load event procedure for each Web form s code-behind file. You shouldn t change the code in the regions marked Web Form Designer Generated Code, because that code might later be modified by Visual Studio .NET and your changes could be overwritten.

You can hide the generated code by clicking the minus sign (-) to the left of the #Region directive. Clicking the minus sign collapses the region into a single line and changes the minus sign to a plus sign (+), which you can click to expand the region again. You can use this same outlining feature to collapse or expand other blocks of code, such as class definitions and procedures.

The Visual Studio .NET Code Editor also provides completion through IntelliSense for keywords and class members that you use in code, as shown in Figure 1-22.

Figure 1-22. The autocomplete feature

If you are programming in Visual Basic, the autocomplete feature will also correct the capitalization of keywords and member names when you complete a line. If you are using Visual C#, however, Visual Studio .NET will not recognize a keyword or member name if it is not capitalized correctly. This is because Visual Basic .NET is not case sensitive, but Visual C# is.

The Visual Studio .NET Code Editor highlights syntax errors and undeclared variables as you complete each line. These errors are underlined with a squiggly line, and if you move the mouse pointer over the error, a description of the error is displayed, as shown in Figure 1-23.

You can turn most of the Code Editor s automatic features on or off by changing the settings in the Options dialog box shown in Figure 1-15. You can also use the Options dialog box to change automatic indentation, code block completion, and other language-specific settings.

Figure 1-23. Error detection in the Code Editor

Editing Single-Source Web Forms

ASP.NET also supports single-source Web forms. As the name implies, a single-source Web form has its code and HTML stored in the same single file. Many of the ASP.NET code samples and tutorials posted on the Web use single-source files because they are easier to distribute and display. For example, the following single-source Web form calculates the area of a circle:

Visual Basic .NET

<%@ Page Language="VB" %> <script runat="server"> Private Sub butCalculate_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) ' Declare variables. Dim dblCircArea, dblRadius As Double ' Convert text input to a double (optional). If txtRadius.Text <> "" Then _ dblRadius = System.Convert.ToDouble(txtRadius.Text) ' Calculate area. dblCircArea = System.Math.PI * System.Math.Pow(dblRadius, 2) ' Display result. ShowResult(dblCircArea) End Sub Sub ShowResult(ByVal Result As Double) litResult.Text = "<h3>Results</h3>" litResult.Text += "<p>The circle's area is: <b>" + Result.ToString() _ + "</b>" End Sub </script> <html> <head> <title>Calculate Area</title> </head> <body> <form runat="server"> <h2>Calculate Area </h2> <hr /> Circle radius: <asp:TextBox  Runat="server"></asp:TextBox> <asp:Button  onclick="butCalculate_Click"  Runat="server"  Text="Calculate"></asp:Button> <p> <asp:Literal  Runat="server"></asp:Literal> </p> </form> </body> </html>

Visual C#

<%@ Page Language="C#" %> <script runat="server"> private void butCalculate_Click(object sender, EventArgs e) { // Declare variables. double dblCircArea, dblRadius; // Convert text input to a double (optional). if (txtRadius.Text != "") { dblRadius = Convert.ToDouble(txtRadius.Text); // Calculate area. dblCircArea = 2 * Math.PI * Math.Pow(dblRadius, 2); // Display result. ShowResult(dblCircArea); } } void ShowResult(double Result) { litResult.Text = "<h3>Results</h3>"; litResult.Text += "<p>The circle's area is: <b>"  + Result.ToString() +  "</b>"; } </script> <html> <head> <title>Calculate Area</title> </head> <body> <form runat="server"> <h2>Calculate Area </h2> <hr /> Circle radius: <asp:TextBox  Runat="server"></asp:TextBox> <asp:Button  onclick="butCalculate_Click"  Runat="server"  Text="Calculate"></asp:Button> <p> <asp:Literal  Runat="server"></asp:Literal> </p> </form> </body> </html>

Visual Studio can edit and even run these single-source Web forms; however, the advanced features like autocomplete are not enabled for any of the code entered between the <script> and </script> elements on the page. For this reason, the code samples in this book are shown as code-behind files.

Solution Explorer

Visual Studio .NET organizes applications into projects and solutions. A project is a collection of files that will ultimately make up a single executable. A solution is a group of projects that make up a single functional unit. You view the files in a solution by using the Solution Explorer, as shown in Figure 1-24.

Figure 1-24. The Solution Explorer

The project shown in bold is the start-up project. The start-up project is the project that runs when you click Start in Visual Studio .NET. When you re developing multiple projects as part of a single solution, the start-up project usually calls the other projects in the solution.

Information about a solution is stored in a solution file (.sln), which is placed in your My Documents folder by default. You can open the solution using this file, or you can open projects directly using their project files (.vbproj or .csproj), which are placed in the project folders. If you open a project file, Visual Studio .NET creates a new solution file when you save the project.

Running a Project

You can run a project within Visual Studio .NET by clicking Start on the toolbar, by choosing Start from the Debug menu, or by pressing F5. When you run a project, Visual Studio .NET builds the project files and displays any errors that occur in the Task List window, as shown in Figure 1-25.

Figure 1-25. Running a project with build errors

Double-clicking the error description in the Task List selects the line with the error in the Document window so that you can correct the error. The Task List also displays comment tasks you have added to your code, such as 'TODO, //TODO, 'UNDONE, //UNDONE, 'HACK, or //HACK. You can add or modify the tokens you use to identify tasks by configuring the Environment settings in the Options dialog box of Visual Studio.

If no errors occur during the build, Visual Studio .NET starts the application in Debug mode and, in the case of a Web application, starts Internet Explorer and displays the application s start page. If an error occurs while the application is running in Debug mode, Visual Studio .NET displays the error in the browser, as shown in Figure 1-26.

Figure 1-26. A Web application project with run-time errors

You have two choices at this point:

• If you know what caused the error, you can stop the application by closing the browser window to return to Visual Studio .NET and then correct the error shown.

• If you are unsure of what caused the error, you can click Back in the browser, switch to Visual Studio .NET to set a breakpoint at a position in the code before the error occurred, and then switch back to the browser to try the task again. Visual Studio .NET will stop the application at the breakpoint you set so that you can step through the code to locate the source of the error.

Once you locate the error, you must stop the application before you can correct it. In earlier versions of Visual Studio .NET, you could correct errors in Debug mode and continue running the application.

Setting Breakpoints and Watching Variables

You can stop a project at a particular line of code by setting a breakpoint. When Visual Studio .NET runs the project, it will stop the project and display the line with the breakpoint in the Code Editor before that line executes, as shown in Figure 1-27.

Figure 1-27. A project stopped at a breakpoint

To set a breakpoint, click the gray margin to the left of the line you want to break at, or select the line and press F9. Figure 1-28 shows a breakpoint that has been set.

Figure 1-28. Setting a breakpoint

Once Visual Studio .NET stops at a breakpoint, you can view the value of active variables by moving the mouse pointer over the variable. If the variable is a complex type, such as an object or an array, you can view its data by adding it to the Watch window, as shown in Figure 1-29.

Figure 1-29. The Watch window

To add an item to the Watch window, select the item and drag it to the Watch window. Click the plus sign (+) next to the item in the Watch window to view subitems, such as array elements or object properties.

Executing Statements

After you have stopped at a breakpoint, you can continue running your application by clicking Continue on the toolbar or by pressing F5. Alternatively, you can execute one line at a time by pressing F10 or F11.

F10 executes each procedure call as a single statement. In other words, F10 steps over a procedure by executing it and stopping at the next line in the current procedure. F11 executes procedure calls by stepping in to the procedure and stopping at the first line in the called procedure. To execute a single line of code outside of the context of the project, type the code in the Command window. Figure 1-30 shows these different techniques.

Figure 1-30. Ways to execute statements

The results of statements entered in the Command window are directed to the next line of the command window. For example, the statement ?System.Math.PI displays 3.1415926535897931 on the next line.

Getting Help

Visual Studio .NET includes a combined collection of Help for the programming environment, languages, .NET Framework, technical support, and developer s network articles. The Help is displayed either within a Document window or outside Visual Studio .NET in a separate window, depending on the preferences you set on the Start Page or in the Options dialog box.

The Help system includes three ways to find topics: the Contents window, the Index window, and the Search window. These windows act like the Tool windows in Visual Studio .NET: they can be docked and then hidden or displayed using tabs, as shown in Figure 1-31.

Each of the navigation windows provides a Filter drop-down list that lets you choose a particular programming language or subject to look in. This feature is especially useful in the Search and Index windows because the combined Help collection is large. The Visual Basic And Related filter and the Visual C# And Related filter include most of the topics you need for this book.

Topics that include syntax or code samples have a language filter icon at the top of each page that looks like a funnel. Click the filter icon to change the programming language displayed in the topic or to view all language samples, as shown in Figure 1-32.

Figure 1-31. The Help navigation windows

Figure 1-32. Setting the language filter

In addition to the Help included with Visual Studio .NET, Microsoft hosts the GotDotNet Web site, at www.gotdotnet.com. That Web site includes tutorials on using ASP.NET and contains links to many other related Web sites.