.Net Core Layout

Main Layout

Note: There is internal condition to select vertical or horizontal layout. This option can be updated from _ViewStart.cshtml file.

We have included styles and scripts files in Common Master Layout. You can find these files at the same path inside Pages/Layouts/ folder.

 @{
  @* using this variables to load front pages assets *@
  bool isFront = ViewData["isFront"] is bool isFrontValue ? isFrontValue : false;
  ViewData["main"] = isFront ? "front-" : "";
  ViewData["frontVar"] = isFront ? "Front" : "";
  @* Compact/Fluid class *@
  ViewData["contentType"] = ViewData["container"] is string container && container == "container-xxl" ? "layout-compact" : "layout-wide";
}

@inject IHttpContextAccessor httpContextAccessor

<!DOCTYPE html>
<html lang="en"
  class='light-style @(ViewData["navbarType"] is string navbarType ? navbarType : "") @(ViewData["menuFixed"] is string menuFixed ? menuFixed : "") @(ViewData["menuCollapsed"] is string menuCollapsed ? menuCollapsed : "") @(ViewData["contentType"] is string contentType ? contentType : "") @(ViewData["footerFixed"] is string footerFixed ? footerFixed : "") @(ViewData["customizerHidden"] is string customizerHidden ? customizerHidden : "")'
  dir="ltr" data-theme="theme-default" data-assets-path='@((httpContextAccessor.HttpContext?.Request.PathBase ?? "") + "/")'
  data-template='@(isFront ? "front-page" : (Convert.ToBoolean(TempData.Peek("menuHorizontal")?.ToString()) ? "horizontal-menu-template" : "vertical-menu-template"))'>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
             
@{
      string title = ViewData["title"] as string ?? "";
      string appName = TempData.Peek("appName") as string ?? "";
      string productPage = TempData.Peek("productPage") as string ?? "";
  }
<title>@title | @appName - Asp.Net Core Admin Template</title>
<meta name="description" content="" />

<!-- Canonical SEO -->
<link rel="canonical" href='@productPage'>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="~/img/favicon/favicon.ico" />

<!-- Core Styles -->
@await Html.PartialAsync("Layouts/Sections/_Styles" + ViewData["frontVar"])


<!-- Vendor Styles -->
@RenderSection("VendorStyles", required: false)

<!-- Page Styles -->
@RenderSection("PageStyles", required: false)

<!-- Include Scripts for customizer, helper, analytics, config -->
@await Html.PartialAsync("Layouts/Sections/_ScriptsIncludes" + ViewData["frontVar"])
</head>

<body>
<!-- Layout Content -->
@RenderBody()
<!--/ Layout Content -->

<!-- Core Scripts -->
@await Html.PartialAsync("Layouts/Sections/_Scripts" + ViewData["frontVar"])

<!-- Vendor Scripts -->
@RenderSection("VendorScripts", required: false)

<script src='~/js/@ViewData["main"]main.dist.js'></script>

<!-- Page Scripts-->
@RenderSection("PageScripts", required: false)

@if (!isFront)
{
  <script>
    feather.replace();
  </script>
}


</body>

</html>

Variables

Included variable file contains all the required variables through out the application.

TIP: Using appName and appURL variables, you can easily change the application name and URL in the whole application.

You can find this file at Pages/Layouts/Sections/_Variables.cshtml

@{
  TempData["appName"] = "Materio";
  TempData["appUrl"] = "https://themeselection.com";
  @* Footer & Misc urls *@
  TempData["authorName"] = "ThemeSelection";
  TempData["authorUrl"] = "https://themeselection.com/";
  TempData["licenseUrl"] = "https://themeselection.com/license/";
  TempData["productPage"] = "https://themeselection.com/item/materio-bootstrap-html-admin-template/";
  TempData["support"] = "https://themeselection.com/support/";
  TempData["documentation"] = "https://demos.themeselection.com/materio-bootstrap-html-admin-template/documentation/";
  TempData["twitterUrl"] = "https://twitter.com/Theme_Selection";
  TempData["instagramUrl"] = "https://www.instagram.com/themeselection/";
  TempData["githubFreeUrl"] = "https://github.com/themeselection";
  TempData["facebookUrl"] = "https://www.facebook.com/ThemeSelections/";
  TempData["dribbbleUrl"] = "https://dribbble.com/themeselection";
}

