{"id":2634,"date":"2011-09-20T11:40:00","date_gmt":"2011-09-20T11:40:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2011\/09\/20\/new-html-editor-feature-in-visual-studio-11-developer-preview\/"},"modified":"2022-08-11T02:21:07","modified_gmt":"2022-08-11T09:21:07","slug":"new-html-editor-feature-in-visual-studio-11-developer-preview","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/new-html-editor-feature-in-visual-studio-11-developer-preview\/","title":{"rendered":"New HTML Editor feature in Visual Studio 11 Developer Preview"},"content":{"rendered":"<p>Visual Studio 11 Developer Preview has many new HTML editor features, including the following:<\/p>\n<p>Scott Gu&#8217;s Blog:<\/p>\n<ul>\n<li><a href=\"http:\/\/weblogs.asp.net\/scottgu\/archive\/2011\/08\/31\/html-editor-smart-tasks-and-event-handler-generation-asp-net-vnext-series.aspx\">Source view smart task<\/a><\/li>\n<\/ul>\n<p>From <a href=\"http:\/\/www.asp.net\/vnext\/whats-new\/\">ASP.NET 4.5 and Visual Studio 11 Developer Preview Whitepaper<\/a><\/p>\n<ul>\n<li><a href=\"http:\/\/www.asp.net\/vnext\/whats-new#_Toc303354492\">WAI-ARIA support<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"http:\/\/www.asp.net\/vnext\/whats-new#_Toc303354493\">New HTML5 snippets<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"http:\/\/www.asp.net\/vnext\/whats-new#_Toc303354499\">Auto-reduce statement completion<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"http:\/\/www.asp.net\/vnext\/whats-new#_Toc303354495\">IntelliSense for code nuggets in attributes<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"http:\/\/www.asp.net\/vnext\/whats-new#_Toc303354496\">Automatic renaming of matching tag when you rename an opening or closing tag<\/a><\/li>\n<\/ul>\n<p>Discussed a little bit more here than in the whitepaper:<\/p>\n<ul>\n<li><a href=\"#smartindent\">Smart indent<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"#serverevent\">Event handler generation<\/a><\/li>\n<\/ul>\n<ul>\n<li><a href=\"#ExtractCodeToUserCtrl\">Extract to user control<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a name=\"smartindent\"><\/a><\/p>\n<h2>Smart indentation<\/h2>\n<p>The indentation of HTML elements has been tightened up so the cursor will always be placed the right place after hitting Enter when inside any empty HTML tag.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/3146.clip_image001_thumb.png\"><img decoding=\"async\" style=\"margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px\" title=\"clip_image001\" border=\"0\" alt=\"clip_image001\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/3146.clip_image001_thumb.png\" width=\"123\" height=\"36\" \/><\/a><\/p>\n<p>When the user hits Enter, the closing div tag is moved 2 lines down and indented correctly according to the opening tag. The cursor is also indented to enforce the hierarchical indentation of elements.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/4604.clip_image002_thumb.png\"><img decoding=\"async\" style=\"margin: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px\" title=\"clip_image002\" border=\"0\" alt=\"clip_image002\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/4604.clip_image002_thumb.png\" width=\"72\" height=\"76\" \/><\/a><\/p>\n<p>If you don&#8217;t like the cursor get indented below &lt;div&gt;, you can go to tools-&gt;options-&gt;Text Editor-&gt;HTML-&gt;Tabs and check &#8220;Block&#8221; instead of &#8220;Smart&#8221; for Indenting.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/5756.clip_image003_thumb.png\"><img decoding=\"async\" style=\"padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px\" title=\"clip_image003\" border=\"0\" alt=\"clip_image003\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/5756.clip_image003_thumb.png\" width=\"456\" height=\"268\" \/><\/a><\/p>\n<p><a name=\"serverevent\"><\/a><\/p>\n<h2>Server side event handler generation<\/h2>\n<p>Creating event handlers for ASP.NET controls have gotten significantly easier in Visual Studio 11 Developer Preview. Developers no longer have to write the event handlers and hook them up manually, which saves a lot of time.<\/p>\n<p>IntelliSense for all server-side events now include a value called &ldquo;&lt;Create New Event&gt;&rdquo; which, as the name implies, will create an event handler with the right signature in the code-behind file.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/8372.clip_image004_thumb.jpg\"><img decoding=\"async\" style=\"padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px\" title=\"clip_image004\" border=\"0\" alt=\"clip_image004\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/8372.clip_image004_thumb.jpg\" width=\"628\" height=\"51\" \/><\/a><\/p>\n<p>It will name the event handler after the name specified in the ID attribute, so in this case, the following event handler is generated:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/1018.clip_image005_thumb.jpg\"><img decoding=\"async\" style=\"padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px\" title=\"clip_image005\" border=\"0\" alt=\"clip_image005\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/1018.clip_image005_thumb.jpg\" width=\"628\" height=\"25\" \/><\/a><\/p>\n<p>And this is the actual event handler added to the code-behind file:<\/p>\n<p>For C#:<\/p>\n<pre class=\"code\"><span style=\"background: white;color: black\"> <\/span><span style=\"background: white;color: blue\">protected void <\/span><span style=\"background: white;color: black\">btnSave_Click(<\/span><span style=\"background: white;color: blue\">object <\/span><span style=\"background: white;color: black\">sender, <\/span><span style=\"background: white;color: #2b91af\">EventArgs <\/span><span style=\"background: white;color: black\">e)<\/span><\/pre>\n<pre class=\"code\"><span style=\"background: white;color: black\"> { <\/span><\/pre>\n<pre class=\"code\"><span style=\"background: white;color: black\"> }<\/span><\/pre>\n<p>For VB:<\/p>\n<pre class=\"code\"><span style=\"background: white;color: black\"> <\/span><span style=\"background: white;color: blue\">Protected Sub <\/span><span style=\"background: white;color: black\">btnSave_Click(sender <\/span><span style=\"background: white;color: blue\">As Object<\/span><span style=\"background: white;color: black\">, e <\/span><span style=\"background: white;color: blue\">As <\/span><span style=\"background: white;color: #2b91af\">EventArgs<\/span><span style=\"background: white;color: black\">) <br \/><br \/> <\/span><span style=\"background: white;color: blue\">End Sub<\/span><\/pre>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/00\/00\/00\/63\/56\/metablogapi\/8015.clip_image007_2.png\"><\/a><\/p>\n<p><a name=\"ExtractCodeToUserCtrl\"><\/a><\/p>\n<h2>Extract Code to User Control<\/h2>\n<p>In big web documents it can sometimes be a good idea to separate out the individual pieces in their own user controls. This form of refactoring is known from programming languages and helps increase the readability and structure of a web page.<\/p>\n<p>The ability to extract any selected markup to its own user control has been added to Visual Studio 11 Developer Preview. Simply highlight the bits and pieces to extract and then right-click and click Extract to User Control.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/0181.clip_image008_thumb.png\"><img decoding=\"async\" style=\"padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px\" title=\"clip_image008\" border=\"0\" alt=\"clip_image008\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/0181.clip_image008_thumb.png\" width=\"667\" height=\"367\" \/><\/a><\/p>\n<p>You will be able to determine the path and name of the user control:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/0640.clip_image009_thumb.png\"><img decoding=\"async\" style=\"padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px\" title=\"clip_image009\" border=\"0\" alt=\"clip_image009\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/0640.clip_image009_thumb.png\" width=\"562\" height=\"378\" \/><\/a><\/p>\n<p>Here&#8217;s the final look after clicking OK:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/8535.clip_image010_thumb.png\"><img decoding=\"async\" style=\"padding-left: 0px;padding-right: 0px;padding-top: 0px;border-width: 0px\" title=\"clip_image010\" border=\"0\" alt=\"clip_image010\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2011\/09\/8535.clip_image010_thumb.png\" width=\"901\" height=\"314\" \/><\/a><\/p>\n<p>Note, for web application, you may need to build the project first before the green squiggle disappear from the generated control syntax.<\/p>\n<p>Enjoy with Visual Studio 11 Developer Preview!<\/p>\n<p>Web Platform and Tools team<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visual Studio 11 Developer Preview has many new HTML editor features, including the following: Scott Gu&#8217;s Blog: Source view smart task From ASP.NET 4.5 and Visual Studio 11 Developer Preview Whitepaper WAI-ARIA support New HTML5 snippets Auto-reduce statement completion IntelliSense for code nuggets in attributes Automatic renaming of matching tag when you rename an opening [&hellip;]<\/p>\n","protected":false},"author":404,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7393,7394,7395,7391],"class_list":["post-2634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-extract-to-user-control","tag-html-editor","tag-smart-indent","tag-visual-studio-11-developer-preview"],"acf":[],"blog_post_summary":"<p>Visual Studio 11 Developer Preview has many new HTML editor features, including the following: Scott Gu&#8217;s Blog: Source view smart task From ASP.NET 4.5 and Visual Studio 11 Developer Preview Whitepaper WAI-ARIA support New HTML5 snippets Auto-reduce statement completion IntelliSense for code nuggets in attributes Automatic renaming of matching tag when you rename an opening [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/2634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/404"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=2634"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/2634\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=2634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=2634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=2634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}