ASP.NET Core Razor Pages – Part 1

September 30, 2017 at 3:10 pm Leave a comment

Introduction to Razor Pages

ASP.NET Core Razor Pages provide web developers with a way to create simple web applications (or web sites) using HTML, CSS, JavaScript, C# and the .NET library, but without the added complexity of the more powerful ASP.NET MVC framework. If you’ve used ASP.NET Web Forms, think of Razor Pages as an alternative that lets you just use standard HTML with helper code instead of dragging and dropping controls onto forms.

The pages you create will consist of a combination of regular old HTML, CSS, JavaScript and C#. But, wait!, you mght say, you can’t put C# in a web page because browsers only understand HTML, CSS, and JavaScript. You’re right. That’s why Razor Pages are rendered by an ASP.NET engine running on the server. The C# code is executed on the server and its output is combined with the rest of the mark-up and code on the page before being sent to a browser.

Microsoft introduced ASP.NET Web Pages with Razor syntax back in 2011. Since then, the framework has grown and matured. The latest version for “mainstream” ASP.NET is Web Pages 3.2.3. The new cross-platform version of .NET, .NET Core,  includes Razor Pages, which is essentially the same as Web Pages, but they behave a little differently.

Learning to Develop with Razor Pages

Microsoft has published a very nice set of tutorials for developing ASP.NET Web Pages, but it was written for “mainstream” ASP.NET Web Pages, not the .NET Core Razor Pages. There isn’t really a good set of tutorials for Razor Pages yet. So, in this series of posts I’ll discuss each of the lessons in the old Web Pages tutorials and give you the updated instruction you need to make the lesson work for Razor Pages in .NET Core 2.0.

I’ll be using Visual Studio 2017 (avialabe free for Mac OS and Windows), but you could also use Visual Studio Code (available free for Mac OS, Linux and Windows), or any other code editor for that matter. If are using a code editor, instead of the full-blown Visual studio 2017, then you’ll want to read about using the .NET Core Command Line Interface

Getting Started

Let’s take a look at the first lesson, Getting Started. The introductory information in this lesson is still valid (except the part about Web Matrix), but the installation instructions are not. Instead of Web Matrix, you will want to install the .NET Core 2.0 SDK and runtime as well as Visual studio or your own favorite code editor. We’ll skip  the sections “Install Everything”, through “Testing the Page”, and instead we’ll create a Web Pages project as described in Getting started with Razor Pages (just this one page, don’t go on to “Adding a Model”).

Once you’ve created a new project, you’ll want to remove the pages that were added to the app by default. Remove all of the files from the Pages folder. Now you can add your own page. Right-click on the Pages folder, click add, click on new file, in the left pane of the new file dialog, select ASP.NET core, on the right, click Razor page.

Next, pick up with the section, Adding Some Server-Side Code. This still works! Just make sure you have the @Page directive at the top of the page. When you run the project, a browser will be launched and the current date and time will be displayed:

Right now it’s 09/30/2017 14:51:44

The code for this tutorial is available here:

In Part 2, we will do the lesson on Programming Basics

Entry filed under: ASP.NET Core, C#, Programming, Web Development. Tags: , , .

Women in Agile: The Changing Face of Agile – Session Notes Publishing an ASP.NET Core Web App to a Low-Cost Windows Hosting Service

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed

Bird’s Bits

Computers, software & the Internet

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 41 other followers

%d bloggers like this: