Exercise 1: Using HTML Code Snippets in Visual Studio 2010

In this exercise, you will learn how to use HTML code snippets in Visual Studio 2010. You will also learn how to create your own custom HTML snippets.

Task 1 – Adding a New ListView to an HTML Page Using an HTML Code Snippet

In this task, you will open an existing ASP.NET web application and use a snippet to add a ListView control to an existing webpage.

1. Navigate to Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010. Select the File | Open | Project/Solution… menu command. In the Open Project dialog, navigate to \Source\Ex01-HTMLCodeSnippets\begin\C#\HTMLLab and select HTMLLab.sln file.

2. In Solution Explorer, open the Default.aspx file by double-clicking it. Examine the code present on the page. Note that the page contains a GridView control with an ID of Products.

   Figure 1

   Existing Grid View control in Default.aspx

3. On the Default.aspx page, you will add a ListView control. Place the cursor after closing GridView tag (</asp:GridView>) and press the ENTER key. Press the “<” key to invoke the completion list.

   Figure 2

   Completion List

   Note:

   The small icons next to each completion indicate what type of completion it is:

   Indicates that a completion entry is also a snippet keyword

   Indicates a snippet keyword

   Indicates a completion entry

4. Select ListView from the completion list and press the TAB key twice to insert the snippet.

   Figure 3

   The inserted snippet

5. To progress you will need to add the layout, to put in a temporary placeholder. Enter the following code to define the LayoutTemplate:

   XML

   <LayoutTemplate> <table id="itemPlaceholderContainer"> <tr runat="server" id="itemPlaceholder"> </tr> </table> </LayoutTemplate>
   Figure 4

   The completed snippet

   Note:

   In this task, you brought up the completion list by typing the “<” character. Another way to show that list is to use the CTRL+J shortcut. Yet another option is to invoke the snippet picker by using the CTRL+K, CTRL+X shortcut. This may be faster in some cases because you can narrow the snippets by group as shown below:

   By selecting the ASP.NET folder and pressing the TAB key, you will see a list of the ASP.NET specific snippets:

   You can abort this action by pressing the ESC key. Do not add any more controls to this page at this time.

Task 2 – Creating a Custom HTML Snippet

In this task, you will create a custom HTML snippet for use inside of the Visual Studio 2010 IDE. The new code snippet will create a label control with the preset default values. Any custom Snippets implemented are stored as XML files in a well-known directory.

1. In Visual Studio 2010 select File | New | File from the menu to open the New File dialog. In the New File dialog select General from Categories, XML File from Templates and click Open.

2. To create the structure of the snippet you will use an existing snippet. In the XML file editor, press CTRL+K, CTRL+X to display the snippets list.

   Figure 5

   Snippets list

3. Select Snippet from the list. An XML code snippet will be inserted in the file.

   Figure 6

   XML definition of a code snippet list

4. Supply the following values for the indicated XML elements:

   Field	Value
   Title	“Address Block”
   Shortcut	“AddrBlock”
   Description	“XML snippet to create a quick address block.”

   Snippet picker uses the Title value to display the name of the snippet. Completion list uses the Shortcut value to select the snippet.

5. Under the <SnippetTypes> node, delete the first <SnippetType> XML element containing the value SurroundsWith. Be sure to leave the <SnippetType> XML element that contains the value Expansion.
6. Delete the entire Declarations XML node.
7. Delete the Code XML node, including the CDATA value within it from the Snippet XML element.

8. Delete the XML element at the top of the file. When finished with these steps, your snippet should look like this:

   XML

   <CodeSnippet Format="1.0.0" xmlns="https://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> <Header> <Title>Address Block</Title> <Author>author</Author> <Shortcut>AddrBlock</Shortcut> <Description>XML Snippet to create a quick address block.</Description> <SnippetTypes> <SnippetType>Expansion</SnippetType> </SnippetTypes> </Header> <Snippet> </Snippet> </CodeSnippet>

9. In the Snippet element, add the following code (enclosing Snippet tags shown for guidance).

   XML

   <Snippet>

   <Code Language="html"> <![CDATA[<label for="CustomerType">Customer Type:</label> <select> <option>Federal</option> <option>State</option> <option>Corporate</option> <option>Residential</option> </select> <br /> <label>Name: </label> <input id="name" name="name"/><br /> <label >Address Line 1: </label> <input id="AddressLine1" name="AddressLine1"/><br /> <label>Address Line 2: </label> <input id ="AddressLine2" name="AddressLine2"/><br /> <label>City </label> <input id="City" name="City"/><br /> <label>State </label><input id="State" name="State"/><br /> <label >Zip Code </label> <input id="zip" name="zip"/><br /><br /> $end$]]> </Code>FakePre-f088a5d684ff485cbb5cde81552bbe33-0c3c1de63c4c47199c6145d09a3c7a1e

   This will add a label control with the ID of AddrBlock.

10. Using Windows Explorer, navigate to C:\Users\<Username>\Documents\ folder. Create a sub-folder “Snippets” in the C:\Users\<Username>\Documents\ folder.

    Note:

    There are two ways to deploy code snippets to the environment.

    Option 1: Save the XML as a .snippet file to the C:\Users\<Username>\Documents\Visual Studio 10\Code Snippets\Visual Web Developer\My HTML Snippets\ folder. Visual Studio will automatically find these snippets and make them available for use.

    Option 2: Save created snippet XML as a .snippet file in some other location and use the Code Snippets Manager to add the snippet to Visual Studio.

    Snippets added using the Code Snippets Manager will not be available in the auto complete list.

11. Select the File | Save As menu command. In the Save File As dialog, change the path to C:\Users\<Username>\Documents\Snippets folder. Change the file name to “AddrBlock”, set the Save as type dropdown list to Snippet Files (*.snippet) and click Save.

12. Open the Code Snippets Manager by using the Tools | Code Snippets Manager… menu or the CTRL + K, CTRL + B shortcut. The Code Snippets Manager dialog appears.

    Figure 7

    Code Snippets Manager

13. In the Language dropdown list, select HTML. Click the Add button to open a Code Snippet Directory dialog.

    Figure 8

    Add a code snippets folder

14. In the Code Snippet Directory dialog, navigate to the folder you created (C:\Users\<Username>\Documents\Snippets\) and click the Select Folder button. The Snippets folder appears in the list of snippet locations. Click the OK button to dismiss the dialog.

    Figure 9

    Snippets folder added to list of snippet locations

Next Step

Exercise 1: Verification