This template is based from AdminLTE of http://almsaeedstudio.com. Converted as a .Net project.
as a minimum, you should have the following installed
- Visual Studio 2019
_built using .NET Core 3
Just clone or fork this. Whatever you want. Restore client side libraries. Run the solution.
see below the body of _Layouts.cshtml
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
@await Component.InvokeAsync("Header")
<!-- Left side column. contains the logo and sidebar -->
@await Component.InvokeAsync("Sidebar")
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
@await Component.InvokeAsync("PageHeader")
</div>
<div class="col-sm-6">
@await Component.InvokeAsync("Breadcrumb")
</div>
<br />
@await Component.InvokeAsync("PageAlert")
</div>
</div>
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
@RenderBody()
</section>
<!-- /.content -->
</div>
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
@await Component.InvokeAsync("Footer")
<!-- Control Sidebar -->
@await Component.InvokeAsync("ControlSidebar")
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
</aside>
</div>
<!-- ./wrapper -->
<!-- Optionally, you can add Slimscroll and FastClick plugins.
Both of these plugins are recommended to enhance the
user experience. Slimscroll is required when using the
fixed layout. -->
@RenderSection("scripts", required: false)
<script>
useSubmitClass();
</script>
</body>- Header
- Notification
- Messages
- Task
- User Profile
- Footer
- SideBar
- ControlSideBar (converted to HelpBar)
- PageHeader
- Breadcrumb
- Login & Logout
- Error Page
- Registration*
Typically, you should inherit your Controller from BaseController.cs to enable convenience helpers.
PageHeader Title & Description
declaration:
AddPageHeader(string pageHeader = "", string pageDescription = "")
usage:
AddPageHeader("Dashboard", "");Page Alerts
declaration:
AddPageAlerts(PageAlertType pageAlertType, string description)
usage:
AddPageAlerts(PageAlertType.Info, "you may view the summary <a href='#'>here</a>");Page Breadcrumb
declaration:
AddBreadcrumb(string displayName, string urlPath)
usage:
AddBreadcrumb("Register", "/Account/Register");
AddBreadcrumb("Contact", "/Account/Contact");Sidebar Menus
var sidebars = new List<SidebarMenu>();
sidebars.Add(ModuleHelper.AddHeader("MAIN NAVIGATION"));
sidebars.Add(ModuleHelper.AddModule(ModuleHelper.Module.Home));
sidebars.Add(ModuleHelper.AddModule(ModuleHelper.Module.Error, Tuple.Create(0, 0, 1)));
sidebars.Add(ModuleHelper.AddModule(ModuleHelper.Module.About, Tuple.Create(0, 1, 0)));
sidebars.Add(ModuleHelper.AddModule(ModuleHelper.Module.Contact, Tuple.Create(1, 0, 0)));
sidebars.Add(ModuleHelper.AddTree("Account"));
sidebars.Last().TreeChild = new List<SidebarMenu>()
{
ModuleHelper.AddModule(ModuleHelper.Module.Login),
ModuleHelper.AddModule(ModuleHelper.Module.Register, Tuple.Create(1, 1, 1)),
};The above code will create a hierarchical sidebar like...
>
> LABEL
> LINK 1
> LINK 1
> LINK 1
> TREE
> > LINK
> > LINK 1|1|1
...where 1 is the notification color at the right side of the link via Tuple. Tuple 0 will not display the notification whereas the position of the items will display its corresponding color notification
Menu Notification
This implementation is almost the same with Menu Task and Menu Message.
public class MenuNotificationViewComponent : ViewComponent
{
public MenuNotificationViewComponent()
{
}
public IViewComponentResult Invoke(string filter)
{
var messages = GetData();
return View(messages);
}
private List<Message> GetData()
{
var messages = new List<Message>();
messages.Add(new Message
{
Id = 1,
FontAwesomeIcon = "fa fa-users text-aqua",
ShortDesc = "5 new members joined today",
URLPath = "#",
});
return messages;
}
}Help Pane
You can add page help or quick links/info by adding [HelpDefinition] attribute above the IActionResult method
public class HomeController : BaseController
{
[HelpDefinition]
public IActionResult Index()
{
return View();
}You can still specify a filename as parameter in case you want to retrieve it on the wwwroot/files/Shared folder.
[HelpDefinition("helpdefault")]
public IActionResult Contact()
{By default, no arguments will get the path via ControllerName\CallerMethod which have the equivalent path to wwwroot/files/{ControllerName}/{CallerMethod}.html
- Submit Button - disabled when click once. Auto add progress spinner. No additional codes required for that implementation.
Usage: You just simply declare the submit button. The script name is
useSubmitClass
<form asp-controller="Home" asp-action="Index" method="post">
<button class="btn btn-sm btn-primary" type="submit">Submit</button>
</form>- Sidebar Collapse/ Expand
- The sidebar will save the expand & collapse state thru cookie. Using
Mozilla cookie helper.
The cookie name is
sidebarstate
- DataTable
- ...more to follow
The project implements middleware that audits user login activity upon login, logout & failed login
The project gives some insight on how to implement extended user properties via Claims
The project provides middleware to log per HTTP request.
This uses templated individual authentication and customized ErrorPage & LoginPage.
It also uses dependency injection that requires controllers by default to be [Authorized]
without typing them on each controller/method
See MIT License