Walkthrough: Code Editing in Web Pages in Visual Web Developer

Article
11/16/2012

In many ASP.NET Web pages, you write code in Visual Basic, C#, or another language. The code editor in Visual Web Developer 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.

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

Creating the Web Site and Page

If you have already created a Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), 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

Open Visual Web Developer.
On the File menu, click New Web Site.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, select File System, and then enter the name of the folder where you want to keep the pages of your Web site.

For example, type the folder name C:\WebSites.
In the Language list, click Visual Basic.

The programming language you choose will be the default for your Web site, but you can set the programming language for each page individually.
Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

Correcting Errors in Visual Basic

The code editor in Visual Web Developer 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.

The behavior of the code editor depends on which language you are coding in. In general, the code editor for Visual Basic 2008 provides more detailed error information as you code.

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, and then click Add New Item.
Under Visual Studio installed templates, click Web Form.
In the Language list, click C#.

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 in Visual Basic, see How to: Insert Snippets Into Your Code (Visual Basic). For information about inserting snippets in Visual C#, see How to: Use Code Snippets (C#).

Next Steps

This walkthrough has illustrated the basic features of the Visual Studio 2008 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# Code Editor Features.

Share via