In this section, we will take a look at the layout page in more detail to understand what it is and how to take advantage of its features so that we can create dedicated layouts for multiple devices with different form factors (PCs, mobile phones, tablets, and more).

In Chapter 4, Basic Concepts of ASP.NET Core 3 via a Custom Application: Part 1, we added a layout page called _Layout.cshtml within the Views/Shared folder. When opening this page and analyzing its content, you can see that it contains common elements that are applicable to all the pages within your application (header, menu, footer, CSS, JavaScript, and more):

The common head section within the layout page contains CSS links but also search engine optimization (SEO) tags such as title, description, and keywords. As you have already seen, ASP.NET Core 3 provides a neat feature that allows you to include environment-specific content automatically via environment tags (development, staging, production, and more).

Bootstrap has become a quasi-standard for rendering menu and navigation bar components, which is why we have also used it for the Tic-Tac-Toe application.

It is good practice to put common JavaScript files at the bottom of your layout page; they can also be included depending on ASP.NET Core environment tags.

We will use the Views/_ViewStart.cshtml file to define the layout page for all our pages in a central place. Alternatively, if you want to set a specific layout page manually, you can set it at the top of your page:

@{
    Layout = "_Layout";
}

To structure your layout pages, you can define sections so that you can organize where certain page elements, including common script sections, should be placed. An example is the script section that can be seen within the layout page, which we added in one of the first examples of the Tic-Tac-Toe application. By default, it has been put at the bottom of the page, which was done by adding a dedicated meta tag:

@RenderSection("Scripts", required: false)

You can also define sections in your views so that you can add files or client-side scripts. We have already done that in the context of the email confirmation view, where we added a section for calling the client-side JavaScript EmailConfirmation method:

@section Scripts{
    <script>
        $(document).ready(function () {
        EmailConfirmation('@ViewBag.Email');
        });
    </script>
}

We can also use NuGet packages. There is a package called DeviceDetector.NET.NetCore that is quite thorough in what it is able to detect, not only in terms of mobile devices but also other devices, including desktops, television sets, and even cars.

We can install and use the preceding package through the Package Manager Console by using the following command:

Install-Package DeviceDetector.NET.NetCore

For now, let's get practical and do the mobile detection functionality ourselves! Let's learn how to optimize the Tic-Tac-Toe application for mobile devices.