{"id":78863,"date":"2018-05-22T10:53:35","date_gmt":"2018-05-22T10:53:35","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=78863"},"modified":"2021-06-03T16:46:56","modified_gmt":"2021-06-03T16:46:56","slug":"razor-redux","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/razor-redux\/","title":{"rendered":"Razor Redux"},"content":{"rendered":"

ASP.NET Core 2 reintroduced Razor. If this humble markup first exposed in 2010<\/a> allowing developers to embed C# and VB.NET into web pages failed to impress, the redesigned version just might. Imagine all the things developers adored about Web Forms<\/a>, Model-View-Controller (MVC)<\/a>, and data-bound templating rolled up into one technology.<\/p>\n

This article provides a brief Razor introduction that might convince skeptical .NET developers to consider it for their next web application.<\/p>\n

MVC Backgrounder<\/h2>\n

Readers unfamiliar with ASP.NET\u2019s implementation of the Model-View-Controller (MVC) may find this brief overview helpful before continuing with this article. MVC is an architectural pattern splitting a web application page into three components: model, view, and controller. Models capture the application domain, such as, user name information. Views display the model, again, exposing the user name as an HTML<\/a> label in the upper left corner. Controllers manage the interaction between view and model.<\/p>\n

This loose coupling of model, view, and controller facilitates their individual development. For example, the view\u2019s design does not necessarily impact its associated model. The separation also simplifies unit testing for each of the components.<\/p>\n

Implementing MVC-based applications is not without its challenges. Some find it unnecessarily more complex than the Web Forms-based predecessor. Nonetheless, coding an MVC view with Razor markup seems easier than a Web Forms page. In all likelihood, this ease inspired the new Razor \u2013 markup sans model and controller components.<\/p>\n

Getting Started<\/h2>\n

An ASP.NET Core 2 Razor-based web application requires installing the .NET Core 2.0 SDK<\/a> and upgrading to Microsoft.AspNetCore 2.0.0<\/a>. Rather than explicitly installing AspNetCore directly, Visual Studio 2017 users may find upgrading to version 15.4+<\/a> a preferable option after installing the SDK. Upgrading Visual Studio exposes several new web project templates.<\/p>\n

Once the prerequisites are in place, create a new ASP.NET Core 2.0 project.<\/p>\n

<\/p>\n

After selecting the highlighted template option, Visual Studio creates the simple project which is entitled RazorDemo<\/em> as shown in the Solution Explorer window.<\/p>\n

<\/p>\n

Like most Visual Studio templated projects, building and executing RazorDemo<\/em> requires minimum effort on the part of the developer. Perhaps the most fascinating aspect of this starter project resides in the Startup.cs<\/em> method ConfigureServices<\/strong>. Razor pages rely on the MVC framework even if they don\u2019t explicitly demand its expected components, such as, models and controllers.<\/p>\n

public void ConfigureServices(IServiceCollection services)\r\n{\r\n\tservices.AddMvc();\r\n}<\/pre>\n
Razor by convention assumes a Pages<\/em> folder exists to house its web pages. These cshtml<\/em> (or vbhtml<\/em> for the VB.NET persuasion) files allow for two variations: markup only and code + markup.<\/p>\n
A Tale of Two Pages<\/h2>\n
Razor supports two fundamental implementations of a web page. The first type is somewhat simple, an example in your project is Error.cshtml<\/em>, which includes only markup. The second involves code and markup, for example Index.cshtml<\/em> and Index.cshtml.cs<\/em>.<\/p>\n
Markup Only<\/h3>\n
Adding a static Razor page via Visual Studio is simple. It begins by right clicking on the project folder of interest and clicking Add<\/em> followed by New Item<\/em> and clicking Razor Page<\/em>. This sequence, which might vary some between Visual Studio versions, brings up the following dialog.<\/p>\n
<\/p>\n
Inspecting this newly added page highlights the simplicity of a basic markup-only file. While it may look similar to the View found in an MVC implementation, the mark up differs. The Razor keyword page<\/strong> stands out as the salient element. This enables page requests without a supporting model or controller while exploiting the popular Razor constructs.<\/p>\n
@page\r\n@{\r\n    Layout = null;\r\n}\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta name=\"viewport\" content=\"width=device-width\" \/>\r\n    <title>MarkupOnly<\/title>\r\n<\/head>\r\n<body>\r\n@section Scripts {\r\n    @{await Html.RenderPartialAsync(\"_ValidationScriptsPartial\");}\r\n}\r\n<\/body>\r\n<\/html><\/pre>\n
\n
Note: This discussion does not dwell on <\/em>markup syntax<\/a> for a good reason \u2013 it didn\u2019t dramatically change. The most impressive aspect of the new Razor is everything other than the markup!<\/em><\/p>\n<\/div>\n
Developers may also add Razor pages by right clicking Add<\/em> and selecting Add Razor Page\u2026<\/em> at the top of the presented item list. This option provides help for incorporating the Entity Framework.<\/p>\n
Lastly, if a developer selects the Razor View<\/em> when selecting a New Item,<\/em> the added cshtml<\/em> page may disappoint. It will contain a warning that the project needs MVC enabled. Count that as a gentle reminder that Razor View<\/em> and Razor Page<\/em> differ.<\/p>\n
Code + Markup<\/h3>\n
The second type of Razor page contains a markup file with a Web Forms like code-behind file. PageModel<\/strong><\/a>, which resembles a hybrid MVC controller, provides the glue linking the two. Creating such a page is as simple as the markup only version except that you must check Generate PageModel <\/strong>class.<\/p>\n
\"C:\\Users\\tom.fischer\\AppData\\Local\\Microsoft\\Windows\\INetCache\\Content.Word\\Add<\/p>\n
The markup file created when adding the Razor page, CodeMarkup.cshtml<\/em>, closely resembles the markup only type with one critical difference. After page<\/strong>, another Razor keyword, model<\/strong>, follows declaring the markup\u2019s supporting class RazorDemo.Pages.CodeMarkupModel<\/strong> which inherits from PageModel<\/strong>.<\/p>\n
@page\r\n@model RazorDemo.Pages.CodeMarkupModel\r\n@{\r\n    Layout = null;\r\n}\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta name=\"viewport\" content=\"width=device-width\" \/>\r\n    <title>CodeMarkup<\/title>\r\n<\/head>\r\n<body>\r\n@section Scripts {\r\n    @{await Html.RenderPartialAsync(\"_ValidationScriptsPartial\");}\r\n}\r\n<\/body>\r\n<\/html><\/pre>\n
The Code-behind CodeMarkupModel<\/strong> class reveals both the simplicity and power of the new Razor. Exploiting it only requires learning a few concepts. Razor code-behind pages do not equate to the older Web Forms like sounding construct. PageModel<\/strong> more closely resembles an MVC controller.<\/p>\n
PageModel Basics<\/h2>\n
Developers familiar with ASP.NET MVC projects will find fully functional Razor-based web pages easy to implement. This article explores these essentials via a sample order editing page.<\/p>\n
Requirements<\/h3>\n
We satisfy our limited ambitions with a web page to edit an order as shown below.<\/p>\n
<\/p>\n
This simple page allows highlighting a few new and many old features in Razor and MVC.<\/p>\n
Preliminaries<\/h3>\n
Implementing the page only requires a few steps before coding:<\/p>\n
    \n
  1. Add a Razor page via Visual Studio entitled OrderEdit<\/em> with\n