Main Partials

Styles

Included styles file contains all the core css, theme css, demo css and more..

You can find this file at Pages/Layouts/Sections/Styles.cshtml

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap" rel="stylesheet">
<environment include="Development">
  <!-- Fonts & Flag icons -->
  <link rel="stylesheet" href="~/vendor/fonts/remixicon.dist.css" />
  <link rel="stylesheet" href="~/vendor/fonts/flag-icons.dist.css" />

  <!-- Core CSS -->
  <link rel="stylesheet" href="~/vendor/css/core.dist.css" class="template-customizer-core-css" />
  <link rel="stylesheet" href="~/vendor/css/theme-default.dist.css" class="template-customizer-theme-css" />
  <link rel="stylesheet" href="~/css/demo.css" />

  <!-- `perfect-scrollbar` library required by SideNav plugin, `typeahead` required by search -->
  <link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" />
  <link rel="stylesheet" href="~/vendor/libs/typeahead-js/typeahead.dist.css" />
  <link rel="stylesheet" href="~/vendor/libs/node-waves/node-waves.dist.css" />

  <!-- Application stylesheets -->
  <link rel="stylesheet" href="~/css/site.dist.css" />
</environment>

<environment exclude="Development">
  <!-- Fonts & Flag icons -->
  <link rel="stylesheet" href="~/vendor/fonts/remixicon.dist.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/vendor/fonts/flag-icons.dist.css" asp-append-version="true" />

  <!-- Core CSS -->
  <link rel="stylesheet" href="~/vendor/css/core.dist.css" class="template-customizer-core-css" asp-append-version="true" />
  <link rel="stylesheet" href="~/vendor/css/theme-default.dist.css" class="template-customizer-theme-css" asp-append-version="true" />
  <link rel="stylesheet" href="~/css/demo.css" />

  <!-- `perfect-scrollbar` library required by SideNav plugin, `typeahead` required by search -->
  <link rel="stylesheet" href="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/vendor/libs/typeahead-js/typeahead.dist.css" asp-append-version="true" />
  <link rel="stylesheet" href="~/vendor/libs/node-waves/node-waves.dist.css" asp-append-version="true" />

  <!-- Application stylesheets -->
  <link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" />
</environment>

Head Scripts

This file includes helpers, customization, config js along with templateCustomizer initialization script :

You can find this file at Pages/Layouts/Sections/ScriptsIncludes.cshtml

<environment include="Development">
  @* Template helper js *@
  <script src="~/vendor/js/helpers.dist.js"></script>
  @* Template customizer js *@
  <script src="~/vendor/js/template-customizer.dist.js"></script>
  @* Config file contain global vars & default theme options, Set your preferred theme option in this file. *@
  <script src="~/js/config.dist.js"></script>
</environment>

<environment exclude="Development">
  <script src="~/vendor/js/helpers.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/js/template-customizer.dist.js" asp-append-version="true"></script>
  <script src="~/js/config.dist.js" asp-append-version="true"></script>
</environment>

Scripts

This file includes main js along with template related vendor scripts :

You can find this file at Pages/Layouts/Sections/Scripts.cshtml

<environment include="Development">
  <script src="~/vendor/libs/jquery/jquery.dist.js"></script>
  <script src="~/vendor/libs/popper/popper.dist.js"></script>
  <script src="~/vendor/js/bootstrap.dist.js"></script>
  <script src="~/vendor/libs/node-waves/node-waves.dist.js"></script>
  <!-- `perfect-scrollbar` library required by SideNav plugin -->
  <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js"></script>
  <!-- `hammer` required for swipe guesture -->
  <script src="~/vendor/libs/hammer/hammer.dist.js"></script>
  <!-- `i18n` required for translation -->
  <script src="~/vendor/libs/i18n/i18n.dist.js"></script>
  <!-- `typeahead` required for search fn -->
  <script src="~/vendor/libs/typeahead-js/typeahead.dist.js"></script>
  <!-- `typeahead` required for sideNav -->
  <script src="~/vendor/js/menu.dist.js"></script>
  <script src="~/js/site.dist.js"></script>
