New HTML Editor feature in Visual Studio 11 Developer Preview

New HTML Editor feature in Visual Studio 11 Developer Preview

Rate This
  • Comments 11

Visual Studio 11 Developer Preview has many new HTML editor features, including the following:

Scott Gu's Blog:

From ASP.NET 4.5 and Visual Studio 11 Developer Preview Whitepaper

Discussed a little bit more here than in the whitepaper:

 

Smart indentation

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.

clip_image001

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.

clip_image002

If you don't like the cursor get indented below <div>, you can go to tools->options->Text Editor->HTML->Tabs and check "Block" instead of "Smart" for Indenting.

clip_image003

Server side event handler generation

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.

IntelliSense for all server-side events now include a value called “<Create New Event>” which, as the name implies, will create an event handler with the right signature in the code-behind file.

clip_image004

It will name the event handler after the name specified in the ID attribute, so in this case, the following event handler is generated:

clip_image005

And this is the actual event handler added to the code-behind file:

For C#:

 protected void btnSave_Click(object sender, EventArgs e)
 { 
 }

For VB:

 Protected Sub btnSave_Click(sender As Object, e As EventArgs) 

End Sub

Extract Code to User Control

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.

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.

clip_image008

You will be able to determine the path and name of the user control:

clip_image009

Here's the final look after clicking OK:

clip_image010

Note, for web application, you may need to build the project first before the green squiggle disappear from the generated control syntax.

Enjoy with Visual Studio 11 Developer Preview!

Web Platform and Tools team

  • Could you provide Extract to User Control/Partial view for ASP.NET MVC too?

  • Nice!

    regards

    Varun Maggo

  • Awesome!

  • Great improvements, Scott - thank you! Something else that may be worth considering in the future would be an option where a developer can set how the bar at the very bottom (containing Output, Error List, etc.) of VS behaves. I cannot tell you how many times I accidentally hover over an item down there only for it to expand vertically, covering up what I actually wanted to select. It would be terrific to have an option where we can select something like "Show when clicked" rather than reacting to the hover.

  • Slawek, thanks for the advice, our PM has put it on the feature backlog.

    Simon, in Visual Studio 11 Developer preview, your desired feature is there by default.  You can confirm it via tools->option->Environment->Tabs and Windows, checkbox "Show auto-hidden windows on mouse over" is unchecked.

    Thanks for the feedbacks

    Xinyang Qiu

    Web Platform and Tools

  • btnSave_Click is generated in the markup but ButtonSave_Click is generated in the code behind? Is this configurable?

  • JoeyRobichaud,

    Thanks for pointing the inconsistency in the post.  I just corrected it.

    Xinyang Qiu

    Web Platform and Tools

  • Nice work! I'm looking forward to using these improvements in production :)

  • Good ideia, Extract Code to User Control.

  • Good idea, Extract Code to User Control.

  • The "create new event handler" option seems like it could cause problems if AutoEventWireup="true", which is the default. The event will get wired up twice; once from the OnClick attribute, and once from the auto-magic name matching.

    This sort of thing comes up in the forums all the time, particularly for VB, where you'll sometimes also get a "... Handles <event>" clause, meaning that the handler is attached *three* times.

Page 1 of 1 (11 items)