Defining web user interfaces with Razor views

Let’s see how we can build the user interface of a web page in a modern ASP.NET Core MVC website.

Understanding Razor views

In MVC, the V stands for view. The responsibility of a view is to transform a model into HTML or other formats.

There are multiple view engines that could be used to do this. The default view engine is called Razor, and it uses the @ symbol to indicate server-side code execution.

Let’s review the home page view and how it uses a shared layout:

1. In the Views/Home folder, open the Index.cshtml file and note the block of C# code wrapped in @{ }. This will execute first and can be used to store data that needs to be passed into a shared layout file, like the title of the web page, as shown in the following code:

   @{
     ViewData["Title"] = "Home Page";
   }
   

2. Note the static HTML content in the <div> element that uses Bootstrap classes like...