Walkthrough: Code Editing in Web Pages in Visual Studio

Artikkeli
02/13/2013

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#.

During this walkthrough, you will learn how to:

Correct errors (in Visual Basic).
Refactor and rename code (in C#).
Rename symbols.
Insert code snippets (in Visual Basic and C#).

Prerequisites

In order to complete this walkthrough, you will need:

Visual Studio or Visual Web Developer.

Note

If you are using Visual Studio, the walkthrough assumes that 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.

For an introduction to Visual Web Developer, see Walkthrough: Creating a Basic Web Page in Visual Studio.

Creating the Web Site and Page

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.

Note

This walkthrough uses a Web site project. You could use a Web application project instead. For information about the difference between these Web project types, see Web Application Projects versus Web Site Projects.

To create a file system Web site

Open Visual Studio.
In the File menu, click New Web Site.

The New Web Site dialog box is displayed.
Under Installed Templates, click Visual Basic and then select ASP.NET 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 Web location 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).

Correcting Errors in Visual Basic

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.

You are using the event handler only as a place to write some code.
Inside the handler, type the following line that contains an error:
```
dim var1 as inger
```
When you press ENTER, the code editor underlines the word inger, indicating that the word is not recognized. Note that part of the underline is a small underscore.
Hold the mouse pointer over the word inger to see a tooltip that tells you what the error is.
Hold the mouse pointer over the underscore in the underline.

The underscore expands into an icon.
Click the icon.

A list of possible corrections for the word inger is displayed.
Select Change 'inger' to Integer.

Refactoring and Renaming in C#

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.

protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    for(i=0; i<alist.Count; i++)
    {
        Response.Write("<br />" + alist[i]);
    }
}

The code creates an ArrayList object, uses a loop to load it with values, and then uses another loop to display the contents of the ArrayList object.

Press CTRL+F5 to run the page, and then click the button to make sure that you see the following output:
```
i = 0
i = 1
i = 2
i = 3
i = 4
```

Return to the code editor, and then select the following lines in the event handler.

   for(i=0; i<alist.Count; i++)
   {
      Response.Write("<br />" + alist[i]);
   }

Right-click the selection, click Refactor, and then choose Extract Method.

The Extract Method dialog box appears.

In the New Method Name box, type DisplayArray, and then click OK.

The code editor creates a new method named DisplayArray, and puts a call to the new method in the Click handler where the loop was originally.

protected void Button1_Click(object sender, EventArgs e)
{
    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList();
    int i;
    string arrayValue;
    for(i=0; i<5; i++)
    {
        arrayValue = "i = " + i.ToString();
        alist.Add(arrayValue);
    }
    i = DisplayArray(alist, i);
}

Press CTRL+F5 to run the page again, and click the button.

The page functions the same as it did before.

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.

To use refactoring to rename symbols

In the Click event handler, locate the following line:

System.Collections.ArrayList alist = 
    new System.Collections.ArrayList;

Right-click the variable name alist, choose Refactor, and then choose Rename.

The Rename dialog box appears.
In the New name box, type ArrayList1, and then press ENTER.

The Preview Changes dialog box appears, and displays a tree that contains all references to the symbol that you are renaming.
Click Apply to close the Preview Changes dialog box.

The variables that refer specifically to the instance that you selected are renamed. Note, however, that the variable alist in the following line is not renamed.
```
private int DisplayArray(System.Collections.ArrayList alist, 
    int i)
```
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.

Inserting Snippets

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.

Each language that you use in Visual Studio has slight differences in the way you insert code snippets. For information about inserting snippets, see Visual Basic IntelliSense Code Snippets. For information about inserting snippets in Visual C#, see Visual C# Code Snippets.

Next Steps

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 how to create your own code snippets. For more information, see Creating and Using IntelliSense Code Snippets.
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.

Jaa