Go to the head section in _Layout.cshtml and add the following code snippet:
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>@ViewData["Title"] - TicTacToe</title>
<environment include="Development">
<link rel="stylesheet"
href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn
.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css
/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-
property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784
/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/></environment>
<link rel="stylesheet" href="~/css/site.css" />
Create a body section with the following tags, <body></body> and, within the body, create a header navigation bar with the following code snippet:
<header><nav class="navbar navbar-expand-sm navbar-toggleable-sm
navbar-light bg-white border-bottom
box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-
action="Index">TicTacToe</a>
<button class="navbar-toggler" type="button" data-toggle=
"collapse" data-target=".navbar-collapse" aria-controls=
"navbarSupportedContent" aria-expanded="false" aria-label=
"Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-
reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="Home" asp- action="Index">Home</a> </li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
controller="Home" asp-action="Privacy">
Privacy</a></li></ul></div></div></nav></header>
Within the same body section, outside of the navigation section, after the closing </header> tag, add container body content as follows:
<div class="container body-content">
<main role="main" class="pb-3">
@RenderBody()
</main>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - TicTacToe - <a asp-area="" asp-
controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
</div>
Then, after the body content, add the following references at the bottom that will be used in a development environment:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
Additionally, in the case of a production environment, which we will not be using within the scope of this book, we would have something like the following code snippet:
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery
/3.3.1/jquery.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o
/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com
/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js
/bootstrap.bundle.min.js"
asp-fallback-test="window.jQuery &&
window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRT
LCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
</environment>
We are going to use the layout page, as updated with the preceding series of code snippets, for our sample application.
Before creating the user registration page in the next section, let's update the home page created beforehand to show some basic information on the Tic-Tac-Toe game while using the layout page shown previously:
@{ ViewData["Title"] = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml"; }
<div class="row">
<div class="col-lg-12">
<h2>Tic-Tac-Toe</h2>
<div class="alert alert-info">
<p>Tic-Tac-Toe is a two-player turn-based game.</p>
<p>Two players will choose who takes the Xs and who takes the Os.
They will then be taking turns and mark spaces in a
3×3 grid by putting their marks, one mark per turn.</p>
<p>A player who succeeds in placing three of his arks in a
horizontal, vertical, or diagonal row wins the
game.</p>
</div>
<p><h3>Register by clicking <a asp-controller="User
Registration"asp-view="Index">here</a></h3</p>
</div>
</div>
When starting the application, you will see a new home page design, with the text that has been added earlier, as follows:
You can see in the screenshot that we have a link to allow our application users to register so that they can play our game. Therefore, we are now at a good point in terms of looking at how we can create a registration page. We will do that in the following section.