Working With MVC 5 in Visual Studio 2012

Introduction

Today, I am creating an ASP.NET Web Application using the MVC 5 Project Template in Visual Studio 2012. Surprised? Well, I think you don't know that Microsoft revealed the ASP.NET and Web Tools 2013.1 version for the Visual Studio 2012. I have also described this update in New Web Tools for Visual Studio. As I said, we will describe the MVC 5 template later, so here I am creating the MVC 5 application in Visual Studio 2012.

The selection of a MVC 5 project creates an Empty Project in Visual Studio 2012. We need to create an entire application. We can view some folders in the application solution like Models, Controllers, Views, App_Start and so on as shown in the following screenshot:

Empty Project in Solution Explorer

Prerequisites

Visual Studio 2012 (updated with Web Tools 2013.1)

Note: Please note that you must have updated your Visual Studio 2012, otherwise you cannot work on a MVC 5 project in Visual Studio 2012. Read the Full Information.

We will now create our Home Page to display the Application Home Page and then we'll perform the CRUD Operations. So, proceed with the following sections:

Getting Started with Empty Application
Perform CRUD Operations
Database Connection

Getting Started with Empty Application

Use the following procedure to create a sample of your empty application.

Working with Controller

Step 1: At first we need to add a Controller. Just right-click on your Controllers folder to add one.

Adding Controller

Step 2: Select the MVC 5 Empty Controller in the next wizard.

Adding MVC 5 Empty Controller

Step 3: Enter the Controller name as HomeController.

Controller Name

Step 4: Modify your code with the following code:

using System.Web.Mvc;

namespace MvcCricketer.Controllers

{

public class HomeController : Controller

{

// GET: /Home/

public ActionResult Index()

{

return View();

}

public ActionResult Welcome()

{

ViewBag.Message = "Your Welcome Page";

return View();

}

Step 5: Build your solution.

After scaffolding the HomeController, by default Index() is created. I have added one more method, in other words Welcome() to this controller.

Working with View

As you saw, we have created the Controllers, so now we'll create a View for our Controller using the following procedure.

Step 1: Create a new Home folder in the Views folder.

Step 2: Right-click on the "Home" folder to add a View.

Creating View

Step 3: Enter the View name as "Index".

Adding View

Step 4: Create some content to be shown in your home page. You can see my screenshot of "Index.cshtml".

Index Page

Step 5: Create a "Welcome.cshtml" page in the "Home" folder and you can replace your code with the following code:

ViewBag.Title = "Welcome";

}

<h2>Welcome</h2>

<p>Welcome to Visual Studio 2012 that is upgraded by ASP.NET Web Tools 2013.1</p>

Working with View Layout

Use the following procedure to create your home page layout:

Step 1: Open the _Layout.cshtml file.

View Page Layout

Step 2: Modify your code with the code below in the screenshot:

Page Layout

Step 3: Debug your application from HomeController.

Home Page

Step 4: Click on "Welcome" to open the Welcome Page.

Welcome Page

Perform CRUD Operations

Now, as we saw that our empty project has a new controller and view to display the page using a page layout. In this section we will perform Create, Read, Update and Delete (CRUD) operations to the records we saved in our application. So, proceed with the following sections.

Creating Model

At first we need to create a Model in our application using following steps:

Step 1: Add an Entity Framework reference to your project.

Adding Reference

Step 2: Install an Entity Framework.

Adding Entity Framework

Step 3: Add a class as Cricketer by right-clicking on the Models folder.

Adding Class in Model

Step 4: Replace the boilerplate code with the following code:

using System.Data.Entity;

namespace MvcCricketer.Models

{

public class Cricketer

{

public int ID { get; set; }

public string Name { get; set; }

public int ODI { get; set; }

public int Test { get; set; }

public string Grade { get; set; }

}

public class CricketerDbContext : DbContext

{

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

}

Step 5: Build the solution.

Database Connectivity

We need to set our context named "CricketerDbContext" with the database. So, open the Web.Config file and paste in the following code:

<add name="CricketerDbContext"

connectionString="Data Source=(LocalDb)\v11.0;
AttachDbFilename=|DataDirectory|\MyCricketers.mdf;
Integrated Security=true"

providerName="System.Data.SqlClient"/>

</connectionStrings>

webconfig image

Connectivity with Controller

You have successfully created your model, now we need to connect the model with the controller using the following procedure.

Step 1: Right-click on "Controllers" and add a new Scaffolded item.

Add Scaffolded Item in Controller

Step 2: Select the MVC 5 Controller with the Views option.

Adding Controller with Entity Framework

Step 3: Enter the controller name as "CricketerController" then select the model and data context class,

Adding Scaffold in Controller

Visual Studio automatically scaffolds your CricketerController and creates the view also. Check out the Solution Explorer for the Cricketer folder newly created in the Views folder.

View & Controller in MVC

Step 3: Modify the page links in your home page from the "Page_Layout" file with the following code:

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

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

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

I added a Cricketer link in my home page.

Working with CRUD Operation on the application

We now have the Model, View and Controller. We are prepared to run our application.

Create
Step 1: Debug the application and click on the "Cricketers" link. It will open the page and you can create new records. Click on the "Create New" link as shown below:

Step 2: Enter the records

Enter more records in your application.
Read
In this section you will read the record.

Step 1: Click on the "Details" link on the record.

Step 2: Show the details and click on "Back to the List".
Update

In this section you will update the record.

Step 1: Click on the "Edit" link on the record that is to be updated.

Step 2: Update the record and save it.
Delete

In this section we will delete the records.

Step 1: Click on the "Delete" link to delete the record.

Step 2: The final step to delete any record.

Database Connection

We can also check out the records in our application using the Server Explorer.

Step 1: Check out the data context in the Server Explorer.

Step 2: In your table, right-click and click "Show table data".

View Table Data from Server Explorer

Step 3: You can see the table records.

Table Records in Data Connection

Summary

This article will help you to create an empty project and create a model, view and controller. It will also help you to perform CRUD operations with MVC 5 in Visual Studio 2012. Thanks for reading.