</environment>
<environment exclude="Development">
  <script src="~/vendor/libs/jquery/jquery.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/libs/popper/popper.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/js/bootstrap.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/libs/node-waves/node-waves.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/libs/hammer/hammer.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/libs/i18n/i18n.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/libs/typeahead-js/typeahead.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/js/menu.dist.js" asp-append-version="true"></script>
  <script src="~/js/site.dist.js" asp-append-version="true"></script>
</environment>

Front Partials

Styles (Front)

Included styles file contains all the core css, theme css, demo css and more..

You can find this file at Pages/Layouts/Sections/StylesFront.cshtml

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&ampdisplay=swap" rel="stylesheet">
<environment include="Development">
<!-- Fonts & Flag icons -->
<link rel="stylesheet" href="~/vendor/fonts/remixicon.dist.css" />

<!-- Core CSS -->
<link rel="stylesheet" href="~/vendor/css/core.dist.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="~/vendor/css/theme-default.dist.css" class="template-customizer-theme-css" />
<link rel="stylesheet" href="~/css/demo.css" />

<link rel="stylesheet" href="~/vendor/libs/node-waves/node-waves.dist.css" />
<link rel="stylesheet" href="~/vendor/css/pages/front-page.dist.css" />

<!-- Application stylesheets -->
<link rel="stylesheet" href="~/css/site.dist.css" />
</environment>

<environment exclude="Development">
<!-- Fonts & Flag icons -->
<link rel="stylesheet" href="~/vendor/fonts/remixicon.dist.css"  asp-append-version="true" />

<!-- Core CSS -->
<link rel="stylesheet" href="~/vendor/css/core.dist.css" class="template-customizer-core-css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/css/theme-default.dist.css" class="template-customizer-theme-css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/demo.css" />

<link rel="stylesheet" href="~/vendor/libs/node-waves/node-waves.dist.css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/css/pages/front-page.dist.css" asp-append-version="true" />

<!-- Application stylesheets -->
<link rel="stylesheet" href="~/css/site.dist.css" asp-append-version="true" />
</environment>

Head Scripts (Front)

This file includes helpers, customization, config js along with templateCustomizer initialization script :

You can find this file at Pages/Layouts/Sections/ScriptsIncludesFront.cshtml

@* Template helper js *@
<script src="~/vendor/js/helpers.dist.js"></script>
@* Template customizer js *@
<script src="~/vendor/js/template-customizer.dist.js"></script>
@* Config file contain global vars & default theme options, Set your preferred theme option in this file. *@
<script src='~/js/front-config.dist.js'></script>

<script src="~/vendor/js/dropdown-hover.dist.js"></script>
<script src="~/vendor/js/mega-dropdown.dist.js"></script>
</environment>

<environment exclude="Development">
<script src="~/vendor/js/helpers.dist.js" asp-append-version="true"></script>
<script src="~/vendor/js/template-customizer.dist.js" asp-append-version="true"></script>
<script src='~/js/front-config.dist.js' asp-append-version="true"></script>

<script src="~/vendor/js/dropdown-hover.dist.js" asp-append-version="true"></script>
<script src="~/vendor/js/mega-dropdown.dist.js" asp-append-version="true"></script>
</environment>

Scripts (Front)

This file includes main js along with template related vendor scripts :

You can find this file at Pages/Layouts/Sections/ScriptsFront.cshtml

<environment include="Development">
  <script src="~/vendor/libs/popper/popper.dist.js"></script>
  <script src="~/vendor/js/bootstrap.dist.js"></script>
  <!-- node-waves required for animation on button click -->
  <script src="~/vendor/libs/node-waves/node-waves.dist.js"></script>
  <script src="~/js/site.dist.js"></script>
