DotNetCurry Logo

What’s New in Visual Studio 2013 Update 2 for Web Developers

Posted by: Mahesh Sabnis , on 6/24/2014, in Category Visual Studio, VSTS & TFS
Views: 24047
Abstract: Visual Studio 2013 Update 2 contains a plethora of new features to make developers more productive. In this article, we will discuss some of these new features and also see how Azure devs can now manage and deploy their apps from Visual Studio

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:

azure-portal

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

new-server-explorer

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

create-virtual-machine

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.

choose-subscription

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:

virtual-machine-image

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:

vm-settings

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

cloud-service-settings

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:

vm-creation-status

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

vm-details

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

vm-details-portal

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’:

connect-remote-desktop

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

remote-desktop-connection

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:

windows-azure-website

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:

windows-phone-emulators

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:

browser-emulator

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.

browser-linking

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:

chrome-dev-tools

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

browser-connected

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

browser-link-dashboard

This provides the following options:

browser-link-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:

synchronized-markup

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

ASP.NET

marked.

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

design-mode

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:

change-bg-color

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:

json-file

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

standard-schema

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

calendar-schema

 

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:

person-schema

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

json-intellisense

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:

azure-vm

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:

virutal-machine-azure

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

vm-creation-log

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:

publish-scripts

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:

vm-remote-debugging

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

debugging-status

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

publish-web

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:

attach-debugger

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

getting-processes

Select w3wp.exe on the VM as shown below:

w3wp.exe

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:

remote-debugging-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!

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on Google+
Further Reading - Articles You May Like!
Author
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years 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). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by James Hancock on Tuesday, June 24, 2014 9:35 AM
It also includes endless crashes of Visual Studio, hangs of the environment, constant restarts and clearing of the temp folder, and my personal favorite: Typescript hangs for exactly 3.5 minutes any time it hits an error, throw or debugger command locking up IIS Express and Visual Studio and most of the browser window too while it's at it.

Not a good update.
Comment posted by Suprotim Agarwal on Tuesday, June 24, 2014 11:32 AM
James that's strange. I do some TypeScript development but have faced none of these issues. Yes I did observe VS@TypeScript gets a little unresponsive for a couple of seconds but overall I love the new features. Probably VS 2014 and .NET vNext will excite you. Stay tuned for a detailed article on it.
Comment posted by 4.1.0 on Thursday, June 26, 2014 4:58 AM
4.1.0