DotNetCurry Logo

Enhancements for the ASP.NET Web Developer in Visual Studio 2012 (Web Tools Update 2012.2)

Posted by: Suprotim Agarwal , on 3/28/2013, in Category Visual Studio, VSTS & TFS
Views: 60186
Abstract: In this article, we will look at current state of affairs for an ASP.NET Web Developer using Visual Studio 2012 as well as how community extensions add valuable features to Visual Studio seamlessly

Way back in early 2012, Sumit Maitra had given a fantastic tour of Visual Studio 11 - Awesome New Features for Web Developers (as Visual Studio 2012 was then called). There we had seen introduction to features like

  • a. Backward compatibility with Visual Studio 2010
  • b. Search Everywhere
  • c. Improved IntelliSense to support HTML5, JavaScript and CSS
  • d. CSS Styling
  • e. The Page Inspector
  • f. Single Page Application Templates and
  • g. Other framework enhancements

 

Now almost one year down the line, we’ve had the final release of Visual Studio 2012 and an update to it in form of Update 1 (or SP1). Apart from the Visual Studio Service pack update, the Web Tools team has done two separate updates since VS 2012 GA (General Availability)

Today we look at some of the things that were introduced in the recent past and look at the current state of affairs for a Web Developer using Visual Studio 2012.

Last year Microsoft had announced that they will be providing updates to Visual Studio on a regular cadence of shorter intervals. This way a developer will not have to wait until the next big release of Visual Studio to leverage the enhancements to the IDE. The Web Team at Microsoft in particular have done a great job so far to add new web tooling support to Visual Studio 2012 in the form of plugins.

With the Web Essentials plugin by Mads Kristensen one can use some more additional features like JavaScript regions, TypeScript support, Less Support and HTML Zen coding. We recently covered this in our DNC Magazine, January 2013 edition.

 

Evolution of Single Page Apps

