Visual Studio is an enormous product. With every release and update, it includes a host of improvements, tools, new features and functionality; which ultimately increases the productivity of developers. Every update is aligned with the latest development trends in the market and with Microsoft’s premier technologies and languages.

Since the launch of Visual Studio 2013 in October 2013, Microsoft has released two updates referred to as Visual Studio 2013 Update 1 and 2 (2013.1 and 2013.2) which adds functionality to VS 2013. The updates are cumulative, which means installing the newest package will make sure you get benefits of all previous updates.

This article is published from the DotNetCurry .NET Magazine – A Free High Quality Digital Magazine for .NET professionals published once every two months. Subscribe to this eMagazine for Free and get access to hundreds of free tutorials from experts

Microsoft released Team Foundation Server 2013 Update 2 RTM and Visual Studio 2013 Update 2 Release Candidate (RC) on April 2, 2014 in its Build Conference. Amongst many newly released features in Visual Studio 2013 Update 2, the highlights were the new capabilities in Windows & Phone 8.1 with the support to integrate apps with Cortana (WP new personal assistant) in VS, support for Universal Projects which allows you to build apps that can target multiple devices in the Windows ecosystem, TypeScript 1.0 becoming a fully supported language in VS, Native Code Compliation, Azure integration with Visual Studio, some cool tooling support as well new features for Web Developers and much more.

Visual Studio 2013 Update 2 can be downloaded from here. In  May 2014 during the TechEd event, Microsoft has announced Visual Studio 2014 CTP and ASP.NET vNext. We will soon be posting a What’s New article on that too.

In this article, we will discuss some of the new features in VS 2013 Update 2 targeted towards Web Developers. We will also see how Azure devs can now manage and deploy their apps from Visual Studio.

What is new in Windows Azure SDK 2.3?

If you are a cloud based application developer, you must be having an Azure subscription for using various cloud features like Cloud Services, Mobile Services, Service Bus, SQL Database, Storage etc. If not, get one! To use these features, you need to make use of the Windows Azure portal as shown here:

Visual Studio 2013 Update 2 now comes with the newly designed ‘Server Explorer’ to manage and interact with Windows Azure:

You can now create Virtual Machines directly from Server Explorer by right clicking Virtual Machines > Create Virtual Machine option

In the Create New Virtual Machine wizard, you can choose the subscription to be used when the VM is created. The subscription dropdown contains all subscriptions you have access to with your signed in credentials. If you want to sign in with a different set of credentials, just select from the subscription dropdown to do so.

By clicking on Next, the wizard will fetch a list of Virtual Machine Image type to create the VM. You can choose from platform images, MSDN images or your own set of custom images as per your requirement:

On clicking the Next button, we get another window where we can supply the Virtual Machine Basic settings for the VM such as the name, size and the admin username, password:

Click Next to configure Cloud Service Settings which essentially means to choose how the VM is exposed to the internet.

The next step of the wizard is where we can configure EndPoints for the VM. The Remote Desktop and PowerShell endpoints are created by default to run remote PowerShell commands. You can also add additional endpoints if you are running any other services on the VM. After configuring these EndPoints, click on Create to create the Virtual Machine.

Visual Studio displays the status of VM creation as seen here:

Once the VM is created, Visual Studio will show the Virtual Machine details in the server explorer as below:

If we visit the portal again, we can see the VM details in it as shown here:

We can also connect to the VM using Visual Studio 2013 Server Explorer. Right click on the VM name and select the option ‘Connect using Remote Desktop’:

Enter the Computer name and user name in the Remote Desktop Connection window and click on Connect:

And that’s it. I am sure as a Windows Azure Developer, you are as excited as I am to be able to interact with Azure in Visual Studio 2013. We can make use of this virtual machine for hosting our services, web sites etc. To manage the VM for installing software and services, please see the article Using Azure Virtual Machines for Hosting WCF Services and Communicating with On Premises Applications

Likewise, we can create a SQL Server Database, Mobile Service etc. using the Server Explorer of Visual Studio 2013 Update 2.

Some New Features for Web Application Developers in Visual Studio 2013 Update 2

Visual Studio 2013 Update 2 now contains features like creating Azure web sites, when creating new ASP.NET applications, a SASS and JSON editor, new project templates etc. We will explore some of these new features in this article.

Windows Azure Option

Open Visual Studio 2013 and create a new ASP.NET Web Application. You will see a new Windows Azure functionality in the ASP.NET Project Dialog options as shown here:

This option enables creating a Web Application on Windows Azure as a ‘Web Site’ or can be created on the ‘Virtual Machine’.

For the time being, do not choose any of the Windows Azure option described above; we will come back to it shortly.

Windows Phone Browser support

In the screenshot above, create a MVC application and click OK. The application gets created.

We can test this MVC application in some browsers as seen here:

But what’s new is that apart from the various available browsers, we can now view the page on device browsers as well (naturally Windows Phone by-default). This is simply great!

You can see the Windows Phone option, since the Windows Phone 8.1 development tools are included with Visual Studio 2013 (Update 2 or later). The Windows Phone 8.1 Emulators package adds six emulator images using which developers can test how their apps will look on Windows Phone 8.1 devices. Once we select the browser emulator and view the page on Windows Phone, it will get displayed as shown here:

We can also test our applications on other device emulators as well. Observe that there is an option for More Emulators, clicking on which will take us to this link where various emulators can be downloaded.

Linking Browser with Current Project

