Razor Pages
Microsoft recently announced the release of .NET Standard 2.0 and .NET Core 2.0. ASP.NET Core MVC and Entity Framework Core have seen quite a few changes and features in this release.
One of these features in particular is called Razor Pages, which is a more page-focused alternative to the traditational MVC approach. Razor Pages are geared more towards an MVVM approach, and incorporate all the basic functionality that we’re accustomed to in MVC like model binding, model state validation, and helpers, but it makes all of this functionality easier and more seamless. As a result, many pages can be created quickly and simply using this model.
Todo app
Razor Pages consist of the view which is a Razor cshtml file, a PageModel class which acts as the view model and code behind, and your models which your page will ultimately use. When this news was announced, I was excited to learn how to use these new features, so I set out to create a simple app that I could learn from. For the app, we’ll be using the TodoMVC template. The todo items will be accessed with Entity Framework Core using an in memory provider. The final result should look something like this.

Getting started
In Visual Studio 2017 version 15.3, you’ll notice that several new project templates have been added for an ASP.NET Core 2.0 web application. You’ll also see that the default web application template now uses Razor Pages, while the traditional MVC approach is labeled as (Model-View-Controller). It’s important to note that both of these approaches can live side by side in your application, and that Razor Pages is built right into MVC.

For the sake of learning everything from scratch, we’ll use the empty project template and learn all the steps that are needed to get our Razor Pages project up and running. So let’s create a new project using the empty project template and call it Todo.
Package management
Next, let’s take a look at the NuGet packages for our solution. You’ll notice that there are only two NuGet packages being referenced in our project. With the release of .NET Core 2.0 came some new meta packages which declare dependencies on all the common frameworks you’ll typically use, which automatically install those dependent packages. This dramatically reduces the number of packages you have to manage. We won’t be adding any additional NuGet packages because the ones we need are already included in Microsoft.AspNetCore.All.

We’ll need to add a package.json file so we can download the resources needed for our todo application. TodoMVC provides two npm packages for getting started with their template, and we’ll also make use of jQuery.\
Models and data
We also know that we’ll need a model to store our todo items and a way to persist them. Let’s start by creating a simple class that represents a todo item.
Then we can take it a step further and create our database context class.
Adding Razor Pages
Now let’s focus on the code we need to create our Razor Pages. Notice that we’ve been provided with a Startup.cs file that has a custom hello world middleware.
We’ll want to remove that middleware and use the MVC middleware instead, which includes support for Razor Pages by default.
Notice that in the code above we created a static file path for the node_modules folder. In a typical application we might use something like Webpack to take care of managing, bundling, and minifying our client assets, but since this is a simple app, we’ll just expose the node_modules folder.
The next thing we need to do is create our actual Razor Page. We’ll create a folder called Pages and create a Razor Page called Index. Visual Studio will automatically create the Index.cshtml and Index.cshtml.cs code behind file for you.

When you’re done, the project structure should look similar to the screenshot of my solution explorer below.

Now that our project is all set up, all we need to do is focus on the actual page and logic. If you look at the Index.cshtml.cs file, you’ll notice that it contains the following default code. You’ll notice the OnGet method, which gets called when an HTTP GET is performed on the index route. Similarly, an OnPost method would be called when an HTTP POST is performed on the index route.
I started out by copying the HTML from the TodoMVC template and used that as a base for the Index.cshtml file. Then I added forms around related groups of inputs so they could be posted back to the server. For buttons you can use an asp-page-handler tag helper to control which page handler methods are called on the server side. For example, clicking the following button would call the associated page handler.
The full code for the Index.cshtml page is below.
The final piece is to add the logic to the page model class. You’ll notice that it has several page handlers for creating, updating, and deleting todo items. The code for that is below.
That’s it! I think I’ll still typically go with a web API + SPA, but I can appreciate the different options we have now when creating server side web apps. You can view and download the full code for this project on GitHub.

