Introduction

Code Layout

Code order is important for the template to function correctly. All the scripts except loader.js should be included at the end of body tag.

Reference

ViewBags

NAME
TYPE
DESCRIPTION
NAME
Title
TYPE
string
DESCRIPTION
Title metadata content
NAME
Description
TYPE
string
DESCRIPTION
Description metadata content
NAME
PageStyles
TYPE
List<string>
DESCRIPTION
It is used to add the css files that the page specifically needs to the existing layout styles.
NAME
VendorScripts
TYPE
List<string>
DESCRIPTION
It is used to add the vendor js files that the page specifically needs to the existing layout vendor js files.
NAME
PageScripts
TYPE
List<string>
DESCRIPTION
It is used to add the js files that the page specifically needs to the existing layout js files.
NAME
HtmlTagData
TYPE
Dictionary<string, string>
DESCRIPTION
Used to add data attr to the HTML tag from within the page.
NAME
CustomNavData
TYPE
Dictionary<string, string>
DESCRIPTION
Used to add data attr to the .nav-container div from within the page.

Layout


<!DOCTYPE html>
<html lang="en" data-footer="true">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Acorn Admin Template | @ViewBag.Title</title>
    <meta name="description" content="@ViewBag.Description" />
    <partial name="_Layout.Head" />
</head>

<body>
    <div id="root">
      <!-- Nav Content Start -->
      <div id="nav" class="nav-container d-flex">
          <partial name="_Layout.Nav" />
      </div>
      <!-- Nav Content End -->
      
        <!-- Main Content Start -->
        <main>
            @RenderBody()
        </main>
        <!-- Main Content End -->

        <!-- Footer Content Start -->
        <partial name="_Layout.Footer" />
        <!-- Footer Content End -->
    </div>

    <!-- Modal Contents Start -->
    <partial name="_Layout.SettingsModal" />
    <partial name="_Layout.SearchModal" />
    <!-- Modal Contents End -->

    <partial name="_Layout.Scripts"/>
</body>
</html>

Full Layout


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Acorn Admin Template | @ViewBag.Title</title>
    <meta name="description" content="@ViewBag.Description" />
    <partial name="_Layout.Head" />
</head>
  <body class="h-100">
    <div id="root" class="h-100">
      <!-- Background Start -->
      <div class="fixed-background"></div>
      <!-- Background End -->

      <div class="container-fluid p-0 h-100 position-relative">
        <div class="row g-0 h-100">
          <!-- Left Side Start -->
          <div class="offset-0 col-12 d-none d-lg-flex offset-md-1 col-lg h-lg-100">
            @RenderSection("LeftSide", required: false)
          </div>
          <!-- Left Side End -->

          <!-- Right Side Start -->
          <div class="col-12 col-lg-auto h-100 pb-4 px-4 pt-0 p-lg-0">
           @RenderSection("RightSide", required: false)
          </div>
          <!-- Right Side End -->
        </div>
      </div>
    </div>
    <partial name="_Layout.SettingsModal" />
    <partial name="_Layout.Scripts"/>
  </body>
</html>