The browser link feature was introduced in Visual Studio 2013. Visual Studio 2013 Update 2 now supports HTTPS connections too and even lists these connections in the Browser Link dashboard. Let’s go through this cool feature in case you have never tried it out. The browser link feature provides an option of linking the browser with the current project using which we can change the page elements, CSS etc. using the browser developer tools and synchronize it with Visual Studio 2013.

The Linked Browser shows up with a little Refresh icon image in your toolbar next to debug drop down. Run the application and view the page in Chrome. Make sure that Visual Studio and Chrome are displayed in side-by-side mode and open the Chrome developer tools as shown here:

The browser link button displays a message saying 1 browser is connected:

From the browser link button, select the ‘Browser Link Dashboard’ option as shown here:

This provides the following options:

From the above options, select ‘Inspect Mode’ and move your mouse cursor to the ASP.NET Title of the Page. In Visual Studio, the corresponding view will be opened along with the selected markup synchronized with the selection of the section in Chrome, as shown here:

The above image shows that when the ‘ASP.NET’ Title section is selected in Chrome, the ‘Index.cshtml’ is opened with

ASP.NET

Select ‘Design Mode’ from browser link dashboard and change the Title in Chrome. Visual Studio will show the changes made simultaneously:

After refreshing the page, the changes will be saved in Visual Studio.

Likewise in Chrome, select ‘Styles’ as shown here and change the ‘background-color’ to some other color. The page will show the corresponding changes:

That’s it. This synchronization provides more manageability for the Views, for their look and feel across browsers.

Intelligent JSON Editor

Most web applications (also device apps) communicate with external services (REST Services/WEB APIs) using the JSON data format. In Visual Studio 2013 Update 2 RC, a new JSON Project item is provided. This JSON editor supports JSON syntax validation, colorization, brace completion etc. Intellisense now supports JSON Schema v3 and v4.

In the MVC project we just created using Visual Studio, add a new JSON file. This file will show a drop-down with text as ‘No Schema Selected’ as you can see here:

Expand the drop-down and some standard schemas will be displayed:

Select the Calender schema (json-schema.org/calendar) and design the schema. The schema details will be as shown here:

Creating Custom JSON Schema using JSON Editor

In the Scripts folder of MVC project, add a new JSON file and name it as ‘PersonSchema.json’ and add the person details in it like PersonId, Name, Address etc.:

{
"type":"object",
"properties":{
"PersonId" :{
"description": "Person Id",
"type":"integer"
},
"PersonName" :{
"description":"Full name of the Person",
"type":"string"
},
"Address":{
"description":"Full address of the Person",
"type":"string"
},
"Age":{
"description":"Full address of the Person",
"type":"integer",
"minimum":18
}
},
"required":["PersonId","PersonName","Address","Age"]
}

The above JSON schema defines the type for the Person details as ‘object’; the properties section defines properties for the Person along with the description and type.

Add a new JSON file in the project under the Scripts folder, name it as ‘Person.json’. In this file, refer the PersonSchema.json in it:

Now when we define the details of the Person in the Person.js, we will get an intellisense as follows:

Pretty cool!

Deploy your ASP.NET Web Site on Windows Azure Virtual Machine

Windows Azure SDK 2.3, with Visual Studio 2013 Update 2, allows us to publish our Web Site directly on the virtual machine. This allows us to debug the web site remotely with some simple steps to follow.

Step 1: Open Visual Studio 2013 and create a new ASP.NET Web Application. While creating this web application select ‘Create Remote Resources’ checkbox and select Virtual Machine from the Drop-Down as shown here:

Step 2: On clicking ‘OK’ we will be asked to create the Virtual Machine where the Application will be hosted. We need to set the Virtual Machine Details:

This will create a Virtual Machine, the details of the steps followed will be shown in the output window:

In the Server Explorer, we will see the new Virtual Machine created.

Step 3: In the Solution Explorer we can view the files used for publishing the Web Site:

The Publish-WebApplication.ps1 file is the PowerShell file. This is used to create some Windows Azure resources like SQL Database, Storage etc. The ‘Azure_VM_WebSite-VM-dev.json’ file contains configurations for the web site, like virtual machine administrator, size of VM, endpoints etc.

The remote debugging on the VM can be enabled as shown here:

This option will provide the following information specifying status of enabling remote debugging on the VM:

Step 4: Publish the Web Site on the VM. The following window gets displayed with the information as shown here:

Click on ‘Next’.

Step 5: On the Publish Web window, select Configuration as ‘Debug’ and click on Next and publish. The site will be published.

Step 6: Right-click on the VM in the Server Explorer and select ‘Attach Debugger’ as shown here:

This step will fetch the processes from the Windows Azure machine:

Select w3wp.exe on the VM as shown below:

Put the BreakPoint in the code, (load event of the page or the Index method of the Home controller), and view the page in the browser with the remote address as ‘App’.cloudApp.net. The code hits the breakpoint:

This is an awesome feature for the devs who have experience remote debugging in the past here. Apart from the changes we explored, we also have a new SASS project item and editor, some changes in ASP.NET Scaffolding, some ASP.NET template changes including ASP.NET Identity.

Microsoft’s is certainly on the right path giving developers a single set of tools that spans devices and the cloud. Exciting times ahead!

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!

Author

Mahesh Sabnis is a DotNetCurry author and a Microsoft MVP having over two decades of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions), and Front-end technologies like Angular and React. Follow him on twitter @maheshdotnet or connect with him on LinkedIn