Start the New Taste of Visual Studio 2012 With Web Tools 2013.1

Introduction

Microsoft is continually improving its products. The changes are an enhancement of the previous product, in other words Visual Studio 2012. As you know, Microsoft has revealed that the last update for Visual Studio 2012 is on July 2013 and now Microsoft has revealed the ASP.NET and Web Tools 2013.1 for the Visual Studio 2012. Now, you can get the benefits, such as ASP.NET MVC 5, Web API 2, Entity Framework and so on by upgrading your Visual Studio 2012. There are various types of enhancements that have taken place in your Visual Studio 2012.

You can now create an ASP.NET Web Application using MVC 5. The MVC 5 project is empty by default in the Visual Studio 2012. You need to add Controllers, Models and Views and add new scaffolded items in Visual Studio 2012. You do not need to use it by Visual Studio 2013. The same will apply to the Web API2 and Entity Framework 6. You just upgrade your Visual Studio 2012 and see the changes in it after restarting the IDE.

Prerequisites

The following are the prerequisites:

• Visual Studio 2012
• Visual Studio 2012 Express

Download Update

The following is the way to download and update the Visual Studio 2012. Follow the instructions given below.

Step 1: Open Extensions and Update in Visual Studio 2012.

Step 2: In the left pane, find the Product Updates option and click on "Update" of the notification as shown below:

It will update the Visual Studio 2012 but make sure you close Visual Studio 2012 for updating.

Step 3: Now download the ASP.NET Web Tools 2013.1 for Visual Studio 2012. It will download the Web Platform Installer. Execute the file.

Step 4: Click on "Install" to install the Visual Studio 2012 for the Web with the latest ASP.NET Framework and Web Developer Tools.

Step 5: In the next wizard, you can see the various options to install. Select the options to install and click on "I Accept".

Step 6: In the INSTALL and CONFIGURE tab you can see that your installation is in progress.

Step 7: In the FINISH tab, your selections will be installed successfully.

Brief Introduction

So, let's have a look at those features that are useful for the web developers of Visual Studio 2012 and Visual Studio 2012 Express by the following sections:

• Bootstrap
• Project Templates
• Entity Framework 6
• ASP.NET Scaffolding
• NuGet 2.7
• Razor 3

Let's have a look at these sections in brief.

Bootstrap

The Bootstrap theme is to be used by ASP.NET MVC 5 and now you can also use this by updating the Web Tools of Visual Studio. It provides a sleek and intuitive framework for rapid and smooth web development. Generally, the Bootstrap theme is available in Visual Studio 2013 to present the ASP.NET Web Application developed for MVC 5. You can see the MVC 5 developed web application is using the Bootstrap theme in the following screenshot:

Project Templates

The Visual Studio (that is not updated) has the project templates, such as MVC 4 to develop the ASP.NET Web Application. Have a look:

When you upgrade your Visual Studio, there are various templates installed to develop the application as in the following:

• ASP.NET MVC 5 Template
  
  The latest MVC 5 template is now available to develop the ASP.NET Web Application in Visual Studio 2012. You can now use scaffolding for the controllers and views. As I said earlier, there is an empty MVC 5 project available to create the ASP.NET Web Application. So let us have an example to create and MVC 5 project in Visual Studio 2012 using the following procedure:
  
  Step 1: Open Visual Studio 2012 (Updated). Ensure that your Visual Studio 2012 is updated.
  
  Step 2: Select the Web option in the left pane and create the Empty MVC 5 project.
  
  
  
  Step 3: Now as you can see in your Solution Explorer, your project is empty. So at first we'll create a model class.
  
  Step 4: From the NuGet Package, install the Entity Framework 6 in your solution.
  
  
  
  Step 5: Add a Model class by right-clicking on the Models folder and add a Class as User.cs.
  
  
  
  Replace the boilerplate code with the following code:
   

  using System;

  using System.Data.Entity;

   

  namespace NewMvcDemo.Models

  {

      publicclassUser

      {

          publicint ID { get;set; }

          publicstring  Name { get;set; }

          publicstring City { get;set; }

          publicstring Company { get;set; }

      }

   

      publicclassUserDbContext : DbContext

      {

          publicDbSet<User> Users { get;set; }

      }

  }

  Step 6: Open the Web.Config file and in the <configuration>, add the following code: 
   

  <connectionStrings>

      <addname="UserDbContext"

  connectionString="Data Source=(LocalDb)\v11.0; AttachDbFilename=|DataDirectory|\User.mdf;

  Integrated Security=true"

        providerName="System.Data.SqlClient"/>

  </connectionStrings>
  
  Step 7:Open theApp_Start\RouteConfig.cs file and modify the code with the following code:
  
  publicstaticvoid RegisterRoutes(RouteCollection routes)

  {

      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

   

      routes.MapRoute(

          name: "Default",

          url: "{controller}/{action}/{id}",

          defaults: new { controller = "User", action = "Index",
   id = UrlParameter.Optional }

              );

  }
  
  Step 8: Now by right-clicking on the Controllers folder, add a new Scaffolded Item as in the following:

  
  
  Step 8: In the Add Scaffold wizard, do as shown below:
  
  
  
  Step 9: Enter the Controller name, select the model class and context class in the next Add Controller wizard:
  
  
  
  It will scaffold the controller and create the CRUD operations in it. I will show how to do CRUD operations in a future article.
  
  Step 10: Now debug your application.
  
  
  
  As you know, this is an empty project, therefore we need to create the Home, Account controllers. Here in the preceding image we can see our newly created UserController. 
   

• ASP.NET Web API 2 Template
  
  The Web API 2 template was also be added in this new release. It is referenced by the latest web API 2 NuGet packages to use scaffolding the controllers and views. Have a look:
  
   

Entity Framework 6

The latest version of Entity Framework, EF 6, is to used when the MVC or Web API 2 controllers and views are scaffolded. This is not added by default. You need to add it manually as you added it in Step 4 in the preceding section.

ASP.NET Scaffolding

The ASP.NET Scaffolding is a code generation framework for ASP.NET Web Applications. We cannot use scaffolding in the previous version of Visual Studio except in ASP.NET MVC projects but using ONE ASP.NET we can use it for all projects. Have a look:

scaffolding image

NuGet 2.7

NuGet 2.7 is the new release of NuGet packages. We can use a rich set of new features that are defined in the Release Notes of NuGet 2.7. Have a look at the following procedure.

Step 1: Open "Extensions and Updates" from the Tools menu.

Step 2: Check out the latest NuGet Package for the Visual Studio. As you can see, the latest NuGet Package is installed on my Visual Studio IDE.

Razor 3

You can also get the benefit of the Razor 3 features, like highlighting and Intellisense, while creating the cshtml files in the ASP.NET Projects. Have a look at the following procedure to create the MVC 5 Razor pages.

Step 1: Right-click on the View folder to add a Razor page.

Step 2: Try out the Razor syntax as shown below:

Summary

You can get the benefits of the latest version of Visual Studio 2012 or Visual Studio 2012 Express. You can also use various features that are used in the Visual Studio 2013 with the release of Web Tools 2013.1 for the Visual Studio 2012. Thanks for reading.