Archive for category Razor Pages

Simple CRUD Application in Asp.Net Core Razor Pages


This article presents how to produce a simple application using Razor Pages in Asp.Net Core. This application will do the CRUD operation on a SQL Server database and then displays the details in a table.

You require to have Visual Studio 2017 Version 15.3 and .NET Core 2.0 installed in order to work with Razor Page Applications. You can get more details from here


Create a new Project in Visual Studio


And Select the Web Application Template for Razor Pages


Project Structure

If you take a look at the project structure you will notice the main difference in Razor Pages is that there is No Controller and Views folder. All files in Razor Pages are inside the “pages” folder. You can also create subfolders within the pages folder to keep the files organized.

Another important point to note is the @page directive on the RazorPages. @page directive will cause the file to handle the requests directly, without utilizing a controller.

Sample Application:

Now let’s start building a simpler application which performs CRUD operations on Employee database using Razor Pages. Below is a sample demonstration of the application we are going to make.


Model and Database

To load the information from database, we are using EntityFrameworkCore and its associated methods.  Make sure you install the EF Core nugget packages from here

In this example I have used the DatabaseFirstApporach.  DatabaseFirstApporach lets the EnityData Model to generate classes, dbcontext etc from the database automatically. All other functionalities like database and model sync exists as is.

Let’s create an entity class called “Employee” which matches the schema of the Employee Table in the database

Next we will add a DbContext class , which will act as a session between entity class and database.

Next we will provide the connection string for database in appsettings.json file

Finally we will register dbContext using dependency injection. Modify the startup.cs file and add the below code

Adding Views for Create, Edit, Update, Delete (CRUD)

Create View (CreatePage.cshtml)

On Create page we used 3 directives.

@page: Razor Pages mandates that “@page” directive should be the first directive on page.

@inject: Another directive you can find on page is @inject. @inject directive is used for dependency injection in to views. Using @inject we inject the dbContext to View, which will be used to for all db related operations.

@functions: In Razor page, we can add the function-level content code(C#) to view. We can also have the content in code behind CreatePage.cshtml.cs page.

Edit View

Next we will see the EditPage.  Most of the coding are similar to create page which we already seen earlier. However in this page, we need to pass the selected row id as route parameter

We used asp-route-{value} attribute from anchor tag helper to generate the Edit Link. At runtime the {value} field (in our example ‘id’) will be mapped to the route parameter value which will be used by Edit Page to retrieve the selected row value.

<a asp-page="/EditPage" asp-route-id="@item.EmployeeID">Edit</a>


All other pages have the similar code structure. The difference is only the operation performed on each pages. All codes have comments added which are select explanatory

Index View(Home Page)

Delete View


You can find complete code of this demo from here


, , , ,

1 Comment