Let’s walk through the parts that make up a modern ASP.NET Core MVC website.

ASP.NET Core MVC initialization

Appropriately enough, we will start by exploring the MVC website’s default initialization and configuration:

1. In Program.cs, note that it can be divided into four important sections from top to bottom. As you review the sections, you might want to add regions and comments to remind yourself of what each section is used for.
2. The first section imports some namespaces, as shown in the...

Bootstrap is the world’s most popular framework for building responsive, mobile-first websites. It combines CSS stylesheets with JavaScript libraries to implement its functionality. It is a good choice for prototyping a website UI, although, before going public, you might want to hire a web designer to build a custom Bootstrap theme or replace it with a completely custom set of CSS stylesheets to give your website a distinct brand.

Bootstrap can be divided into four parts:

• Layout: The layout system in Bootstrap provides a responsive grid system, flexible containers, and powerful utilities for creating structured, adaptive designs that adjust seamlessly across various screen sizes and devices.
• Content: The content section of Bootstrap includes a variety of pre-styled HTML elements like typography, images, and tables, ensuring a consistent and polished look for textual and visual content across your web pages.
• Components:...

Now that you’ve reviewed the structure of a basic MVC website, you will customize and extend it. You have already registered an EF Core model for the Northwind database, so the next task is to output some of that data on the home page.

Defining a custom style

The home page will show a list of the 77 products in the Northwind database. To make efficient use of space, we want to show the list in three columns. To do this, we need to customize the stylesheet for the website:

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

The Northwind database includes a table of eight categories, but they do not have images, and websites look better with some colorful pictures:

1. In the...

Test your knowledge and understanding by answering some questions, getting some hands-on practice, and exploring this chapter’s topics with deeper research.

Exercise 2.1 – Online material

If you need to maintain ASP.NET Core projects that were built using .NET 5 or earlier, then they will use an additional file along with Program.cs: a file named Startup.cs. I have written an online section about this, found at the following link: https://github.com/markjprice/web-dev-net9/blob/main/docs/ch02-startup.md.

The official documentation for ASP.NET Core MVC is found at the following link: https://learn.microsoft.com/en-us/aspnet/core/mvc/overview.

Exercise 2.2 – Practice exercises

The following practice exercises help you to explore the topics in this chapter more deeply.

Practice building UIs with Bootstrap

Create a new ASP.NET Core MVC project named ExploringBootstrap. Add views that implement the following Bootstrap...

In this chapter, you learned how to build simple ASP.NET Core MVC websites using the HTTP pipeline, routes, models, views, and controllers, as summarized in the following list:

• HTTP pipeline: A sequence of middleware components that process HTTP requests and responses, allowing for handling tasks like routing, authentication, and exception handling. You will learn more details about customizing the HTTP pipeline in Chapter 8, Configuring and Containerizing ASP.NET Core Projects.
• Routes: These define URL patterns in ASP.NET Core that map incoming HTTP requests to corresponding controllers and actions for processing.
• Controllers: These act as intermediaries between models and views in ASP.NET Core, handling user input, updating models, and returning views or other types of responses like JSON.
• Models: These represent the data in ASP.NET Core applications and are used to manage and manipulate data, often interacting with a database.
• Views: These...