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:

       Note:

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

Table.cs

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.

Index.cshtml

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

Code:

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.

 

HomeController.cs

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

Code:

 

3. Layout.cshtml

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

Code:

Final Output:

Entity Framework

Final Output

This is a working application. Hopes this help!!

Thank you for reading!! Happy coding!!


Post you may like:

How to create custom 404 error handler in ASP.NET MVC

Custom 404 error handler - 404 Error refer to a not found resource/URL . Here’s how a default 404 Error ...
Read More

AngularJS CRUD Operation using ASP.NET MVC

I am a .NET Developer and I’m new in AngularJS. I started using AngularJS in about a week ago and ...
Read More
SignalR Chat App With ASP.NET

SignalR Chat Application with ASP.NET MVC

SignalR Chat App With ASP.NET - This article will show you an actual application using SignalR in ASP.NET MVC. The ...
Read More
AgularJS

Submit Forms using AgularJS with ASP.NET MVC

Ways on how to submit forms using AngularJS: I’m new to AngularJS and I was trying to create a CRUD application ...
Read More
Self Signed Certificate

How: Creating Self Signed Certificate

As defined in sslshopper.com. A self-signed certificate is a certificate that is signed by the person creating it rather than a trusted ...
Read More
AngularJS

AngularJS with Asp.Net MVC

What is Angular? AngularJS is a JavaScript framework that extends HTML attribute to help develop a dynamic Web application. AngularJS ...
Read More

Importing Excel with ASP.NET MVC

Importing excel, In my previous article, I demonstrated how to perform simple way of downloading data into excels. Now, this ...
Read More

Export Data to Excel with ASP.NET MVC

In creating a system there are times that we need to export data to excel, it could either be for ...
Read More

Easy Steps to Implement Partial View in Asp.Net MVC

One of the best ways to implement a dynamic table without loading the whole page is by using Jquery Ajax ...
Read More

Creating ASP.NET Web Service

ASP.NET Web Service - Web service is a software that is used to exchange XML-based information that uses the internet ...
Read More

Leave a Reply

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