CRUD Operations In ASP.NET Core 2 Razor Page With Dapper And Repository Pattern

This article will demonstrate how to perform CRUD operations in Razor Page which were introduced with Asp.Net Core 2 using Dapper and Repository Pattern.

To complete this demonstration in a simple manner, we will follow some steps as below.

Step 1

Create Razor Page in Asp.Net Core 2

Step 2

Create Database and Table

Step 3

Install Dapper

Step 4

Create Repository Class and Interface with Required Entity

Step 5

Create Connection String and get it on Repository Class

Step 6

Create Razor Page for CRUD Operations

Step 7

Implement Code in Razor Pages for performing CRUD Operations

Now we have defined six steps to complete this practical demonstration. So, let’s move to step by step and complete the task.

STEP 1: Create Razor Page in Asp.Net Core 2

To create Asp.Net Core 2 Razor Page project, open Visual Studio 2017 version 15.3 and above and make sure you have installed .Net Core SDK 2.0 with your system. If you don’t have this configuration with your system, please update your Visual Studio and system with these configurations.

I hope, you have installed latest version of Visual Studio with .Net Core SDK 2.0, so open Visual Studio and Go to File Menu > choose New > select Project. It will open “New Project” windows. From the New Project windows, you have to choose .Net Core from the left panel and then from the center panel choose “Asp.Net Core Web Application” and provide the suitable name like “RazorPagesExample” and click to OK.

After clicking OK button, it will pop up with new window from there we can choose the template for Razor Page.

From here, you have to choose “Web Application” to create Razor Page application and click to OK. It will take minutes or seconds to configure your project and finally we have project ready for demonstration.

STEP 2: Create Database and Table

Open SSMS [SQL Server Management Studio] and create new database name called it “TestDB” and inside that you have to create one table that is called “Product” using following SQL scripts. Now we have database and its corresponding table is ready.

STEP 3: Install Dapper

In one line, Dapper is micro ORM with high performance for SQL, MySQL etc.

It is simple step to install Dapper. Right click on the project and choose “Manage NuGet Packages”. It will open NuGet Package Manager from there you can search packages which need to be installed. So, now we will search “Dapper” and installed it. After installation, it will be shown inside the NuGet section which lies inside the “Dependencies” as follows in project.

STEP 4: Create Repository Class and Interface with Required Entity

In this demonstration, we will perform CRUD operations for Product. How to see product data, how to add new product, how to edit existing product and how to delete existing product after confirmation, so here we should have an entity which is related to Product.

Create a new folder inside the project name called “Entity” and add a new class “Product.cs” as follows which should have product’s id, name, model and price. You can use Data Annotation here for validating the properties while adding or editing the data for the product

Add one more folder and name called it “Repository” inside the main project folder and add one interface as “IProductRepository” which contains all required server side methods to perform CRUD operations

To implement the above interface “IProductRepository”, we have to create a repository class name called it “ProductRepository” as follows.

Above “ProductRepository” class has method available for CRUD operation like “Add”, “EditProduct”, “DeleteProudct”, “GetList” and “GetProduct”.

• Add: It uses for adding new product into database.
• EditProduct: It uses for editing existing product data.
• DeleteProduct: This method uses for deleting existing product data after confirmation.
• GetList: This gets all the available products data
• GetProduct: It gets the data for single Product.

These methods are internally making the call to database using Dapper.

STEP 5: Create Connection String and get it on Repository Class

Now we have to define our database connection string. As we know Asp.Net Core uses appsettings.json to define your app related to all configurations. So, we are going to add our connection string inside the appsettings.json file as follows

To get this connection string on Repository we have already made code with above repository using “GetConnection()” method that gives us “Connection String” as following code shown.

STEP 6: Create Razor Pages for CRUD Operations

Now it’s time to create Razor Pages for CRUD operations, so we will create three pages inside the Product folder as shown with below image.

Index.cshtml is responsible to show all product list with Edit and Delete buttons at the last column with corresponding data. Apart from that it will show one more button at the top of the table which uses to add new record as “Add New Product”.

Add.cshtml is responsible for adding new records along with validations if required data does not pass.

Edit.cshtml is responsible for editing the existing record with validations for required properties.

For deleting the data, it is already handled on Index.cshtml page using the corresponding “Delete” button, which deletes the record after user confirmation and refresh of the page;

STEP 7: Implement Code in Razor Pages for performing CRUD Operations

Before adding the actual code for the CRUD operations, you have to register your dependency class with Startup.cs as follows inside the ConfigurService method.

Now the time has come to write actual CRUD operation code, so add the following code with corresponding files which will handle the CRUD operations.

Index.cshtml File

This file will contain the code to display the list of products with corresponding button to delete and edit the data as well as one button to add new record.