How: ASP.NET MVC using Entity Framework(Database First Approach)

Entity framework is part of .NET Framework it generates necessary database command that execute connection with database without using the standard SQL queries.  To expand our understanding on how Entity Framework works. I created an ASP.NET MVC web application to share what I’ve learned. For beginners like me hopes this helps.

Image below is the table I created for this project. I name the database as Employee_Listing and for the table I name it as Table.  If this is your first time to create a database visit this thread Create Database using Visual Studio  for detailed instruction on how I created this database.

Entity Framework

Application Final UI Output:

Entity Framework

Final Output

Let’s Start:


1. I assume you have already created a project and added entity framework if not visit the link from the note above . Now add ADO.NET Entity Data Model. I prefer adding it to my Model folder. To add, right click on the Models folder, click Add and choose New Item.

Entity Framework

Add ADO.NET Entity Data Model

2. From Add New Item window select Data under Visual C# from the left pane and choose ADO.NET Entity Data Model from the middle pane. Then name your model. In my case I name it as Employee_Listing.

Entity Framework

Name Entity Model

3. In the next window select option Generate from Database and then click “Next”

Entity Framework

Generate from database

4. Create new connection by simply clicking New Connection button

Entity Framework

Create New Connection

5. Choose Data source for your database. In my case it is Microsoft SQL Server then click “Continue”.

Entity Framework

Choose SQL Server

6. In connection properties choose your Server name and select your Database name as shown below.

Entity Framework

Choose Server and Database Name

7. To test connection of your database click “Test Connection” button. Then press “OK”.

Entity Framework

Test Connection

8. Click “Next” to proceed.

Entity Framework

Entity Model Wizard

9. Choose Table you want to add to your project.

Entity Framework

Choose Table

10. If security warning pop-up select “OK”.

Entity Framework

Security Warning

11. Visual Studio will create edmx file with the Table model for your database.

Entity Framework

Project View

12. The image below is the full screenshot of my Models folder.

Entity Framework

Models folder

13. Table.cs is the class Model of the Table I added with ADO.NET Entity Data Model.

Entity Framework


Code inside Table.cs

  • This is our Entity Model class. I added [Required] attribute to every property declared from this model for Data Annotation to be used for model binding to our UI form inputs.

Let’s start with the coding part

We are going to use the default Controller for MVC Template which is HomeController. Located under HomeController folder and its default view located under Views->Home->index.cshtml.

Entity Framework

Solution Explorer

1. Create a view for your application. Open Index.cshtml file refer to highlighted text shown in the image above.


  • Create a form using html helper to bind our model.
  • @using MVC_Data_Entity.Models -> gain access to our Models folder
  • @model Table -> gain access to our actual Model class which is the class Table inside Table.cs.
  • <script src=”~/Scripts/jquery-1.10.2.min.js”></script> -> Add JQuery script.
  • Get_Data() -> JavaScript function use for transferring data to our view from our Controller
  • Delete(id) -> JavaScript function that call delete function in controller to delete specific data from our database
  • Edit(id) – > JavaScript function that call select function from our controller and fill form with the existing data.
  • table_data(data) -> This is a table design JavaScript function to be fill in our table without a whole page loading.
  • @Html.ValidationSummary -> Show validation error base on the [required] attribute we set in our Table Model.
  • @Html.ValidationMessageFor -> Show validation error for specific inputs.


2. Next open your HomeController. Let’s create and apply CRUD (Create, Read, Update and Delete) which is the basic function for most of the systems.



Function summary for HomeController

  • Index() – > Load default view
  • Index(Table model) -> received post request from our UI form.
  • GetData() -> Get all data from our table.
  • Select_data_for_edit(int id) – > Select specific data by id from our database table
  • Delete(int id) -> Delete data from table by id
  • Update()-> Update data entry from database table
  • Insert_data(Table model) -> Insert new entry to database table



3. Layout.cshtml

  • This file is located at Views ->Shared->Layout.cshtml.
  • This is where we can modify sites main menu.


Final Output:

Entity Framework

Final Output

This is a working application. Hopes this help!!

Thank you for reading!! Happy coding!!

Post you may like:

[pt_view id=”2384ae03it”]

Leave a Reply

Your email address will not be published. Required fields are marked *