Tech Talk Hub

Design, Build High Performance Applications

Your first ASP.NET Core application with Razor Pages

With release of .NET Core 2.0, Microsoft has added new feature Razor Pages. As per release ASP.NET Core Razor Pages is a page-focused framework for building dynamic, data-driven web sites with clean separation of concerns and supports cross platform development and can be deployed to Windows, Unix and Mac operating systems. One of those is the addition of a new web framework for creating a “page” without the full complexity of ASP.NET MVC. New Razor Pages are a slimmer version of the MVC framework and in some ways an evolution of the old “.aspx” WebForms.

Not only Razor Pages reduced complexity but is lightweight and very flexible. It provides the developer with full control over rendered HTML. The framework is built on top of ASP.NET Core MVC, and is enabled by default when MVC is enabled in a .NET Core application. Razor Pages is the recommended framework for cross-platform server-side HTML generation on .NET Core. You do not need to have any knowledge or understanding of MVC to work with Razor Pages.

On the other hand if we talk about advantages of Razor Pages is that it is straightforward to set up and get going. You create a new empty project, you add Pages folder, you add the Page, and you just write code and markup inside of your .cshtml file same way we have ASP.NET web forms. Excellent for newcomers and an easy and fast way to learn about ASP.NET Core!

In this article, we are going to cover some of the finer points of using ASP.NET Razor Pages with sample application.

Why to choose Razor Pages over MVC?

If you want to build few simple pages with MVC, you have controller actions in separate place, HTML for view in separate place, ViewModel in a different location, routes in separate place, and that just seems like too much.

With Razor Pages, you have this one Razor file (.cshtml), and the code for a single page lives inside of that file, and that file also represents the URL structure of the app (more about this later). Therefore, you got everything inside of one file, and it just works.

However, you CAN separate your code to the code behind file with .cshtml.cs extension. You would usually have your view model and handlers (like action methods in MVC) in that file and handle the logic there. Of course, you could also have your view model moved to separate place.

So, let us not waste more time and start with sample Razor Pages application where we will try to do CRUD operations like Create, Read(List),Update and Delete on InMemory database with Entity Framework Core.

Creating Razor Pages app

With VS 2019 and .NET Core 3 SDK installed if we follow the old standard path in Visual Studio: File -> New Project -> Web -> ASP.NET Core Web Application we will get the following screen:

After VS creates a new project we get the following structure inside of our project:


Next, we are going to add Entity framework Core via nuget package.

Install-Package Microsoft.EntityFrameworkCore

Now we will add context class by deriving DbContext which can be used to below operations for us:-

  1. Manage database connection
  2. Configure model & relationship
  3. Querying database
  4. Saving data to the database
  5. Configure change tracking
  6. Caching
  7. Transaction management

The startup class for the applicationStartup.cs

Startup class is where we configure the components of the application.

We build services as our app grows. We need to add these classes in the DI Container. Also, we may need to set up and fine-tune the request pipeline. Startup class is where we do this.

The startup has two primary functions.

Configure the services for dependency injection.
It configures the request pipeline which handles all requests made to the application.
The following is an example of a startup class.

Model binding

Model binding that we know from MVC also works with Razor Pages. Just like Action Methods in MVC Controllers, we have Handlers in Razor Pages code.

Consider the Index page with the following form inside of cshtml:

And the IndexModel class that lives inside of Index.cshtml.cs file:

Handlers

We use handlers as methods to deal with HTTP requests (GET, POST, PUT, DELETE..). For example, we could have following methods:

  • OnGet / OnGetAsync
  • OnPost / OnPostAsync
  • OnDelete / OnDeleteAsync

These will be automatically picked up by ASP.NET Core based on the type of HTTP request.

Summary

So, we are ready with our application built with Razor pages as shown in below screen.

Sample ASP.NET Core Razor Pages Application

I really like Razor Pages and can definitely see using them in an ASP.NET Core project I am working on. I like the idea of Razor Pages being the true pages in my application. I’m sure there are also other use cases that Razor Pages don’t work for. The good news is MVC is super flexible, but that is what also makes it more complex. The true beauty of Razor Pages is their simplicity.

Code is available on Github – SampleRazorApp, you can clone and try around it and also share your experience with ASP.NET Core.

masoodwasim

Leave a Reply

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

Back to top
www.000webhost.com