The Cloud Power

AZURE & .NET USER GROUP

Code First Approach in MVC 5

January 16, 2017 ASP.NET 0

Sharing is caring!

Today we are going to learn about Code First Approach in MVC. Basically I am used to with DB First Approach. It is obivious that both Code-First Approach and DB First Approach are userful in their own context. But I would like to summarize the basic usage of these as per my working experience.

  • When to use DB-First Approach?

When you have to work in a project where DB is ydalrea created.

You don’t have to alter DB Columns, Stored Procedures and Views.

When you project is small and don’t have to be very much modular.

When you don’t want to feel headache writing simple classes because DB-First Approach in Entity will write all Codes for class.

 

When to use Code- First?

When you have to make your application from scratch.

When you don’t have a ready made database.

You have to play with database frequently, like creating and deleting tables, views and stored procedure.

When you have too many tables, view and stored Procedures in database.

 

What we will learn today?

  1. Creating a blank database.
  2. Creating a MVC Project (UI)
  3. Creating a Class Library Project (DAL)
  4. Code First Approach implementation.
  5. Migration in MVC
  6. Creating CRUD Operation.

Creating Blank Database

Step 1 : Open SQL Server

Step 2 : Connect to Database Server

SQL Server Login Panel

Step 3 : Right Click on Database to Create New Database

New Database

You will be able to see your newly created database on Server.

 

Creating a MVC Project.

Step 1 : Open Visual Studio.

Step 2 : Go to File => New Project.

  1. Select Visual C# => Web => ASP.NET Web Application.
  2. Name your Solution (eg. EasyCRM) and Project (EasyCRM.UI) and then click OK
  3. Select MVC
  4. Change Authentication to Individual Accounts
  5. Add New MVC Project

Now you will see following screen.

MVC Project

 

Creating a class Library Project (DAL)

Step 1 : Right Click on Solution Explorer to add new Project

Add New Project

Step 2 : Select Visual C# => Windows => Class Library

Add Class Library

 

Adding Entity Framework to DAL Project.

Step 1 : Right Click on DAL Project and select Manage Nuget Package.

Manage Nuget Package

Step 2 : Browse Entity Framework and Install.

Install EntityFramework in Project

 

Code First Approach

Now add 3 Folders to UI Project named as

  1. DataConnection
  2. Entity
  3. Identity

 

Creating Entity for Customer

  • Step 1 : Add  a new Folder inside Entity named as Customer
  • Step 2 :Add  New Class called Customer_PersonalDetail.cs
  • Step 3 : Add Following codes inside the class.

  •  
  • Step 4 :Add new Class called Users under Entity Folder
  • The new class file should look as

 

 

 

Step 3 : Add New Class in DataConnection Folder named as DataContext.cs

Don’t forget to make this class public

Add Following References

  • using EasyCRM.DAL.Entity;
  • using EasyCRM.DAL.Entity.Customer;
  • using EasyCRM.DAL.DataConnection;
  • using Microsoft.AspNet.Identity.EntityFramework;
  • using System.Data.Entity;

 

Now write codes as similar way

 

Referencing DAL Project to UI Project.

Step 1 : Right Click on References of UI Project to add references.

 

Add Reference DAL Project

Enabling Migrations

Step 1 : Go to Tools => Package Manager =>Manage Nuget Package for Solution

Manage Nuget Package for Solution

Step 2 :

Once the migration is finished you will see a Migrations Folder with two files as below

Migrations

 

 

Now go to Database to browse tables. You will be able to see following tables as in figure.

Database after Migration

Till now we have created tables using Code First Approach, Now we will create CRUD Operation for Customer_PersonalDetail

 

Adding Controller

Step 1 : Right Click on Controller of UI Project to add new Controller

Add New Controller

Step 2 : Select MVC 5 Controller with views, using Entity Framework.

MVC 5 Controller

Step 3 : Now Select Model Class, Data Context Class and Layout Page.

Add Controller

Now You will see a Controller named Customer added in Controller Folder and views created on Views => Customer Folder as in figure :

Scafollding

Managing Layout Page :

As I have been using AdminLTE Theme for my admin Panel, I wiil use the same theme here.

Please review Adding AdminLTE Theme on MVC 5 to learn working with Themes in MVC .

 

Now I will add two links one to Add New Customer and next to List Customer

Step 1 :  Open _LayoutAdminPanel.cshtml as in figure

Adding Link to Layout Page

 

Managing Server Connection String

Now we need to modify Server Connection String in web.config of UI Project

Step 1 : Go to View => Server Explorer

Step 2 : Now Connect to database as below.

Connect to Database

 

Step 3 : Right Click on Connected server and select Properties to retrieve Connection String as in figure.

Server Connection String

Step 4 : Open web.config as in Figure and Replace the old connection string with new connection string as in figure

 

Server Connection String in Webconfig

Execute Application

Now rebuild Solution (Ctrl+Shift+B) and run Application. You will be able to see following screen

EascyCRM Dashboard

Now Click Add New Customer to add new Customer. Note we are adding new customer with Code First Approach here.

Once you navigate to Add New Customer Link you will see following type of form. Add Detail to form and save.

Add New Customer Form

You will be able to see data saved on Database.

List all Customer

 

Conclusion:

In this way we can implement Code-First Approach in MVC 5 Application.

 

 

Leave a Reply

Skip to toolbar