• Models: Classes that represent the data entities and view models used on the website.
• Views: Razor files, that is, .cshtml files, that render data in view models into HTML web pages. Blazor uses the .razor file extension, but do not confuse them with Razor files!
• Controllers: Classes that execute code when an HTTP request arrives at the web server. The controller methods usually create a view model that may contain entity models and passes it to a view to generate an HTTP response to send back to the web browser or other client.

The best way to understand using the MVC design pattern for web development is to see a working example.

Creating an ASP.NET Core MVC website

Let's see it in action:

1. Use your preferred code editor to add a MVC website project with authentication accounts stored in a database, as defined in the following list:
   1. Project template: ASP.NET Core Web App (Model-View-Controller) / mvc
   2. Language: C#
   3. Workspace/solution file and folder: PracticalApps
   4. Project file and folder: Northwind.Mvc
   5. Options: Authentication Type: Individual Accounts / --auth Individual
   6. For Visual Studio, leave all other options as their defaults
2. In Visual Studio Code, select Northwind.Mvc as the active OmniSharp project.
3. Build the Northwind.Mvc project.
4. At the command line or terminal, use the help switch to see other options for this project template, as shown in the following command:

   dotnet new mvc --help
   

5. Note the results, as shown in the following partial output:

   ASP.NET Core Web App (Model-View-Controller) (C#)
   Author: Microsoft
   Description: A project template for creating an ASP.NET Core application with example ASP.NET Core MVC Views and Controllers. This template can also be used for RESTful HTTP services.
   This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/6.0-third-party-notices for details.
   

There are many options, especially related to authentication, as shown in the following table:

Creating the authentication database for SQL Server LocalDB

If you created the MVC project using Visual Studio 2022, or you used dotnet new mvc with the -uld or --use-local-db switch, then the database for authentication and authorization will be stored in SQL Server LocalDB. But the database does not yet exist. Let's create it now.

dotnet ef database update

If you created the MVC project using dotnet new, then the database for authentication and authorization will be stored in SQLite and the file has already been created named app.db.

The connection string for the authentication database is named DefaultConnection and it is stored in the appsettings.json file in the root folder for the MVC website project.

For SQL Server LocalDB (with a truncated connection string), see the following markup:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Northwind.Mvc-...;Trusted_Connection=True;MultipleActiveResultSets=true"
  },

For SQLite, see the following markup:

