Walkthrough: Code Editing in Web Pages in Visual Studio

In many ASP.NET Web pages, you write code in Visual Basic, C#, or another language. The code editor in Visual Studio can help you write code quickly while helping you avoid errors. In addition, the editor provides ways for you to create reusable code to help reduce the amount of work you need to do.

This walkthrough illustrates various features of the code editor. Some of the features of the code editor depend on what language you are coding in. Therefore, in this walkthrough you will create two pages, one that uses Visual Basic as its programming language and another that uses C#.

If you have already created a Web site in Visual Studio (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Studio), you can use that Web site and skip to the next section. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

You will work with both programming languages in this walkthrough. In a Web site project, you can use different programming languages in different Web pages. To begin, you will work with Visual Basic.

In the Weblocation box, select File System, and then enter the name of the folder where you want to keep the pages for your Web site project.

For example, type the folder name C:\WebSites.

Click OK.

Visual Studio creates a Web site project that includes prebuilt functionality for layout (a master page, the Default.aspx and About.aspx content pages, and a cascading style sheet), for Ajax (client script files), and for authentication (ASP.NET membership).

The code editor in Visual Studio helps you to avoid errors as you code, and if you have made an error, the code editor helps you to correct the error. In this part of the walkthrough, you will write a few lines of code that illustrate the error correction features in the editor.

To test error correction in Visual Basic

In Design view, double-click the blank page to create a handler for the Load event for the page.

Refactoring is a software methodology that involves restructuring your code to make it easier to understand and to maintain, while preserving its functionality. A simple example might be that you write code in an event handler to get data from a database. As you develop your page, you discover that you need to access the data from several different handlers. Therefore, you refactor the page's code by creating a data-access function in the page and inserting calls to the function in the handlers.

The code editor includes tools to help you perform various refactoring tasks. In this walkthrough, you will work with two refactoring techniques: renaming symbols and extracting a method. Other refactoring options include encapsulating fields, promoting local variables to method parameters, and managing method parameters. The availability of these refactoring options depends on the location in the code. For example, if you highlight code that is not a field declaration, you cannot select the Encapsulate Field option. If you highlight a variable in an event method, you cannot select Promote Local Variable to Parameter because event handler signatures are constant.

Refactoring Code

A common refactoring scenario is to create (extract) a method from code that is inside another member. This reduces the size of the original member and makes the extracted code reusable.

In this part of the walkthrough, you will write some simple code, and then extract a method from it. Refactoring is supported for C#, so you will create a page that uses C# as its programming language.

To create a C# page

In Solution Explorer, right-click the name of your Web site project, and then click Add New Item.

The Add New Item dialog box is displayed.

Under Installed Templates, click Visual C# and then select Web Form from the list.

In the Name box, enter the name of the new Web form.

Note

You can leave the name Default2.aspx.

Click Add to create and open the new page.

To extract a method in a C# page

Switch to Design view.

In the Toolbox, from the Standard tab, drag a Button control onto the page.

Double-click the Button control to create a handler for its Click event, and then add the following highlighted code.

Renaming Symbols

When you work with variables and objects (both are also known as symbols), you might want to rename the symbols after they are already referenced in your code. However, renaming the symbol can cause the code to break if you miss renaming one of the references to the symbol. Therefore, you can use refactoring to perform the renaming.

The variable alist in this line is not renamed because it does not represent the same value as the variable alist that you renamed. The variable alist in the DisplayArray declaration is a local variable for that method. This illustrates that using refactoring to rename symbols is different than simply performing a find-and-replace action in the editor; refactoring renames symbols with knowledge of the semantics of the symbol that it is working with.

Because there are many coding tasks that Web page developers frequently need to perform, the code editor provides a library of snippets, or blocks of prewritten code. You can insert these snippets into your page.

This walkthrough has illustrated the basic features of the Visual Studio 2010 code editor for correcting errors in your code, refactoring code, renaming symbols, and inserting code snippets into your code. Additional features in the editor can make application development fast and easy. For example, you might want to:

Learn more about the features of IntelliSense, such as modifying IntelliSense options, managing code snippets, and searching for code snippets online. For more information, see Using IntelliSense.

Learn more about the Visual Basic-specific features of IntelliSense code snippets, such as customizing the snippets and troubleshooting. For more information, see Visual Basic IntelliSense Code Snippets.

Learn more about the C#-specific features of IntelliSense, such as refactoring and code snippets. For more information, see Visual C# IntelliSense.