HTML file structure
ASP.NET Core MVC is a rich framework for building web apps and APIs using the Model-View-Controller design pattern. The Model-View-Controller (MVC) architectural pattern separates an application into three main groups of components: Models, Views, and Controllers. This pattern helps to achieve separation of concerns.
We have created views/layout.cshtml which contains all the common css and javascript files and we have also included header and footer in this file as they are the same in majority of the pages.
layout.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Cuba admin is super flexible, powerful, clean & modern responsive bootstrap 5 admin template with unlimited possibilities.">
<meta name="keywords" content="admin template, Cuba admin template, dashboard template, flat admin template, responsive admin template, web app">
<meta name="author" content="pixelstrap">
<link rel="icon" href="~/assets/images/favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="~/assets/images/favicon.png" type="image/x-icon">
<title>Cuba - Premium Admin Template</title>
<!-- Google font-->
<link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="~/assets/css/font-awesome.css">
<!-- ico-font-->
<link rel="stylesheet" type="text/css" href="~/assets/css/vendors/icofont.css">
<!-- Themify icon-->
<link rel="stylesheet" type="text/css" href="~/assets/css/vendors/themify.css">
<!-- Flag icon-->
<link rel="stylesheet" type="text/css" href="~/assets/css/vendors/flag-icon.css">
<!-- Feather icon-->
<link rel="stylesheet" type="text/css" href="~/assets/css/vendors/feather-icon.css">
<!-- Plugins css start-->
<%-defineContent('css')%>
<!-- Plugins css Ends-->
<!-- Bootstrap css-->
<link rel="stylesheet" type="text/css" href="~/assets/css/vendors/bootstrap.css">
<!-- App css-->
<link rel="stylesheet" type="text/css" href="~/assets/css/style.css">
<link id="color" rel="stylesheet" href="~/assets/css/color-1.css" media="screen">
<!-- Responsive css-->
<link rel="stylesheet" type="text/css" href="/assets/css/responsive.css">
<title>Document</title>
</head>
<body>
<!-- loader starts-->
<%- include ./partials/loader %>
<!-- loader ends-->
<!-- tap on top starts-->
<%- include ./partials/tap-top %>
<!-- tap on tap ends-->
<!-- page-wrapper Start-->
<div class="page-wrapper compact-wrapper " id="pageWrapper">
<!-- Page Header Start-->
<%- include ./partials/header %>
<!-- Page Header Ends -->
<!-- Page Body Start-->
<div class="page-body-wrapper">
<!-- Page Sidebar Start-->
<%- include ./partials/sidebar %>
<!-- Page Sidebar Ends-->
<div class="page-body">
<%- include ./partials/page-title %>
<!-- Container-fluid starts-->
<%- body %>
<!-- Container-fluid Ends-->
</div>
<!-- footer start-->
<%- include ./partials/footer %>
</div>
</div>
<!-- latest jquery-->
<script src="~/assets/js/jquery-3.5.1.min.js"></script>
<!-- Bootstrap js-->
<script src="~/assets/js/bootstrap/bootstrap.bundle.min.js"></script>
<!-- feather icon js-->
<script src="~/assets/js/icons/feather-icon/feather.min.js"></script>
<script src="~/assets/js/icons/feather-icon/feather-icon.js"></script>
<!-- scrollbar js-->
<script src="~/assets/js/scrollbar/simplebar.js"></script>
<script src="~/assets/js/scrollbar/custom.js"></script>
<!-- Sidebar jquery-->
<script src="~/assets/js/config.js"></script>
<!-- Plugins JS start-->
<%-defineContent('script')%>
<!-- Plugins JS Ends-->
<!-- Theme js-->
<script src="~/assets/js/script.js"></script>
<script src="~/assets/js/theme-customizer/customizer.js"></script>
<!-- login js-->
</body>
</html>
As you can see, we have extended the views/layout.cshtml file and added additional css and javascript files below the 'css' and 'script' blocks. And write the content of the page below the 'body' block.
You can see that we have used include , to add multiple sections of the page. We have divided
the page into small sections and used include to add them where they are required.
These small sections of code are in the partials folder.