v1.1
Bootstrap 4 responsive admin template
documented by Sean Ngu
Download the .NET Core SDK from official website and install on your machine.
If you are using dotnet cli, run the following command:
cd /your-path-url/asp_studio_v1.0/template_startup/AspStudio/ donet run
If you are using visual studio, just double click the AspStudio.sln inside the template folder. You may download the latest version of Visual studio from here.
File structure overview for AspStudio - .NET Core 3.1 MVC
template_startup/
├── AspStudio.sln
└── AspStudio/
├── bin/
├── obj/
├── Controllers/
├── Models/
├── Properties/
├── Views/
├── src/ // scss / img / js source file
├── wwwroot/ // generated css / js / img file
├── gulpfile.js // gulp setting files
├── appsettings.development.json
├── appsettings.json
├── package.json
├── sidebar.json // sidebar menu structure
├── Program.cs
├── Startup.cs
└── AspStudio.csproj
Below is the general page structure for /Views/Shared/Layout.cshtml.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AspStudio | @ViewData["Title"]</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- ================== BEGIN core-css ================== -->
<link href="~/css/app.min.css" rel="stylesheet" />
<!-- ================== END core-css ================== -->
@RenderSection("Styles", required: false)
</head>
<body class="@ViewData["BodyClass"]">
<!-- BEGIN #app -->
<div id="app" class="app @ViewData["AppClass"]">
@if (ViewData["AppWithoutHeader"] == null)
{
<partial name="_Header" />
}
@if (ViewData["AppWithoutSidebar"] == null)
{
<partial name="_Sidebar" />
}
@if (ViewData["AppWithoutContainer"] == null)
{
<div id="content" class="app-content @ViewData["AppContentClass"]">
@RenderBody()
<!-- BEGIN btn-scroll-top -->
<a href="#" data-click="scroll-top" class="btn-scroll-top fade">
<i class="fa fa-arrow-up"></i>
</a>
<!-- END btn-scroll-top -->
</div>
}
else
@RenderBody()
<!-- BEGIN btn-scroll-top -->
<a href="#" data-click="scroll-top" class="btn-scroll-top fade">
<i class="fa fa-arrow-up"></i>
</a>
<!-- END btn-scroll-top -->
}
@RenderSection("OutterAppContainerContent", required: false)
@if (ViewData["AppWithFooter"] != null)
{
<partial name="_Footer" />
}
</div>
<!-- ================== BEGIN core-js ================== -->
<script src="~/js/app.min.js"></script>
<!-- ================== END core-js ================== -->
@RenderSection("Scripts", required: false)
</body>
</html>
Below is the list of supported variable / setting in shared page.
| Variable | Usage |
|---|---|
ViewData["HtmlAttribute"] |
Set the attribute for html tag |
ViewData["MetaDescription"] |
Set the variable for meta description |
ViewData["MetaAuthor"] |
Set the variable for meta author |
ViewData["MetaKeywords"] |
Set the variable for meta keywords |
ViewData["Title"] |
Set the page title for individual page |
ViewData["BodyClass"] |
Add css class to the body tag |
ViewData["AppClass"] |
Add css class to the .app container |
ViewData["AppContentClass"] |
Add css class to the .app-content container |
ViewData["AppWithoutHeader"] |
Set to false if you wish to remove header |
ViewData["AppWithoutSidebar"] |
Set to false if you wish to remove sidebar |
ViewData["AppWithoutContainer"] |
Set to false if you wish to render the page content without .app-content container |
ViewData["AppWithFooter"] |
Set to true if you wish to add the footer to the page |
Below is the list of supported section in shared page.
| Section | Usage |
|---|---|
@section MetaTag { |
A way to add extra meta tag in individual page |
@section Styles { |
A way to add extra css files in individual page |
@section Scripts { |
A way to add extra js files in individual page |
@section OutterAppContainerContent { |
A way to put the content outside .app container |
All the css files used in AspStudio has been compiled into one single files app.min.css by using gulp. Below is the list of library included in app.min.css. You may change the setting in gulpfile.js if you wish to add / remove library from app.min.css.
This theme compiles 7 javascript library into one single file app.min.js by using gulp. Below is the list of library included in app.min.js. You may change the setting in gulpfile.js if you wish to add / remove library from app.min.js.
Sidebar minified:
@{
ViewData["AppClass"] = "app-sidebar-minified";
}
Full height:
@{
ViewData["AppClass"] = "app-content-full-height";
}
Full width:
@{
ViewData["AppClass"] = "app-content-full-width";
ViewData["AppWithoutSidebar"] = true;
}
Fixed footer:
@{
ViewData["AppClass"] = "app-footer-fixed";
ViewData["AppWithFooter"] = true;
}
Boxed Layout
@{
ViewData["BodyClass"] = "app-with-bg";
ViewData["AppClass"] = "app-boxed-layout";
}
If you wish to enable the gulp compilation during debug / release process, kindly enable the following option in AspStudio.csproj.
node_module folder.
// remove the comment syntax <!-- <Target Name="MyPreCompileTarget" BeforeTargets="Build"> <Exec Command="gulp" /> </Target> -->
I've used the following images, icons or other files as listed.
Platform
jQuery Plugins
Photos
Icons