Working With New MVC in Latest Visual Studio 2013

Introduction

Today we'll work with the new update release of Visual Studio 2013 CTP2 Update 2. As you know, there are various new features in this release and one of them is the new MVC 5.1.1. You can also get this information and update the Visual Studio 2013 by referring to my previous Starting with Visual Studio 2013 Update.

We'll develop the ASP.NET web application with which we'll use the following features:

• MVC 5.1.1
• New ASP.NET Scaffolding
• Enum Support
• Application Execution

Prerequisites

Please ensure that the version of Visual Studio you are using is Visual Studio 2013 (with the latest updates). If it is not updated then refer to the link to update it.

So, let's start to develop the application using the following procedure.

Creating ASP.NET MVC Application

In this section, we'll create the web application using the following procedure.

Step 1: Open the Visual Studio 2013 and click on "New Project".

Step 2: In the next wizard, under the Web node, select "ASP.NET Web Application" and enter the name for the application.

Step 3: Choose the MVC Project Template and uncheck the Create Remote Resources under Windows Azure.

Now, Visual Studio automatically creates the application based on the MVC 5 project template.

New ASP.NET Scaffolding

To work with the new ASP.NET Scaffolding, we'll create the application with Entity Framework. To perform this use the following procedure.

Step 1: Add a class in the Models folder, in the Solution Explorer.

Step 2: Replace the code with the following code:

using System.ComponentModel.DataAnnotations;

using System.Data.Entity;

 

namespace NewMvcSample.Models

{

    public enum Grade

    {

        A,B,C,D

    }

    public class Cricketer

    {

        public int ID { get; set; }

        [Required]

        [Display (Name="Cricketer Name"), StringLength(20)]

        public string Name { get; set; }

        [Required]

        [Display(Name = "Cricketer Full Name"), StringLength(50)]

        public string FullName { get; set; }

        [Required]

        [Display(Name = "Cricketer Team"), StringLength(15)]

        public string Team { get; set; }

        [Required]

        [Display(Name = "Cricketer Grade")]

        public Grade Grade { get; set; }

    }

 

    public class CricketerDbContext : DbContext

    {

        public DbSet<Cricketer> Cricketers { get; set; }

    }

}

As you can see in the code above, the DataAnnotations are applied to some properties. An enum type Grade is also defined so that the grade of Cricketer is to be determined by the user. A CricketerDbContext class is also defined that is inherited by the DbContext class in which a DbSet type property is also defined.

Step 3: Now right-click on the Controllers folder to add a New Scaffolded item.

Step 4: In the Add Controller wizard, the controller name is dependent on the selection of the Model class. When you select the Model Class, the Controller name appears automatically based upon the Model class. Select the Context class also.

This is only possible in this New ASP.NET Scaffolding.

Enum Support

In this section we'll see that the Enum support is also available on the View. Please refer to Getting Started to Enum Support in which you can see that the Enum support is not available automatically in the View. You need to enable it by editing the view. When scaffolding here, you can now notice that the Enum support is also available for the View.

Have a look at the following screenshot, in which you can see that the @Html.EnumDropDownListFor() is available already. You do not need to change the view.

Application Execution

Step 1: The application is now created successfully and if you want to run the controller from the home page then edit the Views\Shared\_Layout.cshtml page code with the following highlighted code:

@Html.ActionLink("My Cricketer App", "Index", "Home",

 new { area = "" }, new { @class = "navbar-brand" })

</div>

<div class="navbar-collapse collapse">

    <ul class="nav navbar-nav">

        <li>@Html.ActionLink("Home", "Index", "Home")</li>

        <li>@Html.ActionLink("About", "About", "Home")</li>

        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

        <li>@Html.ActionLink("Cricketer", "Index", "Cricketers")</li>

    </ul>

    @Html.Partial("_LoginPartial")

</div>

And now run the application and click on the controller:

Step 2: When creating New Cricketer, you can see that the Grade contains the dropdownlist.

That's it.

Summary

This article described the latest features revealed in the Visual Studio 2013 Update 2 and how to work with these features in the ASP.NET web application. Thanks for reading and stay updated.