Visual Studio has been teasing Single Page Apps for a while now, but it missed the GA deadline and had to be pushed out. It finally made it’s splash with the Web Tools Update 2012.2 (before making a Preview appearance in 2012.1 (or the BUILD Preview as it’s better known). Lets look at it in details.

‘Fixing’ the Visual Studio 2012 Theme

But before we get into the guts of Single Page Apps, some of us may remember there was a huge outcry over Visual Studio 2012’s ‘flat’ look with Uppercase Menu items. So if you would rather have the VS 2010(ish) looks in your VS 2012 setup go ahead and download the ‘Visual Studio Color Theme Editor’ and switch to a theme you like from the following options.

color-theme-picker

You can create your custom themes also if you want. If you would also rather have Title Casing in your menu items then use the all CAPS menus, you can use the ‘All Caps Menu Option’ extension to toggle between All Caps and non-All Caps menus, or use the more feature rich ‘VS Commands for Visual Studio 2012’, that has a boatload of other features too.

Note: Both these are ‘Extensions’ by default don’t work on Visual Studio Express editions.

What are Single Page Apps?

Single page apps are essentially what the name implies – Web Applications that have all their primary functionality in a Single Page. They use Ajax heavily to show data from one or more sources at the same time and updates are performed via AJAX calls to get latest information about only parts of the web application, that have changed. Gmail or ‘Outlook web mail’ are often cited as examples of Single Page Apps. Such apps often depend on services over HTTP only and ASP.NET WebAPI is a perfect complement for building these types of apps.

By default, Visual Studio 2012 comes with a KnockoutJS based SPA template. However, the community has been very active and has contributed with five more templates. You can see all of them here

spa-templates

The selected template ‘Single Page Application’ uses KnockoutJS. The community contributed ones are highlighted by the red rectangle.

Getting Started with SPA using KnockoutJS

To build a SPA in ASP.NET, we start off with an ASP.NET MVC4 Web Application project and select the ‘Single Page Application’ template as show above. Once created, when we run the application, we get the following (Note the URL)

spa-login-page

Clicking on Sign Up doesn’t result in an elaborate post-back that navigates to another page. Instead it simply slides in another view that has the required form fields. Note that the URL does not change. After signup and Login, we are presented with the following UI again at the same URL. Clicking on ‘My Todo List #1” allows you to edit the header, click on any existing Todo item allows you to edit the item and click on ‘Type here to add’ creates a new item.

spa-note-page

Pretty neat set of functionality without any ‘full page postback’ as we know in Web Application. Instead, we have an application that’s almost as rich and responsive as a native app.

Under the Hood of an SPA

Let’s dive a little deeper into the SPA app and as we go along, we will see the new features of Visual Studio as well. First let’s explore the solution structure, specifically the controllers.

controllers

In comparison, when we look at the views, we see only one View and the rest are partial views

views

 

Web API Controllers in SPA

When we look at TodoController or TodoListController, we see that they have controller methods that return an HttpResponse or an Object or Object collection instead of the familiar ActionResult. This is because both the TodoController and TodoListController are WebApi Controllers and the methods are invoked through Ajax calls in the view.

Note that the WebApi has methods that no longer are mirroring HTTP verbs.

The Home Controller however is an MVC4 Controller as is the AccountController. However these methods return JsonResult for Action methods that are invoked via Ajax from JavaScript.

The Html Editor Enhancements

Now let’s open up the _layout.cshtml and checkout a few nifty enhancements in the editor.

tag-correction

First up, we have the DOCTYPE checking for HTML5 enabled by default as seen the Toolbar. Out of the box, the _Layout.cs uses HTML5 doctype. Next there is a very useful feature where closing tags are automatically updated as the opening tags are changed. For example, in the above example the highlighted tag was a <footer> … </footer> tag, however when we started changing the opening tag to be a <div>, the closing tag changed automatically.

Auto-Complete for HTML5 specific tags

The HTML Editor now has significant IntelliSense support for HTML5 tags. For example the <nav> section’s role attribute gets the following attributes for auto-completion

html5-auto-complete

Browser Choices and The Page Inspector

Sumit Maitra sometime back did a great job in covering the Visual Studio 2012 Page Inspector in details, but any Visual Studio 2012 features article needs a mention of the Page Inspector.

multi-browser

If we look at the ‘Run’ button, it is now associated with a browser, and Visual Studio uses that particular browser to launch the application. Fact is the dropdown lists all browsers installed in the system. Using the Browse With settings, you can setup the default browser for your application as well.

Note: Browser settings via ‘Browse With…’ does NOT affect your OS’ default browser setting. This is independent.

Well now that we’ve covered that, what’s the ‘Page Inspector’? The ‘Page Inspector’ is a new functionality in Visual Studio that launches an App in a custom browser and helps debug/understand the View Layout in your web application. For example if we want to know, what’s the CSS style that gives the TODO note it’s yellow color, we could go hunting for the CSS class or do the following

a. Launch the app in Page Inspector

b. Click on the ‘Inspect’ button

c. Hover over the Note till the outermost container is selected. Notice how the related markup is highlighted on the right hand side and the styles are updated on the fly.

page-inspector-inspect

d. Next we switch to the TraceStyles tab to see CSS file in which the CSS is defined.

page-inspector-css-file

Clicking on the file name (TotoList.css) launches its right pane and we can edit it there itself.

css-editor-color-picker

Visual Studio 2012 introduced a plethora of CSS enhancements. Among the first is the inline color picker. If you are on any color property, like in our case ‘background-color’, when you do Ctrl+Space, it brings up the mini color picker that shows the most used colors in the CSS. This can be expanded into a full Color Picker by clicking the toggle button as shown above.

In our case, we launched the CSS file from Page Inspector, so now if we change the color to a shade of Magenta, Page Inspector will in fact apply the CSS changes on the fly and show you what it looks like with your current setting.

css-editor-color-updates

CSS Hierarchy and Regions

Apart from the super useful color editor, Visual Studio manages CSS class hierarchy by tabbing things out appropriately.

hierarchyical-tabbing

As you can see there is a three level hierarchy for the todoList class above. Fact is you can even surround CSS in regions just like in code.

region-declaration

region-collapsed

Other CSS enhancements include automatic addition of vendor specific attributes.

vendor-specific-attribs

Notice how the vendor specific attributes are faded because they have the same value. However if we were to change one of the values to 25px, then they would all be denoted with the same red font.

If required vendor attributes are missing, then the CSS editor highlights with a warning message as follows

missing-vendor-attrib-wrning

 

JavaScript IntelliSense

One of the final things in our list today is the set of enhancements in the JavaScript editor.

To start off with, the JavaScript editor has a decent out of the box, function Name support for any JavaScript library. Seen below are the list of functions and fields in the KnockoutJs library.

js-autocomplete

The only thing one has to do is to add all libraries for which IntelliSense is required, to the _references.js

references-js

Once this is done, method level auto complete is available at design time.

For more involved and detailed function level help, special intellisense files can be created like the jquery-1.8.2.intellisense.js. This is an extension to jquery that has nothing except comments in a format that is similar to XML comments in C#. A small sample is shown below

inte;isense-js

Apart from these major improvements, the JavaScript editor now supports better method/function folding (collapsing) and auto-formatting on triggers like applying a closing brace or a semi-colon.

With that we wrap up in this dive into Visual Studio 2012 features.

Conclusion

To conclude, Visual Studio 2012 is an awesome IDE and along with ASP.NET, provides a fantastic ecosystem for Web Development. Beauty of Visual Studio also lies in its extensibility, as we saw how the third party/community extensions add valuable features to it seamlessly.

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by sebastian on Sunday, March 31, 2013 10:36 AM
do you know if we have to perform any particular action in visual studio 11 to install new templates? as an example, i download twice SPA VSIX from john pappa - hot towel - but nothing appear in my template boxes. brgds!!
Comment posted by Kalyan on Sunday, March 31, 2013 9:14 PM
Hi,
Thanks for info and links. This new tooling for Visual Studio 2012 improves the web development experience. The detailed features are outlined in below post http://www.techbubbles.com/aspnet/top-features-in-asp-net-web-tools-2012-2/
Comment posted by Suprotim Agarwal on Friday, April 5, 2013 4:59 AM
@Sebastian VS 11 or VS 2012? Make sure you are not using a preview edtion!