CRUD Operation With Razor Pages In ASP.NET Core 2.0

In this article, we are going to learn how to perform CRUD operations with Razor Pages in ASP.NET CORE 2.0. Before getting started let’s get a basic idea of what Razor pages are.

What are Razor pages?

Razor Pages is a new feature of ASP.NET Core MVC that makes coding page-focused scenarios easier and more productive.

Definition taken from here.

Where do we use Razor pages?

There are some pages in the application which are not too big where you are still required to create a controller and add action Method, along with that we need to add View.

In this part we can use Razor Pages which has code behind it . We just need to add a Razor Page and on view “Customer.cshtml” you can design your view and on the same page you can write code for handling requests such as get and Post, but if you think you want to separate it then you can use code behind “Customer.cshtml.cs”

Pre prerequisite for Razor Pages Application

1. Install .Net Core 2.0 SDK
   URL - https://www.microsoft.com/net/download/core
   
   
   
   
   

2. Install Visual Studio 2017 version 15.3 or later
   URL - https://www.visualstudio.com/downloads/

Visual Studio Community 2017

Free, fully-featured IDE for students, open-source and individual developers

Let’s start with the Create Razor Pages application.



Creating Razor page project

For creating a project just choose File Menu from Visual studio IDE then New, inside that, choose Project.

After choosing a project, a new dialog will pop up with the name “New Project”. In that, we are going to choose Visual C# Project Templates - Web - ASP.NET Core Web Application. Then, we are going to name the project as “RazorPagesDemo”.



After naming the project we are going click on OK button to create a project.

A new dialog will pop up for choosing templates for Creating “ASP.NET Core Web Application” in that template we are going to Create ASP.Net Core Razor Pages application. That's why we are going to choose “Web Application” and next we will have the option to choose framework 1.Net core or 2.Net Framework, and also ASP.NET Core Version. In that, we are going to choose “.Net Core” and “ASP.NET Core 2.0” as ASP.NET Core Version as click on OK button to create a project.



After clicking on OK button it will start to create a project.



Project Structure

You'll see some new project structure you in this project. There are no Model, View, Controller folders in this project.

You will only able to see Pages folder in this folder all Razor pages are stored.



One thing which is back again is a little code behind to make thinks little easier.


Yes Razor pages has Code behind.

In the first steps we are going to add a model folder and inside that folder we are going to add Customer Model.

Creating Model folder and Adding Customer Model in it

In this part, we are going to add a Model folder in “RazorPagesDemo” Project after adding folder next we are going to add Customer class (Model) in Models folder.

For details see below snapshot,



After adding Customer Model now next we are going to add a property to this class.

Adding Properties and DataAnnotations to Customer Model

In Razor pages, you can use the same DataAnnotations which are there in MVC.

After completing with adding model and DataAnnotations next we are going to add Razor page.

Adding Razor Page to project

For adding Razor page just right click on Pages folder then select Add - inside that select New Item.



After selecting New Item a new dialog will pop up with name “New item” in that we are going to select Razor Page Item and name it as “Customer.cshtml” and click on add button.



After clicking on add button below is Pages folder structure in this part you can see “Customer.cshtml” View with “Customer.cshtml.cs” code behind which will have all handlers’ part to handle the request.



Understanding “Customer.cshtml” View

This “Customer.cshtml” file looks more like a Razor View.

In Customer.cshtml view the first thing you are going to see is @page directive which tells Razor view engine that this page is Razor page, not MVC View and it makes a page to handle request directly without going to the controller.



Next, you can see @model is a CustomerModel is a code-behind class name.



The CustomModel file name is the same name as Razor page file “Customer.cshtml.cs” just “.cs” appended at last.

This CustomModel class inherits from PageModel which make this class to handle the request.

Next thing you can see in CustomModel is OnGet Method (handler) which handles get request.

Let’s start will simple example then we are going to start with CRUD operation.

Displaying Message

In this part, we have simply added a string with name WelcomeMessage and assigned value to it.

Next, on view, we are going to display a message in the following format.



Now Save Application and run.

And to access page just enter Page Name “Customer”.

URL - http://localhost:######/Customer

E.g. ####### (port number)

Wow, we have created our first razor page.



CRUD Operation with Razor Pages

The first thing we are going to do is Create Customer; for doing that we have added Customer Model in the Models folder.

Next, we are going to declare that model in CustomerModel class as below.

Code snippet of CustomerModel

After declaring this Customer model in CustomerModel class now Customer Model is accessible on Razor page file (Customer.cshtml)

Now let’s Design View.

Adding input Controls on Customer.cshtml View

In this part, we have used New MVC tag helper to create input fields and we have added all model properties on View.

Note

if you want to learn about details of New Tag Helpers visit this link.

https://blogs.msdn.microsoft.com/cdndevs/2015/08/06/a-complete-guide-to-the-mvc-6-tag-helpers/

Now save Application and run project.

And to access page just enter Page Name “Customer”.

URL - http://localhost:######/Customer

Eg. ####### (port number)

Snapshot of Customer page



After entering URL the first request goes to OnGet handler.

While Debugging



Note - Handlers

There are 2 default handlers in Razor pages

1. OnGet()
2. OnPost()

If you want you can create your own handlers you can create I will show in the upcoming example.

After completing with Designing Razor Page file (“Customer.cshtml”) now let’s add another handler to handle post request.

Adding OnPost Handler

In this part, we are going to add Post Handler to get all data which is filled by the user.



We have added OnPost handler but it is not filling data of model what we have posted.

While Debugging



For binding data, we need to add [BindProperty] attribute on the (Customer) property we declare in CustomerModel class.



If we try to Post model again then we are going to get model populated with values. Let’s save these values in the database.

Database Part

I have created a database with the name “CustomerDB” and in that, it has “CustomerTB” table.



First thing for saving data in Database we need an ORM we are going to use “Entity framework core”

Installing package for Entity framework core from NuGet

To install the package, just right click on the project (RazorPagesDemo) and then select Manage NuGet package. The below dialog of NuGet Package Manager will pop up.

In the browse tab, type “Microsoft.EntityFrameworkCore.SqlServer” in the search box and just click on Install button.

Microsoft.EntityFrameworkCore.SqlServer



Adding Connection string and Setting up DbContext

After adding a reference, now add a connection string in appsetting.json file.

Now, let’s add a class with the name DatabaseContext in Models folder.

For adding a model, just right click on Models folder. Then, select Add - Class. An "Add New Item" dialog will pop up with default class selected. Name the class as DatabaseContext and click on Add button



After adding a DatabaseContext class, next, we are going to inherit DbContext class.

After inheriting with DbContext, next we are creating a constructor which takes DbContextOptions as an input parameter and also inherits the base class constructor (: base(options)) [DbContext].

Code snippet of DatabaseContext class