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.
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
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)
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.
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.
In comparison, when we look at the views, we see only one View and the rest are partial 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.
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
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.
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.
d. Next we switch to the TraceStyles tab to see CSS file in which the CSS is defined.
Clicking on the file name (TotoList.css) launches its right pane and we can edit it there itself.
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 Hierarchy and Regions
Apart from the super useful color editor, Visual Studio manages CSS class hierarchy by tabbing things out appropriately.
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.
Other CSS enhancements include automatic addition of vendor specific attributes.
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
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.
The only thing one has to do is to add all libraries for which IntelliSense is required, to the _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
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.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
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
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn