Model First Approach in ASP.Net MVC 5

Introduction

As we know there are various approaches for the Entity Framework available with which we can connect with the database from the ASP.NET web application. There are generally three approaches available, given below:

• Code First Approach
• Database First Approach
• Model First Approach

In this article we will work with the Model First Approach using the Entity Framework 6 and using this approach we will connect with the database from the web application. We will create the ASP.NET web application using the MVC Project Template. I am using the Visual Studio 2013 and in this IDE, we use the MVC 5 Project Template to create the web application. I have created an application in which I used the Database First Approach to connect with the database.

Entity Framework 6 Overview

The Entity Framework 6.1 is the latest version of Entity Framework. We will work here in the version 6 of Entity Framework. The following are some features of Entity Framework 6:

• Async Query and Save
• Connection Resiliency
• Code Based Configuration
• Dependency Resolution
• Multiple Contexts per Database

You can get the full description of Entity Framework 6 from here.

I am using the Visual Studio 2013 to work with the Entity Framework 6. We can create the application using the Entity Framework 6 that targets .NET 4.0 or .NET 4.5. I am using .NET 4.5.1.

Getting Started

We will now create the MVC 5 application using the Model First Approach. Use the following procedure:

• Creating Web Application
• Adding Entity Data Model
• Working with Entity Data Model Designer
• Working with Controller and Views
• do CRUD Operations
• Working with Database

Creating Web Application

In this section, we will create the ASP.NET web application using the MVC Project Template. Follow the steps given below.

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

Step 2: Select the Web tab from the left pane and select the ASP.NET web application and specify the application as "MvcMovie"

Step 3: Select the MVC Project Template and click on OK.

Visual Studio automatically creates the MVC application and adds many files and folders to the project. You can check it out in the Solution Explorer.

Adding Entity Data Model

In this section, we will add the ADO.NET Entity Data Model to the application. We will create the empty model in here. Use the following procedure.

Step 1: In the Solution Explorer, right-click on the Models folder and click on ADO.NET Entity Data Model.

Step 2: Specify the model name.

Step 3: In the next Entity Data Model Wizard, select the Empty Model and click on "Finish".

Now you can see the Entity Data Model Designer.

Working with Entity Data Model Designer

In this section, we'll add the entity in the Entity Data Model Designer. We will proceed in this section using following two sections:

• Adding Entity Model
• Generate Database from Model

Adding Entity Model

In this section, we'll create the entity model using the following procedure.

Step 1: Right-click on the Data Model Designer and go to add new entity as shown below:

Step 2: In the next Add Entity wizard, specify the entity name.

Note: You can change the name of Entity Set that is generated automatically.

Step 3: Now you can see that the entity is created. So, it is time to add a scalar property to the entity. Right-click on the entity and go to add new scalar property.

Change the name of the property.

Step 4: Add more scalar properties to the entity.

Generate Database from Model

Now we have generated an entity model. You can also create more entity models in the Data Model Designer. We will now generate the database from the model. Use the following procedure.

Step 1: Right-click on the Data Model Designer surface and select the Generate Database from Model.

Step 2: Now in the Generate Database Wizard, click on New Connection to connect with the database.

Step 3: In the next Connection Properties wizard, specify the server name and the specify the database name.

Step 4: Now in the Generate Database Wizard, you can see that the connection is created. Click on the Next button.

Step 5: The database summary and script is generated and click on Finish.

Step 6: Now right-click on the script and click on Execute.

After executing the database will have been created. You can see your database in the Server Explorer.

Working with Controller and Views

In this section we will work with the controller and views in MVC 5. So far we have the done the work with the database. We wil now add the MVC 5 controller and view using the Entity Framework. So let's get started with the following procedure.

Step 1: Build the solution at first. When you build the solution then you can find the model class in the Models folder.

The Movie class is generated in the models folder. Edit the code with the following highlighted code:

//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated from a template.
//
//     Manual changes to this file may cause unexpected behavior in your application.
//     Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace MvcMovie.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;

    public partial class Movie
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Genre { get; set; }
        [Display(Name="Release Date")]
        [DataType(DataType.Date)]
        public System.DateTime ReleaseDate { get; set; }
    }
}

In the code above, I've added the Data Annotation in which I am changing the display name of the property and date property initialized.

Step 2: In the Solution Explorer, right-click on the Controller and go to Add and then New Scaffolded Item.

Step 3: In the Add Scaffold wizard, select the MVC 5 Controller using the Entity Framework with Views.

Step 4: In the Add Controller Wizard, specify the controller name, select the model class and select the Data Context class and then click Add.

When you click on Add, the MovieController class is generated in the Controllers folder and the Movie folder is generated in the Views folder. Have a look:

do CRUD Operations

In this section we will do the CRUD (Create, Read, Update and Delete) operations. So let's start the following procedure.

At first we will create an Action Link to our View. Go to the Views->Shared->_Layout.cshtml file and edit the code with the following highlighted code:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Best Movies", "Index", "Home", null, 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("Movies", "Index", "Movie")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My Movie Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

In the code above, we have created an action link and edited the app name and title.

Create

In this section, we will do the Create operation.

Step 1: Run the application and in the home page of the application click on Movies.

Step 2: In the next window, click on the Create New link to create the record.

Step 3: Add a record as shown below:

Add a few more records using the same procedure.

Read

Whenever you click on the Movies link, you can read the corresponding records.

Update

We can update the corresponding record using the following procedure.

Step 1: Click on the Edit link in that record.

Step 2: Edit the record and click on the Save button.

Delete

You can delete the record by clicking on the Delete link. Then you can see the windows as in the following:

Working with Database

The table and records are updated in the database. We can check out this using the Server Explorer. Use the following procedure.

Step 1: Open the Model in the Server Explorer.

Step 2: Expand the Tables folder and right-click on the table and click on the Show Table Data.

Step 3: The records will display on the screen.

That's it.

Summary

So far we have applied the Model First Approach of Entity Framework to connect with the database and using the MVC 5 web application we can do the CRUD Operations. Thanks for reading and Happy Coding!!