_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";
}
@await Html.PartialAsync("Layouts/Sections/_Variables")
@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>
Included variable file contains all the required variables through out the application.
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"] = "Vuexy";
TempData["appUrl"] = "https://pixinvent.com";
@* Footer & Misc urls *@
TempData["authorName"] = "Pixinvent";
TempData["authorUrl"] = "https://pixinvent.com/";
TempData["licenseUrl"] = "https://themeforest.net/licenses/standard";
TempData["productPage"] = "https://1.envato.market/pixinvent_portfolio";
TempData["support"] = "https://pixinvent.ticksy.com/";
TempData["documentation"] = "https://demos.pixinvent.com/vuexy-html-admin-template/documentation/net-core-introduction.html";
TempData["twitterUrl"] = "https://twitter.com/pixinvents";
TempData["instagramUrl"] = "https://www.instagram.com/pixinvents/";
TempData["githubFreeUrl"] = "https://github.com/pixinvent";
TempData["facebookUrl"] = "https://www.facebook.com/pixinvents/";
}
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=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<environment include="Development">
<!-- Fonts & Flag icons -->
<link rel="stylesheet" href="~/vendor/fonts/fontawesome.dist.css" />
<link rel="stylesheet" href="~/vendor/fonts/tabler-icons.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/tabler-icons.dist.css" asp-append-version="true" />
<link rel="stylesheet" href="~/vendor/fonts/fontawesome.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>
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>
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>
<!-- `perfect-scrollbar` library required by SideNav plugin -->
<script src="~/vendor/libs/perfect-scrollbar/perfect-scrollbar.dist.js"></script>
<!-- node-waves required for animation on button click -->
<script src="~/vendor/libs/node-waves/node-waves.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/perfect-scrollbar/perfect-scrollbar.dist.js" asp-append-version="true"></script>
<script src="~/vendor/libs/node-waves/node-waves.dist.js"></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>
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=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<environment include="Development">
<!-- Fonts & Flag icons -->
<link rel="stylesheet" href="~/vendor/fonts/tabler-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" />
<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/tabler-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" />
<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>
This file includes helpers, customization, config js along with templateCustomizer initialization script :
You can find this file at Pages/Layouts/Sections/ScriptsIncludesFront.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/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>
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>
<script src="~/vendor/libs/node-waves/node-waves.dist.js"></script>
<script src="~/js/site.dist.js" asp-append-version="true"></script>
</environment>
You can set the layout in two ways:
Layout
property in the Pages/_ViewStart.cshtml
file.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 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" |
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',
...
});
}
wwwroot\js\
folder.
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',
...
});
}
wwwroot\js\
folder.