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:

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.

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

Step 3: Enter the Controller name as HomeController.

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.

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

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

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.

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

Step 3: Debug your application from HomeController.

Step 4: Click on "Welcome" to open the 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.

Step 2: Install an Entity Framework.

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

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:

<connectionStrings>

    <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.

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

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

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.

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".

Step 3: You can see the table records.

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.