“ASP.NET Core 3.1 MVC Version” Documentation by “Sean Ngu” v4.7
Last Updated: 25/October/2020
By: Sean Ngu
Email: nguoksiong@live.co.uk
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!
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/template_asp/ColorAdmin/ donet run
If you are using visual studio, just double click the ColorAdmin.sln inside the template folder. You may download the latest version of Visual studio from here.
Copy over the required image from global assets folder
<!-- copy the following folder--> /admin/template/assets/img <!-- paste it into asp folder --> /admin/template/template_asp/ColorAdmin/wwwroot/img
File structure overview for .NET Core 3.1 MVC Version
template_asp/
├── ColorAdmin.sln
└── ColorAdmin/
├── 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
└── ColorAdmin.csproj
Below is the general page structure for /Views/Shared/Layout.cshtml.
<!DOCTYPE html>
<html lang="en" @ViewData["HtmlAttribute"]>
<head>
<meta charset="utf-8" />
<title>Color Admin | @ViewData["Title"]</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="@ViewData["MetaDescription"]" />
<meta name="author" content="@ViewData["MetaAuthor"]" />
<meta name="keywords" content="@ViewData["MetaKeywords"]" />
@RenderSection("MetaTag", required: false)
<!-- ================== BEGIN core-css ================== -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<link href="~/css/default/app.min.css" rel="stylesheet" />
<!-- ================== END core-css ================== -->
@RenderSection("Styles", required: false)
</head>
<body class="@ViewData["BodyClass"]">
<!-- begin #page-container -->
<div id="page-container" class="page-container fade page-sidebar-fixed @(ViewData["PageWithoutHeader"] == null ? "page-header-fixed" : "") @ViewData["PageContainerClass"]">
@if (ViewData["PageWithoutHeader"] == null) {
<partial name="_Header" />
}
@if (ViewData["PageWithTopMenu"] != null) {
<partial name="_TopMenu" />
}
@if (ViewData["PageWithoutSidebar"] == null) {
<partial name="_Sidebar" />
}
@if (ViewData["PageWithTwoSidebar"] != null) {
<partial name="_SidebarRight" />
}
@if (ViewData["PageWithoutContainer"] == null) {
<div id="content" class="content @ViewData["PageContentClass"]" @ViewData["PageContentAttribute"]>
@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["PageWithFooter"] != null) {
<partial name="_Footer" />
}
</div>
<!-- ================== BEGIN core-js ================== -->
<script src="~/js/app.min.js"></script>
<script src="~/js/theme/default.min.js"></script>
<!-- ================== END core-js ================== -->
@RenderSection("Scripts", required: false)
</body>
</html>
All the css files used in ColorAdmin 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.
Page Without Sidebar
@{
ViewData["PageContainerClass"] = "page-without-sidebar";
}
Page With Two Sidebar
@{
ViewData["PageContainerClass"] = "page-with-two-sidebar";
ViewData["PageWithTwoSidebar"] = "true";
}
Page With Footer
@{
ViewData["PageWithFooter"] = "true";
}
Full Height Page
@{
ViewData["PageContainerClass"] = "page-content-full-height";
}
Page With Top Menu
@{
ViewData["PageWithTopMenu"] = "true";
}
Page Without Container
@{
ViewData["PageWithoutContainer"] = "true";
}
Sidebar minified
@{
ViewData["PageContainerClass"] = "page-sidebar-minified";
}
If you wish to enable the gulp compilation during debug / release process, kindly enable the following option in ColorAdmin.csproj.
node_module folder.
// remove the comment syntax <!-- <Target Name="MyPreCompileTarget" BeforeTargets="Build"> <Exec Command="gulp" /> </Target> -->
Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website.
https://www.npmjs.com/package/reactstrap
{
"name": "color-admin-default-theme",
"version": "4.7.0",
"description": "Color Admin - Default Theme",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "SeanTheme",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-csso": "^4.0.1",
"gulp-download-stream": "0.0.19",
"gulp-file-include": "^2.2.2",
"gulp-header": "^2.0.9",
"gulp-less": "^4.0.1",
"gulp-livereload": "^4.0.2",
"gulp-sass": "^4.1.0",
"gulp-sass-variables": "^1.2.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2"
},
"dependencies": {
"@danielfarrell/bootstrap-combobox": "^1.1.8",
"@fortawesome/fontawesome-free": "^5.15.0",
"@fullcalendar/bootstrap": "^5.3.1",
"@fullcalendar/core": "^5.3.1",
"@fullcalendar/daygrid": "^5.3.2",
"@fullcalendar/interaction": "^5.3.1",
"@fullcalendar/list": "^5.3.1",
"@fullcalendar/timegrid": "^5.3.1",
"abpetkov-powerange": "github:npmcomponent/abpetkov-powerange",
"angular": "^1.8.0",
"angular-ui-bootstrap": "^2.5.6",
"angular-ui-router": "^1.0.28",
"animate.css": "^4.1.1",
"apexcharts": "^3.22.0",
"blueimp-file-upload": "^10.31.0",
"blueimp-gallery": "^3.3.0",
"bootstrap": "^4.5.2",
"bootstrap-colorpicker": "^3.2.0",
"bootstrap-datepicker": "^1.9.0",
"bootstrap-daterangepicker": "^3.1.0",
"bootstrap-select": "^1.13.18",
"bootstrap-show-password": "^1.2.1",
"bootstrap-social": "^5.1.1",
"bootstrap-timepicker": "^0.5.2",
"bootstrap3-wysihtml5-bower": "^0.3.3",
"chart.js": "^2.9.3",
"ckeditor": "^4.12.1",
"clipboard": "^2.0.6",
"d3": "^3.5.17",
"datatables.net": "^1.10.22",
"datatables.net-autofill-bs4": "^2.3.5",
"datatables.net-bs4": "^1.10.22",
"datatables.net-buttons-bs4": "^1.6.4",
"datatables.net-colreorder-bs4": "^1.5.2",
"datatables.net-fixedcolumns-bs4": "^3.3.2",
"datatables.net-fixedheader-bs4": "^3.1.7",
"datatables.net-keytable-bs4": "^2.5.3",
"datatables.net-responsive-bs4": "^2.2.6",
"datatables.net-rowreorder-bs4": "^1.2.7",
"datatables.net-scroller-bs4": "^2.0.3",
"datatables.net-select-bs4": "^1.3.1",
"dropzone": "^5.7.2",
"eonasdan-bootstrap-datetimepicker": "^4.17.47",
"flag-icon-css": "^3.5.0",
"flot": "^4.2.1",
"gritter": "^1.7.4",
"intro.js": "^2.9.3",
"ion-rangeslider": "^2.3.1",
"isotope-layout": "^3.0.6",
"jquery": "^3.5.1",
"jquery-knob": "^1.2.11",
"jquery-migrate": "^3.3.1",
"jquery-mockjax": "^2.6.0",
"jquery-simplecolorpicker": "^0.3.1",
"jquery-slimscroll": "^1.3.8",
"jquery-sparkline": "^2.4.0",
"jquery-ui-dist": "^1.12.1",
"jquery.maskedinput": "^1.4.1",
"js-cookie": "^2.2.1",
"jstree": "^3.3.10",
"jszip": "^3.5.0",
"jvectormap-next": "^3.1.1",
"lightbox2": "^2.11.3",
"lity": "^2.4.1",
"merge-stream": "^2.0.0",
"moment": "^2.29.0",
"nvd3": "^1.8.6",
"oclazyload": "^1.1.0",
"pace-js": "^1.0.2",
"parsleyjs": "^2.9.2",
"pdfmake": "^0.1.68",
"popper.js": "^1.16.1",
"pwstrength-bootstrap": "^3.0.9",
"raphael": "^2.3.0",
"select2": "^4.0.13",
"simple-line-icons": "^2.5.5",
"smartwizard": "^5.1.1",
"summernote": "^0.8.18",
"sweetalert": "^2.1.2",
"swiper": "^6.3.2",
"tag-it": "^2.0.0",
"x-editable-bs4": "^1.5.4"
}
}