Walkthrough: Using HTML Snippets

This walkthrough shows how to add markup to a page by using HTML code snippets. You can use HTML code snippets in Visual Studio 2010 to save time and to reduce typing when you create Web page markup in Source view.

This topic contains the following sections:

• Prerequisites

• How Code Snippets Work

• Opening an Existing Project or Creating a New Project

• Inserting HTML Snippets

• Running the Page

• Next Steps

Prerequisites

In order to complete this walkthrough, you will need:

• Visual Studio 2010 or Visual Web Developer 2010 Express.

How Code Snippets Work

Visual Studio includes over 200 code snippets for C#, Visual Basic, XML, and HTML (which includes ASP.NET markup). Code snippets consist of prewritten programming code or markup. In some cases, the snippet contains placeholders for information (such as a property name) that you can specify after you have inserted the code snippet. You can use code snippets in the code editor when you are writing programming code, and in Source view of the HTML editor when you are creating a Web page. 

In this walkthrough you will add HTML and ASP.NET markup to a Web page. Almost all snippets have a quick way to insert the code. For example, to insert an ASP.NET Button control, you can type <bu and then press the TAB key twice. When you do, the editor completes the markup for the Button control by inserting the following markup:

<asp:Button Text="text" runat="server" />

This walkthrough shows you the fastest way to insert code snippets. However, you can also insert code snippets in the following ways:

• Position the cursor where you want the inserted code snippet to appear, right-click the page, and then select Insert Snippet.

• Position the cursor where you want the inserted code snippet to appear, and then press the keyboard shortcut CTRL+K, CTRL+X. This displays a list that lets you select a snippet.

• Select a word that you want to surround using a code snippet, and then right-click the word and click Surround With.

• From the Edit menu, select IntelliSense, and then select Insert Snippet.

To see what code snippets are available or to add snippets, you can use the Code Snippets Manager. The following illustration shows the Code Snippets Manager dialog box.

Code Snippets Manager dialog box

In the next procedure, you will see what snippets are available for HTML elements.

To view available HTML code snippets with the Code Snippets Manager

1. Open Visual Studio 2010 or Visual Web Developer 2010 Express.

   Note

   You do not have to open a project in order to view the Code Snippets Manager.

2. In the Tools menu, select Code Snippets Manager.

   The Code Snippets Manager dialog box is displayed.

3. In the Language list, select HTML.

   Notice that there are several folders that contain HTML related snippets, such as ASP.NET, ASP.NET MVC 2, and HTML.

4. Under Location, expand the HTML folder.

5. Select div.

   Notice that the Alternative Shortcuts list includes other HTML elements such as p, h1, h2, and so on. This tells you that the same snippet is invoked by using the shortcuts <div, <p, <h1, and so on, because the corresponding HTML elements all use a similar pattern. Therefore, these elements are grouped together in the Code Snippets Manager.

Opening an Existing Project or Creating a New Project

If you do not already have a Visual Studio 2010 or Visual Web Developer 2010 Express project, follow these steps to create one for this walkthrough. In the walkthrough, you will work with snippets on the Default.aspx page, but if you are using an existing project, you can perform the procedures in any page.

To create a new Web Application Project

1. In the File menu, click New Project.

   The New Project dialog box is displayed.

2. Select the Web node and then select ASP.NET Web Application from the Visual Studio installed templates section.

3. In the Name field, type SnippetTest.

4. Click OK.

   Visual Studio creates a new Web application project.

Inserting HTML Snippets

IntelliSense shows what HTML code snippets are available just as it shows other HTML elements. Several features of code snippets make it fast to insert and edit snippets. In addition, some code snippets include placeholders whose value you can enter without having to move the insertion point to the attribute.

In this procedure, you insert ASP.NET elements. These are included in the HTML section of the Code Snippet Manager.

To insert HTML snippets into markup

1. Open the Default.aspx page if it is not already open.

2. Switch to Source view.

3. Position the cursor before the closing </asp:Content> tag.

4. Type <bu.

   The drop-down list shows element names and snippets. HTML elements are indicated by an icon of a yellow box that displays angle brackets, as shown in the following illustration:

   

   Snippets are indicated by an icon of a sheet of paper, as shown in the following illustration:

   

   Some snippets have the same name as their HTML element and have both the snippet icon and the tag icon.

5. Press TAB twice.

   The markup for a Button control appears and the Text property value is highlighted.

   Note

   If you are not positioned between the opening and closing tags of an element, you might get different results.

6. Type Submit and press ENTER to finish the element.

   The cursor moves to the end of the element; you do not have to use the TAB key to finish the element.

7. Press ENTER to go to the next line.

8. Position the curser at the beginning of the line and right-click the page.

9. Select Insert Snippet to display the available snippet folders.

10. Double-click the HTML snippet folder.

11. Type br and press TAB.

    The markup for a line break (br) element appears.

12. Press ENTER to go to the next line.

13. Position the cursor at the start of the line and press the keyboard shortcut CTRL+K, CTRL+X.

    This displays the snippet folder list.

14. Double-click the ASP.NET snippet folder.

15. Type la and press TAB.

    The markup for a Label control appears and the Text property value is highlighted.

16. Type User Name and press ENTER to finish the element.

17. Press ENTER to go to the next line.

18. From the Edit menu, select IntelliSense, and then select Insert Snippet.

    The snippet folder list is displayed.

19. Double-click the ASP.NET snippet folder.

20. Type textb and press TAB.

    The markup for a TextBox control is displayed.

21. Set the ID of the TextBox control to UserName so that the TextBox control markup matches the following example:

    <asp:TextBox runat="server" ID="UserName" />

22. Go to the next line.

23. Type <req and press TAB two times.

    The markup for a RequiredFieldValidator control appears and the ErrorMessage property value is highlighted.

24. Type You must enter a user name and press TAB.

    Notice that the ControlToValildate property value is highlighted.

25. Type UserName as the control to validate, and then press ENTER to finish the element.

Running the Page

The final step is test the page. To test a page, you can use the Visual Studio Development Server, which runs locally and does not require IIS.

To run the page

1. Press CTRL+F5 to run the page.

2. Press Submit.

   The RequiredFieldValidator control displays an error message.

3. Enter text into the TextBox control.

4. Press Submit.

   This time, the RequiredFieldValidator control accepts the input and allows the page to be submitted.

5. Close the browser.

Next Steps

In this walkthrough, you learned how HTML code snippets can be added to your Visual Studio 2010 project. To learn more about how to work with code snippets, review the following topics:

• Creating and Using IntelliSense Code Snippets. This topic describes how to create and use code snippets.

• Code Snippets Manager. This topic describes how to create your own snippets and how to manage code snippets.

See Also

Concepts

Keyboard Shortcuts in Visual Web Developer