{
  "ConnectionStrings": {
    "DefaultConnection": "DataSource=app.db;Cache=Shared"
  },

Exploring the default ASP.NET Core MVC website

1. In the Northwind.Mvc project, expand the Properties folder, open the launchSettings.json file, and note the random port numbers (yours will be different) configured for the project for HTTPS and HTTP, as shown in the following markup:

   "profiles": {
     "Northwind.Mvc": {
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
       "applicationUrl": "https://localhost:7274;http://localhost:5274",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
     },
   

2. Change the port numbers to 5001 for HTTPS and 5000 for HTTP, as shown in the following markup:

   "applicationUrl": "https://localhost:5001;http://localhost:5000",
   

3. Save the changes to the launchSettings.json file.
4. Start the website.
5. Start Chrome and open Developer Tools.
6. Navigate to http://localhost:5000/ and note the following, as shown in Figure 15.1:
   • Requests for HTTP are automatically redirected to HTTPS on port 5001.
   • The top navigation menu with links to Home, Privacy, Register, and Login. If the viewport width is 575 pixels or less, then the navigation collapses into a hamburger menu.
   • The title of the website, Northwind.Mvc, shown in the header and footer.

   

Figure 15.1: The ASP.NET Core MVC project template website home page

Understanding visitor registration

By default, passwords must have at least one non-alphanumeric character, they must have at least one digit (0-9), and they must have at least one uppercase letter (A-Z). I use Pa$$w0rd in scenarios like this when I am just exploring.

We have not yet configured an email provider to send that email, so we must simulate that step:

Reviewing an MVC website project structure

Figure 15.2: The default folder structure of an ASP.NET Core MVC project

Reviewing the ASP.NET Core Identity database

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Northwind.Mvc-2F6A1E12-F9CF-480C-987D-FEFB4827DE22;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

If you used SQL Server LocalDB for the identity data store, then you can use Server Explorer to connect to the database. You can copy and paste the connection string from the appsettings.json file (but remove the second backslash between (localdb) and mssqllocaldb).

You can then see the tables that the ASP.NET Core Identity system uses to register users and roles, including the AspNetUsers table used to store the registered visitor.

Exploring an ASP.NET Core MVC website

Understanding ASP.NET Core MVC initialization

A default route is configured for MVC, as shown in the following code:

endpoints.MapControllerRoute(
  name: "default",
  pattern: "{controller=Home}/{action=Index}/{id?}");

The route pattern looks at any URL path requested by the browser and matches it to extract the name of a controller, the name of an action, and an optional id value (the ? symbol makes it optional).

If the user hasn't entered these names, it uses defaults of Home for the controller and Index for the action (the = assignment sets a default for a named segment).

The following table contains example URLs and how the default route would work out the names of a controller and action:

Understanding controllers and actions

namespace Microsoft.AspNetCore.Mvc
{
  //
  // Summary:
  // A base class for an MVC controller without view support.
  [Controller]
  public abstract class ControllerBase
  {
...

Understanding the ControllerBase class

As you can see in the XML comment, ControllerBase does not support views. It is used for creating web services, as you will see in Chapter 16, Building and Consuming Web Services.

Understanding the Controller class

namespace Microsoft.AspNetCore.Mvc
{
  //
  // Summary:
  // A base class for an MVC controller with view support.
  public abstract class Controller : ControllerBase,
    IActionFilter, IFilterMetadata, IAsyncActionFilter, IDisposable
  {
...

Controller has many useful properties for working with views, as shown in the following table:

Understanding the responsibilities of a controller

• Identify the services that the controller needs to be in a valid state and to function properly in their class constructor(s).
• Use the action name to identify a method to execute.
• Extract parameters from the HTTP request.
• Use the parameters to fetch any additional data needed to construct a view model and pass it to the appropriate view for the client. For example, if the client is a web browser, then a view that renders HTML would be most appropriate. Other clients might prefer alternative renderings, like document formats such as a PDF file or an Excel file, or data formats, like JSON or XML.
• Return the results from the view to the client as an HTTP response with an appropriate status code.

Let's review the controller used to generate the home, privacy, and error pages:

If the visitor navigates to a path of / or /Home, then it is the equivalent of /Home/Index because those were the default names for controller and action in the default route.

Understanding the view search path convention

Let's deliberately break one of the page names so that we can see the paths searched by default:

1. In the Northwind.Mvc project, expand the Views folder and then the Home folder.
2. Rename the Privacy.cshtml file to Privacy2.cshtml.
3. Start the website.
4. Start Chrome, navigate to https://localhost:5001/, click Privacy, and note the paths that are searched for a view to render the web page (including in Shared folders for MVC views and Razor Pages), as shown in Figure 15.3:

   

   Figure 15.3: An exception showing the default search path for views

5. Close Chrome and shut down the web server.
6. Rename the Privacy2.cshtml file back to Privacy.cshtml.

• Specific Razor view: /Views/{controller}/{action}.cshtml
• Shared Razor view: /Views/Shared/{action}.cshtml
• Shared Razor Page: /Pages/Shared/{action}.cshtml

Understanding logging

1. In the Controllers folder, in HomeController.cs, in the Index method, add statements to use the logger to write some messages of various levels to the console, as shown in the following code:

   _logger.LogError("This is a serious error (not really!)");
   _logger.LogWarning("This is your first warning!");
   _logger.LogWarning("Second warning!");
   _logger.LogInformation("I am in the Index method of the HomeController.");
   

2. Start the Northwind.Mvc website project.
3. Start a web browser and navigate to the home page for the website.
4. At the command prompt or terminal, note the messages, as shown in the following output:

   fail: Northwind.Mvc.Controllers.HomeController[0]
         This is a serious error (not really!)
   warn: Northwind.Mvc.Controllers.HomeController[0]
         This is your first warning!
   warn: Northwind.Mvc.Controllers.HomeController[0]
         Second warning!
   info: Northwind.Mvc.Controllers.HomeController[0]
         I am in the Index method of the HomeController.
   

5. Close Chrome and shut down the web server.

Understanding filters

Filters can be applied at the following levels:

Using a filter to secure an action method

• [Authorize]: Only allow authenticated (non-anonymous, logged-in) visitors to access this action method.
• [Authorize(Roles = "Sales,Marketing")]: Only allow visitors who are members of the specified role(s) to access this action method.

Let's see an example:

Enabling role management and creating a role programmatically

Using a filter to cache a response

You control where the response is cached and for how long by setting parameters, as shown in the following list:

• Duration: In seconds. This sets the max-age HTTP response header measured in seconds. Common choices are one hour (3600 seconds) and one day (86400 seconds).
• Location: One of the ResponseCacheLocation values, Any, Client, or None. This sets the cache-control HTTP response header.
• NoStore: If true, this ignores Duration and Location and sets the cache-control HTTP response header to no-store.

Let's see an example:

Using a filter to define a custom route

You might want to define a simplified route for an action method instead of using the default route.

https://localhost:5001/home/privacy

We could make the route simpler, as shown in the following link:

https://localhost:5001/private

Let's see how to do that:

1. In HomeController.cs, add an attribute to the Privacy method to define a simplified route, as shown highlighted in the following code:

   [Route("private")]
   [Authorize(Roles = "Administrators")]
   public IActionResult Privacy()
   

2. Start the website.
3. In the address bar, enter the following URL path:

   https://localhost:5001/private
   

4. Enter your email and password, click Log in, and note that the simplified path shows the Privacy page.
5. Close Chrome and shut down the web server.

Understanding entity and view models

Entity models represent entities in a database like SQL Server or SQLite. Based on the request, one or more entities might need to be retrieved from data storage. Entity models are defined using classes since they might need to change and then be used to update the underlying data store.

For example, the following HTTP GET request might mean that the browser is asking for the product details page for product number 3:

Remember the view search convention: when the View method is called in a controller's action method, ASP.NET Core MVC looks in the Views folder for a subfolder with the same name as the current controller, that is, Home. It then looks for a file with the same name as the current action, that is, Index.cshtml. It will also search for views that match the action method name in the Shared folder and for Razor Pages in the Pages folder.

Understanding views

Let's modify the home page view to render the lists of categories and products:

When asp-append-version is specified with a true value in any element like <img> or <script> along with a src attribute, the Image Tag Helper is invoked (this helper is poorly named because it does not only affect images!).

It works by automatically appending a query string value named v that is generated from a hash of the referenced source file, as shown in the following example generated output:

<script src="~/js/site.js? v=Kl_dqr9NVtnMdsM2MUg4qthUnWZm5T1fCEimBPWDNgM"></script>

If even a single byte within the site.js file changes, then its hash value will be different, and therefore if a browser or CDN is caching the script file, then it will bust the cached copy and replace it with the new version.

Customizing an ASP.NET Core MVC website

Defining a custom style

1. In the wwwroot\css folder, open the site.css file.
2. At the bottom of the file, add a new style that will apply to an element with the product-columns ID, as shown in the following code:

   #product-columns
   {
     column-count: 3;
   }
   

Setting up the category images

1. In the wwwroot folder, create a folder named images.
2. In the images folder, add eight image files named category1.jpeg, category2.jpeg, and so on, up to category8.jpeg.

@{
  Order order = new()
  {
    OrderId = 123,
    Product = "Sushi",
    Price = 8.49M,
    Quantity = 3
  };
}
<div>Your order for @order.Quantity of @order.Product has a total cost of $@ order.Price * @order.Quantity</div>

The preceding Razor file would result in the following incorrect output:

Your order for 3 of Sushi has a total cost of $8.49 * 3

<div>Your order for @order.Quantity of @order.Product has a total cost of $@ (order.Price * order.Quantity)</div>

The preceding Razor expression results in the following correct output:

Your order for 3 of Sushi has a total cost of $25.47

Defining a typed view

1. In the Views\Home folder, open Index.cshtml.
2. At the top of the file, add a statement to set the model type to use the HomeIndexViewModel, as shown in the following code:

   @model HomeIndexViewModel
   

   Now, whenever we type Model in this view, your code editor will know the correct type for the model and will provide IntelliSense for it.

   While entering code in a view, remember the following:

   • Declare the type for the model, use @model (with a lowercase m).
   • Interact with the instance of the model, use @Model (with an uppercase M).

   Let's continue customizing the view for the home page.

3. In the initial Razor code block, add a statement to declare a string variable for the current item and under the existing <div> element add new markup to output categories in a carousel and products as an unordered list, as shown in the following markup:

   @using Packt.Shared
   @model HomeIndexViewModel 
   @{
     ViewData["Title"] = "Home Page";
     string currentItem = "";
   }
   <div class="text-center">
     <h1 class="display-4">Welcome</h1>
     <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
     <p class="alert alert-primary">@DateTime.Now.ToLongTimeString()</p>
   </div>
   @if (Model is not null)
   {
   <div id="categories" class="carousel slide" data-ride="carousel" 
        data-interval="3000" data-keyboard="true">
     <ol class="carousel-indicators">
     @for (int c = 0; c < Model.Categories.Count; c++)
     {
       if (c == 0)
       {
         currentItem = "active";
       }
       else
       {
         currentItem = "";
       }
       <li data-target="#categories" data-slide-to="@c"  
           class="@currentItem"></li>
     }
     </ol>
     <div class="carousel-inner">
     @for (int c = 0; c < Model.Categories.Count; c++)
     {
       if (c == 0)
       {
         currentItem = "active";
       }
       else
       {
         currentItem = "";
       }
       <div class="carousel-item @currentItem">
         <img class="d-block w-100" src=   
           "~/images/category@(Model.Categories[c].CategoryId).jpeg"  
           alt="@Model.Categories[c].CategoryName" />
         <div class="carousel-caption d-none d-md-block">
           <h2>@Model.Categories[c].CategoryName</h2>
           <h3>@Model.Categories[c].Description</h3>
           <p>
             <a class="btn btn-primary"  
               href="/category/@Model.Categories[c].CategoryId">View</a>
           </p>
         </div>
       </div>
     }
     </div>
     <a class="carousel-control-prev" href="#categories" 
       role="button" data-slide="prev">
       <span class="carousel-control-prev-icon" 
         aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
     <a class="carousel-control-next" href="#categories" 
       role="button" data-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
   </div>
   }
   <div class="row">
     <div class="col-md-12">
       <h1>Northwind</h1>
       <p class="lead">
         We have had @Model?.VisitorCount visitors this month.
       </p>
       @if (Model is not null)
       {
       <h2>Products</h2>
       <div id="product-columns">
         <ul>
         @foreach (Product p in @Model.Products)
         {
           <li>
             <a asp-controller="Home"
                asp-action="ProductDetail"
                asp-route-id="@p.ProductId">
               @p.ProductName costs 
   @(p.UnitPrice is null ? "zero" : p.UnitPrice.Value.ToString("C"))
             </a>
           </li>
         }
         </ul>
       </div>
       }
     </div>
   </div>
   

• It is easy to mix static HTML elements such as <ul> and <li> with C# code to output the carousel of categories and the list of product names.
• The <div> element with the id attribute of product-columns will use the custom style that we defined earlier, so all of the content in that element will display in three columns.
• The <img> element for each category uses parentheses around a Razor expression to ensure that the compiler does not include the .jpeg as part of the expression, as shown in the following markup: "~/images/category@(Model.Categories[c].CategoryID).jpeg"
• The <a> elements for the product links use tag helpers to generate URL paths. Clicks on these hyperlinks will be handled by the HomeController and its ProductDetail action method. This action method does not exist yet, but you will add it later in this chapter. The ID of the product is passed as a route segment named id, as shown in the following URL path for Ipoh Coffee: https://localhost:5001/Home/ProductDetail/43.

Reviewing the customized home page

Passing parameters using a route value

Understanding model binders in more detail

• Route parameter, like id as we did in the previous section, as shown in the following URL path: /Home/ProductDetail/2
• Query string parameter, as shown in the following URL path: /Home/ProductDetail?id=2
• Form parameter, as shown in the following markup:

  <form action="post" action="/Home/ProductDetail">
    <input type="text" name="id" value="2" />
    <input type="submit" />
  </form>
  

• Simple types, like int, string, DateTime, and bool.
• Complex types defined by class, record, or struct.
• Collection types, like arrays and lists.

Let's create a somewhat artificial example to illustrate what can be achieved using the default model binder:

Disambiguating action methods

We could do this by creating different names for the actions or by specifying that one method should be used for a specific HTTP verb, like GET, POST, or DELETE. That is how we will solve the problem:

Passing a route parameter

Now we will set the property using a route parameter:

Passing a form parameter

Now we will set the property using a form parameter:

Validating the model

Let's explore what we can do with model state by applying some validation rules to the bound model and then showing invalid data messages in the view:

• ActionLink: Use this to generate an anchor <a> element that contains a URL path to the specified controller and action. For example, Html.ActionLink(linkText: "Binding", actionName: "ModelBinding", controllerName: "Home") would generate <a href="/home/modelbinding">Binding</a>. You can achieve the same result using the anchor tag helper: <a asp-action="ModelBinding" asp-controller="Home">Binding</a>.
• AntiForgeryToken: Use this inside a <form> to insert a <hidden> element containing an anti-forgery token that will be validated when the form is submitted.
• Display and DisplayFor: Use this to generate HTML markup for the expression relative to the current model using a display template. There are built-in display templates for .NET types and custom templates can be created in the DisplayTemplates folder. The folder name is case-sensitive on case-sensitive filesystems.
• DisplayForModel: Use this to generate HTML markup for an entire model instead of a single expression.
• Editor and EditorFor: Use this to generate HTML markup for the expression relative to the current model using an editor template. There are built-in editor templates for .NET types that use <label> and <input> elements, and custom templates can be created in the EditorTemplates folder. The folder name is case-sensitive on case-sensitive filesystems.
• EditorForModel: Use this to generate HTML markup for an entire model instead of a single expression.
• Encode: Use this to safely encode an object or string into HTML. For example, the string value "<script>" would be encoded as "<script>". This is not normally necessary since the Razor @ symbol encodes string values by default.
• Raw: Use this to render a string value without encoding as HTML.
• PartialAsync and RenderPartialAsync: Use these to generate HTML markup for a partial view. You can optionally pass a model and view data.

It is the combination of decorating the Email property with the [EmailAddress] validation attribute and rendering it using DisplayFor that notifies ASP.NET Core to treat the value as an email address and therefore render it as a clickable link.

Querying a database and using display templates

Let's create a new action method that can have a query string parameter passed to it and use that to query the Northwind database for products that cost more than a specified price.

Let's implement this feature:

Improving scalability using asynchronous tasks

When building a desktop or mobile app, multiple tasks (and their underlying threads) can be used to improve responsiveness, because while one thread is busy with the task, another can handle interactions with the user.

When an HTTP request arrives at the web server, a thread from its pool is allocated to handle the request. But if that thread must wait for a resource, then it is blocked from handling any more incoming requests. If a website receives more simultaneous requests than it has threads in its pool, then some of those requests will respond with a server timeout error, 503 Service Unavailable.

The threads that are locked are not doing useful work. They could handle one of those other requests but only if we implement asynchronous code in our websites.

Whenever a thread is waiting for a resource it needs, it can return to the thread pool and handle a different incoming request, improving the scalability of the website, that is, increasing the number of simultaneous requests it can handle.

Why not just have a larger thread pool? In modern operating systems, every thread in the pool has a 1 MB stack. An asynchronous method uses a smaller amount of memory. It also removes the need to create new threads in the pool, which takes time. The rate at which new threads are added to the pool is typically one every two seconds, which is a loooooong time compared to switching between asynchronous threads.

Making controller action methods asynchronous

Practicing and exploring

Test your knowledge and understanding by answering some questions, get some hands-on practice, and explore this chapter's topics with deeper research.

Exercise 15.1 – Test your knowledge

Answer the following questions:

1. What do the files with the special names _ViewStart and _ViewImports do when created in the Views folder?
2. What are the names of the three segments defined in the default ASP.NET Core MVC route, what do they represent, and which are optional?
3. What does the default model binder do, and what data types can it handle?
4. In a shared layout file like _Layout.cshtml, how do you output the content of the current view?
5. In a shared layout file like _Layout.cshtml, how do you output a section that the current view can supply content for, and how does the view supply the contents for that section?
6. When calling the View method inside a controller's action method, what paths are searched for the view by convention?
7. How can you instruct the visitor's browser to cache the response for 24 hours?
8. Why might you enable Razor Pages even if you are not creating any yourself?
9. How does ASP.NET Core MVC identify classes that can act as controllers?
10. In what ways does ASP.NET Core MVC make it easier to test a website?

Exercise 15.2 – Practice implementing MVC by implementing a category detail page

The Northwind.Mvc project has a home page that shows categories, but when the View button is clicked, the website returns a 404 Not Found error, for example, for the following URL:

https://localhost:5001/category/1

Extend the Northwind.Mvc project by adding the ability to show a detail page for a category.

Exercise 15.3 – Practice improving scalability by understanding and implementing async action methods

A few years ago, Stephen Cleary wrote an excellent article for MSDN Magazine explaining the scalability benefits of implementing async action methods for ASP.NET. The same principles apply to ASP.NET Core, but even more so, because unlike the old ASP.NET as described in the article, ASP.NET Core supports asynchronous filters and other components.

Read the article at the following link: