Exercise 2: What’s New in the HTML Editor
Visual Studio has an improved HTML editor. Some of the enhancements included in this version are smart indentation in HTML documents, HTML5 snippets, HTML start and end tag matching, and HTML validation. Throughout this exercise, you will see how these changes improve your fluency when working in the website markup.
Like the CSS editor, the HTML editor was also improved. Most of these improvements are small ones that make the Web developer’s life easier. Things like more code snippets for HTML5, smart indentation, matching start and end tags when editing and validation targeting the HTML document DOCTYPE are some of these improvements.
Task 1 – Improved DOCTYPE Validation
The HTML editor now has the ability to check the DOCTYPE of your page, even though the definition might be in the master page. Depending on the DOCTYPE of your page, the HTML editor will validate with the correct set of rules and will filter the IntelliSense list considering the DOCTYPE elements.
In this task, you will change the DOCTYPE of a page to see how the HTML editor behavior changes accordingly.
- If not already opened, start Visual Studio and open the WhatsNewASPNET.sln solution located in the Source\WhatsNewASPNET folder of this lab.
- Open the Site.Master page.
Notice the Target Schema for Validation Toolbar. The way the HTML editor behaves (Validation, IntelliSense, etc.) will properly change to fit the Doctype selected.
Figure 14
Use Doctype in HTML Source Editing toolbar
Place the cursor under the body element, and start typing the name of an HTML5 element (for example, video). Notice that the element is not available in the IntelliSense list.
Figure 15
HTML5 elements not listed
Undo the changes to the DOCTYPE definition, setting the value to HTML5.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Web11.SiteMaster" %>
FakePre-ec7954178af2470a836830c1d1f72deb-44f023bf79ee48c386471a38fb97b62a<!DOCTYPE html>FakePre-aef998c1338b41dd9f2f512fcddf152a-13e3931cf70e4e6e927d0987a5cefa43FakePre-30d6df5eb933436eb6f23a0eba994dba-82958b9ab9924b91ab01f247b993a8a4
Place the cursor under the body element and start typing an HTML5 element again (For example, like video). Notice that the HTML5 elements are now available in the IntelliSense list.
Figure 16
HTML5 elements being listed
Visual Studio now updates the HTML opening or closing tags of the element that you are editing to match each other. This new feature will improve your productivity when editing HTML tags.
On the Default.aspx page, add an H3 element with a title (for example, Web11 Rocks!).
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
FakePre-c8e23e1f896644e5b0504551e9590f0d-5c1bd88680b444348969891b649195f8FakePre-cdf3fedc3d7f46b592d54984b221d323-84e485aa86e34912934957994b05bff7 <h3>Visual Studio 11 Rocks!!</h3>FakePre-38e8bcc2f0814f3994390499aa9d24fe-75fd2cd339824c1db7c8312319f955d3
Change the H3 tag and type H2 or H1.
Notice that the end tag automatically updates. You can also modify the end tag to see that the start tag updates accordingly too.
Figure 17
Automatic update of the end tag
Task 3 – New HTML5 Code Snippets
Visual Studio now includes several HTML5code snippets. In this task, you will use some of these snippets.
- Add a new folder named audio to the root of the web site folder. Open Windows Explorer and copy any audio file into the audio folder of the WhatsNewASPNET solution.
In the Default.aspx page, locate the cursor under the Web11 Rocks!! Header. Type audio and press the TAB key.
The new HTML editor includes code snippets for HTML5 content. Remember to use the proper DOCTYPE definition to enable the HTML5 snippets.
Figure 18
Inserting HTML5 Code Snippets
Update the audio source to point to an existing audio file.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
FakePre-daaae7b67ade4f7ebae204d432c907fa-ca48c9c894454481a7dcd4993630a30eFakePre-3ff22a63a798434b81506b0224acff44-f1127fd932ae4b7c8728456cd6e68131FakePre-d926e44f8edc48d5bdd90e240065fef2-4c59479f5d06456b857de0ce937e6336FakePre-5ade976cd4814a69af6ed027c0f6afd2-b574f4d3a468436f893da9ba10024be4 <source src="audio/Kalimba.mp3" />FakePre-b2e03a1bf66b475cad24b7f6d1c76a18-aec2cd4e50ea489188e9fab7b5f80d4fFakePre-3f728c296ccd4ca1a11b6359daa63cc8-6f65dc3e9b154f9d9b1852109c435744
Press F5 to run the site and play the audio.
Figure 19
Running the audio control
You can also try more snippets included in Visual Studio, such as video, figure, etc.
Now, try to insert a control in some part of the page. For example, try to insert a GridView control, but instead of typing Gri, start typing GV. Notice that the IntelliSense list shows the asp:GridView control.
IntelliSense in the HTML Editor now provides title-casing search, as well as partial matching (retrieving all elements that contains the term).
Figure 20
Inserting a GridView with IntelliSense lists
If you type grid you will get the all the items that match the term, but Visual Studio will suggest the gridview control:
Figure 21
Inserting a GridView with IntelliSense lists and partial matching
Another improvement in the HTML Editor is the Smart Tags feature. Smart tags make it easy to perform common or repetitive development tasks on a per-control basis. This feature was already available in the HTML Designer, but not in the HTML Editor.
Open Site.Master and locate the asp:Menu element. Place the cursor on the start tag and notice that the small glyph displayed at the bottom of the element – click it to open the smart tasks menu. Notice that you have quick access to some tasks related to the Menu control.
Figure 22
Smart tasks for the Menu control
Task 5 – Smart Indentation
One of the best practices in HTML is indenting the nested elements to keep the code readable. In Visual Studio 11, you will notice that the editor automatically indents the elements while you are writing the code.
In previous version of Visual Studio, smart indentation was available in the XML editor but not in the HTML editor.
Make sure that the Indenting configuration on the HTML Editor is set to Smart Indentation. To do that, select the Tools | Options menu option and then select the Text Editor | HTML | Tabs page in the left pane of the screen. Select the Smart indentation option.
Figure 23
HTML Editor settings
- On the Default.aspx page, remove all the content under the audio element.
Place the cursor at the end of the opening audio element and hit ENTER.
Notice that the new position of cursor has an additional indentation level.
Figure 24
Smart indentation in the HTML Editor
- Restore the audio tag with the content you have removed, or close Default.aspx without saving the changes.
The Refactoring tools included in Visual Studio, such as extracting a portion of code to a function, are great features that facilitate the improvement and the refactoring the existing code. The counterpart for ASP.NET pages would be the extraction of HTML code to a User Control. Doing it manually would involve several steps, like creating a new User Control, moving the code section to the User Control, registering a tag prefix for the User Control, and, finally, instantiating the User Control on the pages. Now, the new Extract to User Control tool automatically performs all those steps for you.
In this task, you will use the new Extract to User Control contextual operation to generate a new user control from the selected code.
- On the Default.aspx page, select the H2 and audio elements.
Right-click and select Extract to User Control.
Figure 25
Extract to User Control menu option
Type a name for the new user control. For instance, Jukebox.ascx, and then click OK.
Figure 26
Saving the extracted user control
Notice that the selected code was extracted to a user control and the original location of the selected code was replaced with an instance of the new user control.
Figure 27
Page automatically updated to use the new user control
- Press F5 to run the page and verify that the control works.