Export (0) Print
Expand All
6 out of 17 rated this helpful - Rate this topic

Walkthrough: Code Editing in Web Pages in Visual Web Developer 

Many ASP.NET Web pages involve writing code in Visual Basic, C#, or another language. The code editor in the Microsoft Visual Web Developer Web site development tool 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#).

In order to complete this walkthrough, you will need:

  • A general understanding of working in Visual Web Developer.

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

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

  1. Open Visual Web Developer.

  2. On the File menu, point to New, and then click Web Site.

  3. Under Visual Studio installed templates, click ASP.NET Web Site.

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

  5. In the Language list, click Visual Basic.

    NoteNote

    Visual Web Developer currently does not support creating code-behind pages in the Microsoft Visual J# development tool.

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

  6. Click OK.

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

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 Microsoft Visual Basic 2005 provides more detailed error information as you code.

To test error correction in Visual Basic

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

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

  3. Hold the mouse pointer over the word inger to see a ToolTip that tells you what the error is.

  4. Hold the mouse pointer over the underscore in the underline.

    The underscore expands into an icon.

  5. Click the icon.

    A list of possible corrections for the word inger is displayed.

  6. Select Change 'inger' to Integer.

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 upon the location in the code. For example, if you highlight code that is not a field declaration, you can not select the Encapsulate Field option. If you highlight a variable in an event method, you can not 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

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

  2. Under Visual Studio installed templates, click Web Form.

  3. In the Language list, click C#.

    NoteNote

    You can leave the name Default2.aspx.

  4. Click Add to create and open the new page.

To extract a method in a C# page

  1. Switch to Design view.

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

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

  4. Press CTRL+F5 to run the page, and then click the Button control to be sure that you see the following output:

    i = 0
    i = 1
    i = 2
    i = 3
    i = 4
    
  5. 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]);
       }
    
  6. Right-click the selection, click Refactor, and then choose Extract Method.

    The Extract Method dialog box appears.

  7. 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);
    }
    
  8. Press CTRL+F5 to run the page again, and click the Button control.

    The page functions the same as it did before.

Renaming Symbols

When working with variables and objects (both are also known as symbols), you might want to be able to rename the symbols after they are already referenced in your code. However, renaming the symbol can potentially 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

  1. In the Click event handler, locate the following line:

    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList;
    
  2. Right-click the variable name alist, choose Refactor, and choose Rename.

    The Rename dialog box appears.

  3. In the New name box, type ArrayList1, and then press ENTER.

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

  4. 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 specific 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.

Each Visual Studio language has slight differences in the way you insert code snippets. For information on inserting snippets in Visual Basic, see How to: Insert Snippets Into Your Code (Visual Basic). For information on inserting snippets in Visual J# and Visual C#, see How to: Use Code Snippets (C#).

This walkthrough has illustrated the basic IntelliSense features of the Visual Studio IDE for correcting errors in your code, refactoring code, renaming symbols, and inserting code snippets into your code. There is more to these IntelliSense features that 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.

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.