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  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 need:

• Visual Studio or Visual Studio Express for Web.

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, and in Source view of the HTML editor when you are creating a Web page. 

In this walkthrough, you add HTML and ASP.NET markup to a Web Forms page. Almost all snippets have a quick way to insert the code. For example, to insert an ASP.NET Button server control into a Web Forms pages, you can type <bu and then press the TAB key twice. Alternatively, you can type button and then press the TAB key once. 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. A list appears 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.

In Visual Studio, 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 see what snippets are available for HTML elements.

To view available HTML code snippets with the Code Snippets Manager

1. Open Visual Studio. 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, and HTML.

4. Under Location, expand the HTML folder.

5. Select div.

   Notice that the Alternative Shortcuts list includes related HTML elements such as p, h1, h2. The related elements also have snippets that you can insert by using the shortcuts <div, <p, <h1, and so on.

Opening an Existing Project or Creating a New Project

If you do not already have a Visual Studio or Visual Studio Express for web application project, follow these steps to create one for this walkthrough. In the walkthrough, you work with snippets on the Default.aspx page, but you can perform the same steps on a page of an existing project.

To create a 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 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 <che.

   The drop-down list shows element names and snippets. An icon that contains angle brackets indicates an HTML element, as shown in the following illustration:

   

   An icon of a sheet of paper indicates a Snippet, 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 CheckBox control appears and the text property value is highlighted.

   Note

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

6. Type Check box 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 cursor 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.

    The snippet folder list appears.

14. Press TAB to choose the ASP.NET snippet folder.

15. Type ra and press TAB.

    The markup for a RadioButton control appears and text is highlighted.

16. Type Radio Button. Press ENTER to finish the element.

17. Press ENTER to go to the next line.

18. Type <br, and then press TAB twice.

19. Press ENTER to go to the next line.

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

    The snippet folder list is displayed.

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

22. Type la and press TAB twice.

    The markup for a Label control is displayed. The property value text is highlighted.

23. Type Text box and press ENTER.

24. Go to the next line.

25. Type <textb and press TAB two times.

    The markup for a TextBox control appears.

Running the Page

The final step is to test the page. To test a page, you can use IIS Express, which runs locally and does not require IIS.

To run the page

1. Press CTRL+F5 to run the page.

2. Scroll down to the bottom. The check box, radio button, label, and text box controls are on the bottom of the page.

Next Steps

In this walkthrough, you learned how HTML code snippets can be added to your Visual Studio project. To learn more about how to work with code snippets, see the topics on the Code Snippets page.