WebPx.AdminLTE.AspNetCore

AdminLTE 3 Template Razor Class Libraries for ASP.NET Core

Based on AdminLTE 3 Template by https://adminlte.io/, we decided to provide a ready to run versión adapted to ASP.NET Core Razor Pages

ColorLib's Html Template Live Demo: https://adminlte.io/themes/dev/AdminLTE/index.html

WebPx Live Demo: Demo.AdminLTE3.WebPx.com

Features

• Razor Class Library with Views required to function the template
• Split in Views so that it allows to replace one or more parts for the whole site, any area or folder
• Configuration for adjusting which features you wan't to be called.
• SideBar collapsible and persistent for the user
• Layout includes various sections for extensibility
  • Header, for links and metadata
  • ThemeLinks, for replacing links to AdminLTE3 CSS files
  • PageEnd, for extra html at the end of the page, before scripts
  • Scripts, for additional javascript files/blocks
• NEW! Two Libraries with Static Content:
  • WebPx.AdminLTE.AspNetCore.Statics contains all the files that the template includes (js, dist, plugins and Admin LTE Theme)
  • WebPxAdminLTE.AspNetCore.Statics.Shared contains the pictures and scripts included in the original theme for displaying demo daa
• NEW! Breaking Change: Views have been changed from /Pages/Shared/AdminLTE3 to /Views/Shared/AdminLTE3 so that it can be shared between MVC and Razor Pages.

Folder Structure

The Template includes the Layout File (_Layout), and various Partial Views that you can replace to adjust your application. NEW! For flexibility in area development you can also change this files in the corresponding /Area/[AreaName]/Views/Shared/AdminLTE3 folder so that customization applies per area.

/Views
    /Shared
        /AdminLTE3
            _Layout.cshtml
            Aside.cshtml
            Brand.cshtml
            Breadcrumbs.cshtml
            Footer.cshtml
            LeftMenu.cshtml
            MsgsDropDown.cshtml
            NavBar.cshtml
            NavBarLinks.cshtml
            Notifacations.cshtml
            Search.cshtml
            SideBar.cshtml
            UserPanel.cshtml

Partial Views

Name | Description -----|------------ Aside | Aside Panel for setting up page of the right hand side Brand | Provides Logo and Name of the application Breadcrumbs | Shows a basic bread crumbs html for the root and the current page Footer | Shows the copyright for the current site. Refer to ----- for settings your Site Name and Copyright text LeftMenu | The main navigation menu on the left hand side MsgsDropDown | Placeholder for the Messages Drop Down NavBar | Contains the Top Navigation Bar with the Hamburger button, NavBarLinks & Search form NavBarLinks | The Links that are shown in the Top Navigation Bar Notifications | Placeholder for the Notifications Drop Down Search | the Search Form SideBar | The main container for the UserPanel & LeftMenu UserPanel | Shows the User picture and Name

Installation

You can add this template to your ASP.NET Core Web App, by adding the WebPx.AdminLTE.AspNetCore nuget package.

Microsoft VisualStudio 20017/2019

Install-Package WebPx.AdminLTE.AspNetCore

Microsoft VisualStudio Code

dotnet add package WebPx.AdminLTE.AspNetCore

Configure

Add to your Startup class:

services.AddAdminLTE();
services.AddAdminLTEStatics();

Customize how the template works:

services.AddAdminLTE((o) => {
    o.SiteName = "Demo Site";              // Site Name
    o.SiteLogo = "/logo.png";              // Site Logo Path
    o.SearchPath = "/Search";              // Url to the Search Result's page
    o.Location = "AdminLITE3";             // Folder Name for the template (For future use)
    o.Aside = true;                        // Show/Hide Aside Menu
    o.Breadcrumbs = true;                  // Show/Hide Breadcrumbs
    o.Message = true;                      // Show/Hide Messages Drop Down;
    o.NavBarLinks = true;                  // Show/Hide Top Nav Bar Links
    o.Footer = true;                       // Show/Hide Footer
    o.SideBarCollapsed = true;             // Show/Hide Side Bar Collapsed
    o.Search = true;                       // Show/Hide Search Field
    o.UserPanel = true;                    // Show/Hide User Panel
    o.StaticsPath = "//cdn.site.com/"      // URL for reusing static content from a common location
    o.MessagesUrl = "/Messages";           // Url to the page to view messages
    o.NotificationsUrl = "/Notifications"; // Url to the page to view notifications
});

Next Steps

• Improve documentation
• Create project templates to start from scratch with the template
• Create item templates for the partial views
• Create a Wizard for Visual Studio
• Package it as a VSIX/Visual Studio Extension