</environment>
<environment exclude="Development">
  <script src="~/vendor/libs/popper/popper.dist.js" asp-append-version="true"></script>
  <script src="~/vendor/js/bootstrap.dist.js" asp-append-version="true"></script>
  <!-- node-waves required for animation on button click -->
  <script src="~/vendor/libs/node-waves/node-waves.dist.js" asp-append-version="true"></script>
  <script src="~/js/site.dist.js" asp-append-version="true"></script>
</environment>

Layout Usage

You can set the layout in two ways:

Layout for the entire app - set Layout property in the Pages/_ViewStart.cshtml file.
Layout for the specific page - set Layout property in the .cshtml file.

For ex. We have added custom options in LayoutExample pages

You can find Navbar, Sidebar and Footer templates in the Pages/Layouts/Sections directory.

@{
  Layout = "Layouts/_ContentNavbarLayout";
}

@{
  Layout = "Layouts/_ContentNavbarLayout";
  ViewData["isFlex"] = (ViewData["isFlex"] ??= true);
}
<div class="flex-shrink-1 flex-grow-0 w-px-350 border-end container-p-x container-p-y">
  <div class="layout-example-sidebar layout-example-content-inner">
    Sidebar
  </div>
</div>

<div class="flex-shrink-1 flex-grow-1 container-p-x container-p-y">
  <!-- Layout Demo -->
  <div class="layout-demo-wrapper">
    <h4>Layout content navbar + sidebar</h4>
    <p>Container layout sets a <code>max-width</code> at each responsive breakpoint.</p>
  </div>
  <!--/ Layout Demo -->
</div>

@{
  Layout = "Layouts/_HorizontalLayout";
}

@{
  Layout = "Layouts/_ContentNavbarLayout";
  ViewData["navbarHideToggle"] = true;
  ViewData["isMenu"] = false;
}

@{
  Layout = "Layouts/_ContentNavbarLayout";
  ViewData["isNavbar"] = false;
}

@{
  Layout = "Layouts/_ContentNavbarLayout";
  ViewData["container"] = (ViewData["container"] ?? "container-fluid");
  ViewData["containerNav"] = (ViewData["containerNav"] ?? "container-fluid");
}

@{
  Layout = "Layouts/_ContentNavbarLayout";
}

Layout Options

Layout options are useful to create layout with custom options as per different layout examples. You can add this options at page level or layout level as well.

Find all the layout options with it's value below :

Data Options	DataType	Data Values
`TempData["menuHorizontal"]`	Boolean	true \| false
`ViewData["container"]`	String	"container-fluid" \| "container-xxl"
`ViewData["containerNav"]`	String	"container-fluid" \| "container-xxl"
`ViewData["customizerHidden"]`	String	"customizer-hide"
`ViewData["footerFixed"]`	String	"layout-footer-fixed"
`ViewData["menuCollapsed"]`	String	"layout-menu-collapsed"
`ViewData["menuFixed"]`	String	"layout-menu-fixed"
`ViewData["navbarType"]`	String	"layout-navbar-fixed"
`ViewData["contentNavbar"]`	Boolean	true \| false
`ViewData["isFlex"]`	Boolean	true \| false
`ViewData["isMenu"]`	Boolean	true \| false
`ViewData["isNavbar"]`	Boolean	true \| false
`ViewData["navbarFull"]`	Boolean	true \| false
`ViewData["navbarHideToggle"]`	Boolean	true \| false
`ViewData["isFront"]`	Boolean	true \| false
`ViewData["contentType"]`	String	"container-fluid" \| "container-xxl"

Dark Layout

To set default layout to dark layout, just need to update wwwroot\js\config.js file's defaultStyle option :

if (typeof TemplateCustomizer !== 'undefined') {
  window.templateCustomizer = new TemplateCustomizer({
    ...
    defaultStyle: 'dark',
    ...
  });
}

Make sure you clear the browser local storage In order to see the config changes in the template.
Find more config options from here. Just make sure, you update config.js file from wwwroot\js\ folder.

RTL

To set default layout to RTL layout, just need to update wwwroot\js\config.js file's defaultTextDir option :

if (typeof TemplateCustomizer !== 'undefined') {
  window.templateCustomizer = new TemplateCustomizer({
    ...
    defaultTextDir: 'rtl',
    ...
  });
}