Create, Retrieve, Update, and Delete [CRUD] are the basic operations in any application. Applications without any of these operations would be rare. With this article, we will implement CRUD Operations in ASP.NET Core MVC application with Entity Framework Core – Code First Approach. To demonstrate the topic we will build an application for storing and managing employee details.
GitHub repository for the demo project: https://goo.gl/E13H2R.
Create ASP.NET Core MVC Project
From Visual Studio, Go to File > New > Project( Ctrl + Shift + N). Then select ASP.NET Core Web Application.
In template wizard, Select Web Application(MVC) template. Make sure to select the latest ASP.NET Core Version from top dropdown. Uncheck HTTPS option, which is not required in the development environment.
Setup Database for EF Core
The database for the project will be created and managed through EF Core – Code First Approach. So first of all, we have to install corresponding NuGet Packages. Right-click on the project from solution explorer, select Manage NuGet Packages. From browse tab, search and install
Microsoft.EntityFrameworkCore and its dependent packages.
Now let’s define a model class for employee entity in
Models folder as
In Entity Framework, the actual physical entities in a database are created and managed from DBContext class. In our application,
EmployeeContext class does the job. To create a table corresponding to the employee model class, We’ve added
Employees property of the type
Inject DbContext Class with Dependency Injection.
In order to interact with database, we need an instance of the
DbContext class. We can do that with dependency injection. For the class constructor parameter
options, following informations are required.
- Database Provider – whether it is SQL Server or MySQL or PostgreSQL etc.
- DB Connection String
First of all, we will save the connection string in
appsettings.json file as follows.
Now let’s create the
DbContext instance by passing both DB connection string and DB provider using dependency injection from Asp.Net Core. For that, we just need to update
ConfigureServices method from
Startup class. Invoke
AddDbConext method from
services collection as follows.
How and when this dependency injection works? we’ll discuss that later, once we add an employee controller in this project.
Initiate DB Migration
So far we have been modeling our Database, Let’s create the actual DB. First of all open Package Manager Console.for that you can right-click the project from Solution Explorer then go to Tools > NuGet Package Manager > Package Manager Console. Inside the console execute the following commands one by one.
Add-Migration "InitialCreate" Update-Database
Now you should have the EmployeeDB(mentioned in connection string) created as per our employee model.
Create MVC Controller For CRUD Operations
Let’s create a new MVC controller
EmployeeController. Go to Controller > Add > Controller, then select ‘MVC Controller with views, using Entity Framework’ template. Select
EmployeeContext as Model and DbContext class respectively.
The created MVC controller will have all the action methods for all CRUD operations, even though I would like to simplify it as follows. Each of the action methods will be discussed later in this article.
Now a few words on ASP.NET Core dependency injection: As you know, an instance of MVC controller will be created once a request is made into it. But there is a constructor parameter
context of the type
EmployeeContext. How can we pass value for the parameter when the controller instance is created by the ASP.NET Core framework itself? There comes the importance of dependency injection, that we configured above in
Startup class, whenever a controller constructor needs an instance of
DbContext, the dependency injection passes an instance. So the rest of the action methods inside the controller can interact with the Database through the injected
Retrieve List of Records in an MVC View
Purpose of each action methods in
Index: Retrieve list of records from the employees table.
AddOrEdit: Handle both insert and update operation.
Delete: Remove an employee record with a given employee id.
All of the above action methods either manipulate the data or retrieve existing data from the database. Now we’ve to design the user interface with razor views for showing retrieved data or a form/ button to submit data to action methods. You could see such razor views in
Now let’s retrieve the list of employees using
Index action method.
List of records from employees table can easily be retrieved with
Employees as shown above. The collection of records is returned with the function
View. So there should be a razor view file
index.cshtml (same name as that of index action method) to render the collection of records. We’ve done that with help of an HTML table using a
New employee can be inserted with + button from last column header. The last column contains button for edit/ update and delete operation. Now the index view should look like this.
Did you see the navbar here? inside our razor view, we only said to show the HTML table, now where is this navbar coming from? It’s from our global layout view
Shared/_Layout.cshtml. Not only the navbar, the entire HTML declaration and surrounding body and head tag are defined inside this layout view. It will thereby default in any MVC project to enclose all of the views file. Stylesheet reference for Bootstrap and Font Awesome should be added to it. Most of the case Bootstrap will be there already, just add the Font Awesome stylesheet reference.
Add or Edit a Record
Normally by default there will be separate methods for insert and update operation. here in this project we’ve combined them into one. First of all, let’s define
POST methods for both insert and update operation with
AddOrEdit action method.
And here is our
AddOrEdit.cshtml view for the above
GET action method.
This view is returned from
AddOrEdit action method of the type
GET. The method returns a fresh instance of the employee model, if the
id parameter is
0. Else corresponding employee record with given
id is returned. Finally, the returned model is populated inside
AdddOrEdit.cshtml view. For an insert operation the form looks like this.
This formwill submited to
AddOrEdit Post action method. We’ve handled both operations within if-else block based on the value of
id parameter. We just need to call
Update method from
DbContext object, for insert and update operation respectively. After all, invoke the Entity Framework method
SaveChangesAsync. If the operation is successful we’ll be redirected to
Index action method to return the list of records with the latest modification.
Employee model, we defined
FullName property with
Required attribute, Which is means the property should contain a value before submitting the above form. Entity Framework Core Validation support many attributes like this. We’ve checked the validation status of the model within
GET action method
If there is any validation error, the same form is returned with the same model updated with validation error message.
Delete a Record
You could delete a record with delete button from index view, it will handle in
Delete action method.
Inside the method,
FindAsync retrieves the corresponding record with the given
employee variable, Finally invoke
Remove method from
Employees DbSet property. and don’t forget to call
SaveChangesAsync method which executes respective SQL Commands in back-end SQL Server Engine.
End of this discussion, The following discussion might help you to add more features in this application.
- Implement the above MVC CRUD operations using jQuery Ajax without reloading the entire application.
- User Registration and Login with ASP.NET Core Identity.
- Image Upload and Retrieve.
Video Tutorial on this Topic
Make sure to subscribe our YouTube Channel – CodAffection.