Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Code-First Approach With ASP.NET MVC Framework

DZone's Guide to

Code-First Approach With ASP.NET MVC Framework

We create a simple application that uses the Entity Framework and a SQL Server to perform CRUD operations with a Code First approach.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Introduction

In this article, we’ll learn how to perform CRUD operations with a code first approach in an MVC application. Here, we will create an MVC structure that will help to change in the Model Class and that change will update it in the database. Microsoft’s Entity Framework (EF) avoids working directly with the database and creates the database per the model classes' requirements. We will not use visual model designer (EDMX) completely but will create POCO classes first and then create the database from these POCO classes.

Recommended Prerequisites

  • Visual Studio 2010 SP1
  • ASP.NET MVC
  • SQL Server

Step 1

Open Visual Studio and select “File” >> "New". Then click on Project (remember, don't go with the option 'File->New->Website').

ASP.NET

Step 2

Select “Templates” >> Visual C# >> Web, then ASP.NET Web Application (.NET Framework), and give it an appropriate project name.

  • And click the “OK” button. 

ASP.NET

Step 3

And here is your default screen.

ASP.NET

Here, we will create the basic structure which looks professional and easy to use.

  1. Code-First-Demo - It contains Web UIs, like our Controller, Views, JS, custom models, etc.
  2. Code-First-Demo.Repository - It contains our migration files (whatever file we have generated in the application, it will be added to this project).
  3. Code-First-Demo.Model - It contains our model classes (whatever classes/models we have generated in the application, they will be added to this project).

Step 4

Right click on Solution >> Add >> New Project.

ASP.NET

Now, we will add our Code-First-Demo.Repository class library, which contains our migration files.  

ASP.NET

After adding the project, delete the default class named Class1.cs.

Step 5

Right-click on Code-First-Demo.Repository >> Add, and add a new class.

ASP.NET

Step 6

Click on class and give it an appropriate name. Here, I’ll set the name to 'CDBContext.'

ASP.NET

Step 7

Now, add a reference to EntityFramework, add the namespace "using System.Data.Entity," set the access specifier to public, and extend from DbContext.

using System;  
using System.Collections.Generic;  
using System.Data.Entity;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;  

namespace Code_First_Demo.Repository  
{  
    public class CDBContext : DbContext  
    {  
    }  
}  

 Now, add your connection string in the Web.config file of the main (Code-First-Demo) project.

<connectionStrings>  
  <add name="StringDBContext" connectionString="Server=FAISAL-PATHAN\SQLEXPRESS;Initial Catalog=DemoDB;Persist Security Info=False;User ID=sa;Password=***;MultipleActiveResultSets=True;Encrypt=False;TrustServerCertificate=False;Connection Timeout=30;" providerName="System.Data.SqlClient" />  
</connectionStrings>  

ASP.NETStep 8

Create a constructor, extend it from the base class, and pass it in.

ASP.NET

Step 9

Right click on Solution, and add a new project.

ASP.NET

Now, we will add our Code-First-Demo.Model class library, which contains all our classes.

ASP.NETAfter this, delete the default class named Class1.cs.

Now, we must add a Code-First-Demo.Model class library reference to Code-First-Demo.Repository class library in order to access and generate a table in our SQL Server. 

Step 10

Add a Code-First-Demo.Model class library reference to Code-First-Demo.Repository class library. Right-click on Code-First-Demo.Repository, Select Add > Reference.

ASP.NET

 Now, select Code-First-Demo.Model and click OK.

ASP.NET In Code-First-Demo.Repository class library, you can see a Code-First-Demo.Model reference.

Step 11

Now, we are adding our class to Code-First-Demo.Model to create our SQL table.

ASP.NET

Step 12

Add properties to the class as per the columns you want in the table.

  1. Add reference System.ComponentModel.DataAnnotations.dll to Code_First_Demo.Models.
  2. Set the Key attribute to your primary key.
    1. The Key attribute can be applied to a property in an entity class to make it a key property and the corresponding column to a PrimaryKey column in the database.
  3. Add a namespace using System.ComponentModel.DataAnnotations.

ASP.NET

MyFirstTable.cs class

using System;  
using System.Collections.Generic;  
using System.ComponentModel.DataAnnotations;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;  

namespace Code_First_Demo.Models  
{  
    public class MyFirstTable  
    {  
        [Key]  
        public int ID { get; set; }  
        public string Name { get; set; }  
        public int Age { get; set; }  
    }  
}  

Step 13 - Add DbSet Properties

Add a namespace using Code_First_Demo.Models.

ASP.NET CDBContext.cs 

using Code_First_Demo.Models;  
using System;  
using System.Collections.Generic;  
using System.Data.Entity;  
using System.Linq;  
using System.Text;  
using System.Threading.Tasks;  

namespace Code_First_Demo.Repository  
{  
    public class CDBContext : DbContext  
    {  
        public CDBContext() : base("StringDBContext")  
        {  
        }  
        public DbSet<MyFirstTable> MyFirstTable { get; set; }  
    }  
}  

Step 14

Now, open the package manager console to fire the commands.

ASP.NETEnable-Migrations

Enables Code First Migrations in the project.

Syntax

  1. Enable-Migrations [-ContextTypeName <String>][-EnableAutomaticMigrations][-MigrationsDirectory <String>]  
  2. [-ProjectName <String>][-StartUpProjectName <String>][-ContextProjectName <String>][-ConnectionStringName <String>]  
  3. [-Force][-ContextAssemblyName <String>][-AppDomainBaseDirectory <String>][<CommonParameters>]  
  4. Enable-Migrations [-ContextTypeName <String>][-EnableAutomaticMigrations][-MigrationsDirectory <String>]  
  5. [-ProjectName <String>][-StartUpProjectName <String>][-ContextProjectName <String>] -ConnectionString <String>   
  6. -ConnectionProviderName <String> [-Force][-ContextAssemblyName <String>][-AppDomainBaseDirectory <String>]  
  7. [<CommonParameters>]   

Add-Migration

Scaffold a migration script for any pending model changes.

Syntax

  1. Add-Migration [-Name] <String> [-Force][-ProjectName <String>][-StartUpProjectName <String>]  
  2. [-ConfigurationTypeName <String>][-ConnectionStringName <String>][-IgnoreChanges]  
  3. [-AppDomainBaseDirectory <String>][<CommonParameters>]  
  4. Add-Migration [-Name] <String> [-Force][-ProjectName <String>][-StartUpProjectName <String>]  
  5. [-ConfigurationTypeName <String>] -ConnectionString <String> -ConnectionProviderName <String>   
  6. [-IgnoreChanges][-AppDomainBaseDirectory <String>][<CommonParameters>]  

Update-Database

Apply any pending migrations to the database.

Syntax

  1. Update-Database [-SourceMigration <String>][-TargetMigration <String>][-Script][-Force][-ProjectName <String>]  
  2. [-StartUpProjectName <String>][-ConfigurationTypeName <String>][-ConnectionStringName <String>][-AppDomainBaseDirectory <String>]  
  3. [<CommonParameters>]  
  4. Update-Database [-SourceMigration <String>][-TargetMigration <String>][-Script][-Force][-ProjectName <String>]  
  5. [-StartUpProjectName <String>][-ConfigurationTypeName <String>] -ConnectionString <String> -ConnectionProviderName <String>   
  6. [-AppDomainBaseDirectory <String>][<CommonParameters>]  

Type/select the below commands and press enter:

Install-Package EntityFramework

This will add EntiryFramwork related packages.

ASP.NET

Enable-Migrations 

ASP.NET

Add-Migration MyMigration 

Note: You can put any migration name you choose.

ASP.NET

This command will create your migration file based on model's properties.

Update-Database

Note: This command will Create/modify your database when a connection string is mentioned in the web.config file.

ASP.NET 

ASP.NET

Step 15

Now rebuild the solution and perform the below action to perform CRUD operations.

Add a reference to both the class library projects to the main web project. 

ASP.NET 

ASP.NET

Step 16

Now add a new controller for CRUD operations.

Right click on controllers, Add and Controller...

ASP.NET Select "MVC 5 controller with views, using entity framework," and click on the Add button.

ASP.NET

  • Select your model and context class and set the Controller name (don't remove the Controller suffix).

  • Click on the Add button to create a controller and its views.

ASP.NET 

ASP.NET

Here we did the Code-First approach in MVC application in an easy way.

Output

Create Page

ASP.NET


Display Page (List of Users)

ASP.NET 

Edit Page 

ASP.NET 


Delete Page

ASP.NET

Summary

Here, we created a simple application that uses the Entity Framework and a SQL Server to perform CRUD operations with a Code First approach. In the following article, we will see how to do basic CRUD operations. You can leave feedback/comments/questions to this article. Please let me know how you like and understand this article and how I could improve it. 

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
mvc framework ,code-first ,c# ,web dev ,asp.net mvc

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}