v1.0ASP.NET Core MVC responsive admin template
documented by Sean Ngu
UPDATED ON: 05/April/2026
BY: Sean Ngu
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!
CYBER ASP.NET is built with ASP.NET Core MVC and includes an npm-based asset build process. Open the project folder, install dependencies, generate plugins, build the assets, and then run the application with the .NET SDK.
cd /your-path-url/template_asp/ npm install npm run generate:plugins npm run build dotnet restore dotnet run
After the application starts, open the local URL shown in the terminal output. Static files such as CSS,
JavaScript, images, and vendor plugins are served from the wwwroot folder.
Make sure you are running the .NET 10 SDK or later because this project targets net10.0.
The main application project in this package is Cyber.csproj.
File structure overview for CYBER ASP.NET Core MVC.
template/ ├── Cyber.csproj // ASP.NET Core project file ├── Program.cs // Application startup and middleware ├── Controllers/ // MVC controllers and route handlers ├── Models/ // View models and domain models ├── Services/ // Shared application services ├── Views/ // Razor views and shared partials │ ├── Shared/ // _Layout and reusable partial views │ └── Home/ // Page views such as Index.cshtml └── wwwroot/ // Static assets (css, js, plugins, images)
Below is the general Razor layout structure used by the ASP.NET version. Core CSS and JavaScript files are loaded from /wwwroot/assets/.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CYBER | @@(ViewData["Title"] ?? "Dashboard")</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- ================== BEGIN core-css ================== -->
<link href="/assets/plugins/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
<link href="/assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
<link href="/assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
<link href="/assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
<!-- ================== END core-css ================== -->
<!-- ================== BEGIN core-js ================== -->
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
<script src="/assets/plugins/jquery/dist/jquery.min.js"></script>
<script src="/assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>
<script src="/assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
<script src="/assets/plugins/js-cookie/dist/js.cookie.min.js"></script>
<!-- ================== END core-js ================== -->
@@RenderSection("Styles", required: false)
<script type="module" crossorigin src="/assets/js/app.min.js"></script>
<link rel="stylesheet" crossorigin href="/assets/css/app.min.css" />
</head>
<body>
@@await Html.PartialAsync("_AppLoader")
@@await Html.PartialAsync("_AppCover")
@@RenderBody()
@@RenderSection("Scripts", required: false)
</body>
</html>
Each page is rendered from a controller action and a matching Razor view. Shared UI blocks such as the header, sidebar, loader, and footer are split into partial views inside Views/Shared.
All core styles used by CYBER are loaded from the compiled stylesheet
app.min.css.
In the ASP.NET version, the layout file includes the required vendor CSS and the main application stylesheet for all pages.
<link href="/assets/plugins/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="/assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /> <link href="/assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="/assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" /> <link rel="stylesheet" crossorigin href="/assets/css/app.min.css" />
For page-specific styles, add a Razor Styles section inside the view.
All public CSS files should be stored under:
/wwwroot/assets/css
Usage in Razor layout:
<!-- core lib css file --> <link href="/assets/plugins/%40fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="/assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /> <link href="/assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="/assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" /> <!-- core app css file --> <link rel="stylesheet" crossorigin href="/assets/css/app.min.css" />
All required JavaScript files are loaded globally from the shared layout.
The main application script is app.min.js and it is served from the wwwroot/assets/js folder.
<script src="/assets/plugins/jquery/dist/jquery.min.js"></script> <script src="/assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="/assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> <script src="/assets/plugins/js-cookie/dist/js.cookie.min.js"></script> <script type="module" crossorigin src="/assets/js/app.min.js"></script>
For page-specific JavaScript, add a Razor Scripts section inside the view.
All public JavaScript files should be stored under:
/wwwroot/assets/js
Usage in Razor layout:
<!-- core lib js file --> <script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script> <script src="/assets/plugins/jquery/dist/jquery.min.js"></script> <script src="/assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="/assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> <script src="/assets/plugins/js-cookie/dist/js.cookie.min.js"></script> <!-- core app js file --> <script type="module" crossorigin src="/assets/js/app.min.js"></script>
Sidebar collapsed:
<div id="app" class="app app-sidebar-collapsed">
@@await Html.PartialAsync("_AppHeader")
@@await Html.PartialAsync("_AppSidebar")
<div id="appContent" class="app-content">...</div>
</div>
Full height:
<div id="app" class="app app-content-full-height">
...
<div id="content" class="app-content" data-scrollbar="true" data-height="100%">
...
</div>
</div>
Full width:
<div id="app" class="app app-content-full-width"> ... </div>
Fixed footer:
<div id="app" class="app app-footer-fixed">
...
<div id="footer" class="app-footer">
© 2026 seanTheme All Right Reserved
</div>
</div>
Boxed Layout
<div id="app" class="app app-boxed-layout"> ... </div>
Top Nav (without Sidebar)
<div id="app" class="app app-with-top-nav app-without-sidebar">
@@await Html.PartialAsync("_AppHeaderTopNav")
@@await Html.PartialAsync("_AppTopNav")
<div id="appContent" class="app-content">...</div>
</div>
Top Nav (with Sidebar)
<div id="app" class="app app-with-top-nav">
@@await Html.PartialAsync("_AppHeaderTopNav")
@@await Html.PartialAsync("_AppTopNav")
@@await Html.PartialAsync("_AppSidebar")
<div id="appContent" class="app-content">...</div>
</div>
Boxed Layout with Top Nav & Sidebar
<div id="app" class="app app-with-top-nav app-boxed-layout"> ... </div>
Add the theme class to the <body> tag in order to change the theme color.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-white">...</body> <body class="theme-gray-100">...</body> <body class="theme-gray-200">...</body> <body class="theme-gray-300">...</body> <body class="theme-gray-400">...</body> <body class="theme-gray-500">...</body> <body class="theme-gray-600">...</body> <body class="theme-gray-700">...</body> <body class="theme-gray-800">...</body> <body class="theme-gray-900">...</body>
To enable RTL mode, add the following code to your layout html tag:
<html dir="rtl">
Application Startup
The Program.cs file configures services, middleware, static files, error handling, and controller routing.
The shared Razor layout is defined in Views/Shared/_Layout.cshtml and the default layout assignment is configured in Views/_ViewStart.cshtml.
// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSingleton<SidebarMenuService>();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.MapControllers();
// Views/_ViewStart.cshtml
@{
Layout = "_Layout";
}
I've used the following images, icons or other files as listed.
jQuery Plugins
Photos