Docs v1.6.0  /  ASP.NET MVC HTML5 Angular Vue.js React Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core ASP.NET Core MVC ASP.NET MVC + Webpack
OTHER
Settings panel Layout helpers

Instructions can vary depending on whatever you use theme settings panel or not. Please select the appropriate version.

aspnet-mvc-starter directory structure

aspnet-mvc-starter
AspnetMvcStarter
App_Start
BundleConfig.cs
...
Content
Application stylesheets
main.scss
Controllers
Models
Properties
Scripts
Application javascripts
main.js
Vendor
Appwork's sources
css
CSS sources
_appwork
Appwork includes
_custom-variables
Custom variables
_theme
Theme includes
_uikit
UIKit includes
pages
Page styles
rtl
Styles with RTL support enabled
appwork.scss
appwork-material.scss
appwork-dark.scss
...
fonts
Iconic fonts
fontawesome.css
ionicons.css
...
js
Javascripts
bootstrap.js
dropdown-hover.js
...
libs
Third-party libraries
animate-css
autosize
block-ui
...
Views
Shared
Layouts
Partials
_LayoutFooter.cshtml
_LayoutNavbar.cshtml
_LayoutSidenav.cshtml
_Application.cshtml
_Layout1.cshtml
_Layout1Flex.cshtml
...
Error.cshtml
...
_ViewStart.cshtml
...
package.json
...
...

Third-party plugins

The starter project by default includes all third-party plugins (see AspnetMvcStarter/App_Start/BundleConfig.cs file).
Optionally you can remove unwanted plugins to reduce output assets size and compile time:

  1. Remove unwanted packages from the dependencies section in the AspnetMvcStarter/package.json file.
  2. Remove related directories within the AspnetMvcStarter/Vendor/libs directory.
  3. Remove related @imports and @includes in the AspnetMvcStarter/Vendor/css/_theme/_libs.scss file.

For example, if you want to exclude plyr plugin, you will need to:

  1. Remove plyr dependency in the AspnetMvcStarter/package.json file.
  2. Remove the AspnetMvcStarter/Vendor/libs/plyr directory.
  3. Remove @import "../../libs/plyr/mixins"; and @include plyr-theme($background, $color); lines in the AspnetMvcStarter/Vendor/css/_theme/_libs.scss file.

Installation

  1. Download and install latest Node.js LTS: https://nodejs.org/en/.
  2. Download and install Git: https://git-scm.com/downloads.
  3. Logout from the system and login again.
  4. Launch cmd.exe as an administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
  5. Download and install Microsoft Visual C++ 2015 Redistributable from https://www.microsoft.com/en-us/download/details.aspx?id=53840 (if you already have binaries, installation will fail - it's ok).

  6. Make your Node.js install prioritized. You can do it in two ways:

    1. Open Tools -> Options -> Projects and solutions -> Web Package Management. Move $(PATH) string to the top of the list using the arrows.
    2. Open Tools -> Options -> Projects and solutions -> Web Package Management. Click Add button and paste path to node.exe directory. Then move added path to the top of the list using the arrows.
  7. Open the solution.
  8. In the solution explorer window right click on the solution and select Restore NuGet packages. Wait while packages restored.
  9. In the solution explorer window right click on package.json and select Restore Packages. Wait while packages restored.
  10. Build project: Build -> Build AspnetMvcStarter.

Page structure

Instead of configuring the layout manually, you can use the Starter template generator. It will dramatically simplify the initial setup.

Main layout

AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
<!DOCTYPE html>
<html lang="en" class="light-style">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>@ViewBag.Title - Asp.Net MVC Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" crossorigin="anonymous" />

    <!-- Icons. Uncomment required icon fonts -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/fontawesome") -->
    @Styles.Render("~/bundle/vendor/fonts/ionicons")
    <!-- @Styles.Render("~/bundle/vendor/fonts/linearicons") -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/open-iconic") -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/pe-icon-7-stroke") -->

    <!-- Core stylesheets -->
    @Styles.Render("~/bundle/vendor/css/bootstrap")
    @Styles.Render("~/bundle/vendor/css/appwork")
    @Styles.Render("~/bundle/vendor/css/theme-corporate")
    @Styles.Render("~/bundle/vendor/css/colors")
    @Styles.Render("~/bundle/vendor/css/uikit")

    <!-- Load polyfills -->
    @Scripts.Render("~/bundle/vendor/js/polyfills")
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

    <!-- Layout helpers -->
    @Scripts.Render("~/bundle/vendor/js/layout-helpers")

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    @Styles.Render("~/bundle/vendor/css/perfect-scrollbar/perfect-scrollbar")

    <!-- Application stylesheets -->
    @Styles.Render("~/bundle/css/main")

    @RenderSection("styles", required: false)
</head>
<body>

    @RenderBody()

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>

    <!-- Uncomment the following line to enable unobtrusive validation -->
    <!-- @Html.Partial("_ValidationScriptsPartial") -->

    @Scripts.Render("~/bundle/vendor/js/popper/popper")
    @Scripts.Render("~/bundle/vendor/js/bootstrap")
    @Scripts.Render("~/bundle/vendor/js/sidenav")

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    @Scripts.Render("~/bundle/vendor/js/perfect-scrollbar/perfect-scrollbar")

    <!-- Application javascripts -->
    @Scripts.Render("~/bundle/js/main")

    @RenderSection("scripts", required: false)
</body>
</html>
<!DOCTYPE html>
<html lang="en" class="light-style">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>@ViewBag.Title - Asp.Net MVC Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" crossorigin="anonymous" />

    <!-- Icons. Uncomment required icon fonts -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/fontawesome") -->
    @Styles.Render("~/bundle/vendor/fonts/ionicons")
    <!-- @Styles.Render("~/bundle/vendor/fonts/linearicons") -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/open-iconic") -->
    <!-- @Styles.Render("~/bundle/vendor/fonts/pe-icon-7-stroke") -->

    <!-- Core stylesheets -->
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-bootstrap-css"" />", "~/bundle/vendor/css/bootstrap")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-appwork-css"" />", "~/bundle/vendor/css/appwork")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-corporate")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-colors-css"" />", "~/bundle/vendor/css/colors")
    @Styles.Render("~/bundle/vendor/css/uikit")

    <!-- Load polyfills -->
    @Scripts.Render("~/bundle/vendor/js/polyfills")
    <script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

    <!-- Layout helpers -->
    @Scripts.Render("~/bundle/vendor/js/layout-helpers")

    <!-- Theme settings -->
    @Scripts.Render("~/bundle/vendor/js/theme-settings")
    <script>
        // Use settings panel generator to configure the plugin
        window.themeSettings = new ThemeSettings({
            cssPath: '',
            themesPath: '',
            pathResolver: function (path) {
                var resolvedPaths = {
                    @foreach (string name in new string[] { "bootstrap", "appwork", "colors" })
                    {
                        <text>
                            '@(name).css': '@Styles.Url("~/bundle/vendor/css/" + name)',
                            '@(name)-material.css': '@Styles.Url("~/bundle/vendor/css/" + name + "-material")',
                            '@(name)-dark.css': '@Styles.Url("~/bundle/vendor/css/" + name + "-dark")',
                        </text>
                    }

                    // UI Kit
                    'uikit.css': '@Styles.Url("~/bundle/vendor/css/uikit"))',

                    @foreach (string name in new string[] { "air", "corporate", "cotton", "gradient", "paper", "shadow", "soft", "sunrise", "twitlight", "vibrant" })
                    {
                        <text>
                            'theme-@(name).css': '@Styles.Url("~/bundle/vendor/css/theme-" + name)',
                            'theme-@(name)-material.css': '@Styles.Url("~/bundle/vendor/css/theme-" + name + "-material")',
                            'theme-@(name)-dark.css': '@Styles.Url("~/bundle/vendor/css/theme-" + name + "-dark")',
                        </text>
                    }
                };

                return resolvedPaths[path] || path;
            }
        });
    </script>

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    @Styles.Render("~/bundle/vendor/css/perfect-scrollbar/perfect-scrollbar")

    <!-- Application stylesheets -->
    @Styles.Render("~/bundle/css/main")

    @RenderSection("styles", required: false)
</head>
<body>

    @RenderBody()

    <!-- Core scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>

    <!-- Uncomment the following line to enable unobtrusive validation -->
    <!-- @Html.Partial("_ValidationScriptsPartial") -->

    @Scripts.Render("~/bundle/vendor/js/popper/popper")
    @Scripts.Render("~/bundle/vendor/js/bootstrap")
    @Scripts.Render("~/bundle/vendor/js/sidenav")

    <!-- Libs -->
    <!-- `perfect-scrollbar` library required by SideNav plugin -->
    @Scripts.Render("~/bundle/vendor/js/perfect-scrollbar/perfect-scrollbar")

    <!-- Application javascripts -->
    @Scripts.Render("~/bundle/js/main")

    @RenderSection("scripts", required: false)
</body>
</html>

Layouts

You can set the layout in two ways:

  1. Layout for the entire app - set layout property in the AspnetMvcStarter/Views/_ViewStart.cshtml file.
  2. Layout for the specified view - set layout property in the view's .cshtml file.

You can find navbar, sidenav and footer templates in the AspnetMvcStarter/Views/Shared/Layouts/Partials directory. 

AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_Layout1.cshtml";
}
AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_Layout1Flex.cshtml";
}
AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_Layout2.cshtml";
}
AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_Layout2Flex.cshtml";
}
AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutWithoutNavbar.cshtml";
}
AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutWithoutNavbarFlex.cshtml";
}
AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutWithoutSidenav.cshtml";
}
AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutHorizontalSidenav.cshtml";
}
AspnetMvcStarter/Views/_ViewStart.cshtml
@{
    Layout = "~/Views/Shared/Layouts/_LayoutBlank.cshtml";
}

Appwork's stylesheets

To use settings panel, you need to add Appwork's stylesheets to the bundle config (use the generator to see the example):

AspnetMvcStarter/App_Start/BundleConfig.cs
...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap").Include("~/Vendor/css/bootstrap.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap-material").Include("~/Vendor/css/bootstrap-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap-dark").Include("~/Vendor/css/bootstrap-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork").Include("~/Vendor/css/appwork.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork-material").Include("~/Vendor/css/appwork-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork-dark").Include("~/Vendor/css/appwork-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors").Include("~/Vendor/css/colors.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors-material").Include("~/Vendor/css/colors-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors-dark").Include("~/Vendor/css/colors-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/uikit").Include("~/Vendor/css/uikit.scss"));

// Themes
bundles.Add(SassBundle("~/bundle/vendor/css/theme-air").Include("~/Vendor/css/theme-air.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/theme-air-material").Include("~/Vendor/css/theme-air-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/theme-air-dark").Include("~/Vendor/css/theme-air-dark.scss"));
...

Theming

To enable a theme you need to:

  1. Add theme file to the bundle config.

    AspnetMvcStarter/App_Start/BundleConfig.cs
    ...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

...
bundles.Add(SassBundle("~/bundle/vendor/css/theme-air").Include("~/Vendor/css/theme-air.scss"));
...

  2. Include theme stylesheet.

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    @Styles.Render("~/bundle/vendor/css/theme-air")

To enable a theme just include the required theme stylesheet. 

AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-air")

Material styling

To enable material styling you need to:

  1. Set $enable-material-style variable to true.

    AspnetMvcStarter/Vendor/css/_custom-variables/_features.scss
    ...
$enable-material-style: true;
...

  2. Set material-style class on the <html> element instead of light-style.

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <html class="material-style">

  3. Add -material suffix to bootstrap, appwork, theme-* and colors paths in the AspnetMvcStarter/App_Start/BundleConfig.cs.

    AspnetMvcStarter/App_Start/BundleConfig.cs
    ...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap-material").Include("~/Vendor/css/bootstrap-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork-material").Include("~/Vendor/css/appwork-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/theme-corporate-material").Include("~/Vendor/css/theme-corporate-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors-material").Include("~/Vendor/css/colors-material.scss"));
...

  4. Add -material suffix to bootstrap, appwork, theme-* and colors stylesheets.

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    @Styles.Render("~/bundle/vendor/css/bootstrap-material")
@Styles.Render("~/bundle/vendor/css/appwork-material")
@Styles.Render("~/bundle/vendor/css/theme-corporate-material")
@Styles.Render("~/bundle/vendor/css/colors-material")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-bootstrap-css"" />", "~/bundle/vendor/css/bootstrap-material")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-appwork-css"" />", "~/bundle/vendor/css/appwork-material")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-corporate-material")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-colors-css"" />", "~/bundle/vendor/css/colors-material")

  5. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section and call attachMaterialRippleOnLoad() function. 

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    @Scripts.Render("~/bundle/vendor/js/material-ripple")
<script>
  window.attachMaterialRippleOnLoad();
</script>

  6. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section. 

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    @Scripts.Render("~/bundle/vendor/js/material-ripple")

Dark styling

To enable dark styling you need to:

  1. Set $enable-dark-style variable to true.

    AspnetMvcStarter/Vendor/css/_custom-variables/_features.scss
    ...
$enable-dark-style: true;
...

  2. Set dark-style class on the <html> element instead of light-style.

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <html class="dark-style">

  3. Add -dark suffix to bootstrap, appwork, theme-* and colors paths in the AspnetMvcStarter/App_Start/BundleConfig.cs.

    AspnetMvcStarter/App_Start/BundleConfig.cs
    ...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap-dark").Include("~/Vendor/css/bootstrap-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork-dark").Include("~/Vendor/css/appwork-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/theme-corporate-dark").Include("~/Vendor/css/theme-corporate-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors-dark").Include("~/Vendor/css/colors-dark.scss"));
...

  4. Add -dark suffix to bootstrap, appwork, theme-* and colors stylesheets.

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    @Styles.Render("~/bundle/vendor/css/bootstrap-dark")
@Styles.Render("~/bundle/vendor/css/appwork-dark")
@Styles.Render("~/bundle/vendor/css/theme-corporate-dark")
@Styles.Render("~/bundle/vendor/css/colors-dark")
    @Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-bootstrap-css"" />", "~/bundle/vendor/css/bootstrap-dark")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-appwork-css"" />", "~/bundle/vendor/css/appwork-dark")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-theme-css"" />", "~/bundle/vendor/css/theme-corporate-dark")
@Styles.RenderFormat(@"<link href=""{0}"" rel=""stylesheet"" class=""theme-settings-colors-css"" />", "~/bundle/vendor/css/colors-dark")

RTL support

To enable RTL direction support, first of all, you need to set $enable-rtl-support variable to true.

AspnetMvcStarter/Vendor/css/_custom-variables/_features.scss
$enable-rtl-support: true;
...

Then open AspnetMvcStarter/App_Start/BundleConfig.cs file and edit paths to load Appwork's stylesheets from the ~/Vendor/css/rtl/ directory instead of ~/Vendor/css/. 

AspnetMvcStarter/App_Start/BundleConfig.cs
...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap").Include("~/Vendor/css/rtl/bootstrap.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork").Include("~/Vendor/css/rtl/appwork.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/theme-corporate").Include("~/Vendor/css/rtl/theme-corporate.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors").Include("~/Vendor/css/rtl/colors.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/uikit").Include("~/Vendor/css/rtl/uikit.scss"));

...
...

// ------------------------------------------------------------------------------------
// Core stylesheets
//

bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap").Include("~/Vendor/css/rtl/bootstrap.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap-material").Include("~/Vendor/css/rtl/bootstrap-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/bootstrap-dark").Include("~/Vendor/css/rtl/bootstrap-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork").Include("~/Vendor/css/rtl/appwork.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork-material").Include("~/Vendor/css/rtl/appwork-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/appwork-dark").Include("~/Vendor/css/rtl/appwork-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors").Include("~/Vendor/css/rtl/colors.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors-material").Include("~/Vendor/css/rtl/colors-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/colors-dark").Include("~/Vendor/css/rtl/colors-dark.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/uikit").Include("~/Vendor/css/rtl/uikit.scss"));

// Themes
bundles.Add(SassBundle("~/bundle/vendor/css/theme-air").Include("~/Vendor/css/rtl/theme-air.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/theme-air-material").Include("~/Vendor/css/rtl/theme-air-material.scss"));
bundles.Add(SassBundle("~/bundle/vendor/css/theme-air-dark").Include("~/Vendor/css/rtl/theme-air-dark.scss"));
...

To enable RTL direction, add dir="rtl" attribute to the <html> element.

AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
<html dir="rtl">

Layout options

You can configure the initial layout by setting control classes to the <html> element.

After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc. 
AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
<html class="layout-fixed layout-collapsed">
Control class Description
.layout-reversed Reverse layout direction without markup change.
.layout-expanded Expand layout sidenav on small screens (< 992px).
.layout-collapsed Collapse layout sidenav on large screens (>= 992px).
.layout-offcanvas Make layout sidenav offcanvas.
.layout-fixed Set layout position to fixed.
.layout-fixed-offcanvas Set layout position to fixed with offcanvas sidenav.
.layout-navbar-fixed Set layout navbar position to fixed.
.layout-footer-fixed Set layout footer position to fixed.

PACE.js progress

Optionally you can enable PACE.js progress bar:

  1. Append pace.js script to the <head> section.

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    @Scripts.Render("~/bundle/vendor/js/pace")

  2. Append .page-loader element to the <body>.

    AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml
    <div class="page-loader"><div class="bg-primary"></div></div>

Generator

Use starter template generator to simplify the initial setup. Just replace a content of appropriate files with the generated code within the aspnet-mvc-starter directory.

Open in new tab

Troubleshooting

  • When you run IIS Express, the error occurs: Could not find a part of the path "...\bin\roslyn\csc.exe"

    In the VS's menu select:

    Build → Clean {ProjectName}
Build → Rebuild {ProjectName}

  • When you run IIS Express, the error occurs: BundleTransformer.Core.Translators.AssetTranslationException ... "/Vendor/css/rtl/bootstrap.scss" ...

    In the VS's menu select:

    Build → Clean {ProjectName}
Build → Rebuild {ProjectName}

  • When you published the project to local/remote IIS, the error occurs: Message: File to import not found or unreadable: ../../../node_modules/.../...scss

    node_modules directory is not included in the project by default, so it's not copied when you're publishing the project to the IIS. To fix it you need to include this directory in the project (or you can include required libs separately, e.g. node_modules/bootstrap/scss). In the "Solution Explorer" window:

    Click on "Show all files" button → Right click on "node_modules" → "Include in project”

Migration guide

Do not forget to commit changes or clone the project before performing migration steps.

  1. Update Visual Studio IDE.

  2. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

  3. Remove the next files and directories:

    Vendor/libs/vegas/

  4. Since some extensions were removed from the bootstrap-table package, remove Vendor/libs/bootstrap-table/ directory and copy new appwork-v1_6_0/aspnet-mvc-starter/AspnetMvcStarter/Vendor/libs/bootstrap-table/

  5. Copy with replace all SCSS files within Vendor/css/ and Vendor/css/rtl/ directories:

    Vendor/css/*.scss
Vendor/css/rtl/*.scss

  6. Copy with replace changed files and directories:

    Vendor/css/_appwork/
Vendor/css/_uikit/
Vendor/fonts/
Vendor/js/
Vendor/libs/

  7. Update:

    ApplicationInsights.config. Diff

    {PROJECT_NAME}.csproj. Diff

    package.json. Diff

    packages.config. Diff

    Web.config. Diff

  8. Reload the project and restore NuGet packages.

  9. Remove node_modules directory and package-lock.json. Then restore NPM packages.

  10. Rebuild the project

Changes in third-party components:

  • vegas plugin was excluded from the package.

  • fullcalendar changed its API and configuration object:

    Before
    var eventList = [{
  ...
  className: 'fc-event-warning'
}, {
  ...
  rendering: 'background'
}];

new Calendar($('#id')[0], {
  ...
  defaultDate: ...,
  eventLimit: ...,
  defaultView: '...',
  dir: 'rtl',
  header: {
    ...
    left: '...',
    right: '...'
  },
  views: {
    dayGrid: {
      eventLimit: ...
    }
  },
});
    After
    var eventList = [{
  ...
  classNames: 'fc-event-warning'
}, {
  ...
  display: 'background'
}];

new Calendar($('#id')[0], {
  ...
  initialDate: ...,
  dayMaxEventRows: ...,
  initialView: '...',
  direction: 'rtl',
  headerToolbar: {
    ...
    start: '...',
    end: '...'
  },
  views: {
    dayGrid: {
      dayMaxEventRows: ...
    }
  },
});

    For more info see https://fullcalendar.io/docs/upgrading-from-v4

  • dropzone configuration is changed.

    Before
    $('#id').dropzone();
    After
    var previewTemplate =
  '<div class="dz-preview dz-file-preview">' +
  '  <div class="dz-details">' +
  '    <div class="dz-thumbnail">' +
  '      <img data-dz-thumbnail>' +
  '      <span class="dz-nopreview">No preview</span>' +
  '      <div class="dz-success-mark"></div>' +
  '      <div class="dz-error-mark"></div>' +
  '      <div class="dz-error-message"><span data-dz-errormessage></span></div>' +
  '      <div class="progress"><div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div></div>' +
  '    </div>' +
  '    <div class="dz-filename" data-dz-name></div>' +
  '    <div class="dz-size" data-dz-size></div>' +
  '  </div>' +
  '</div>';
            
$('#id').dropzone({
  previewTemplate: previewTemplate
});

  • smartwizard markup and API are changed.

    Before
    <ul>
  <li><a href="#" class="mb-3">...</a></li>
  ...
</ul>

<div class="mb-3">
  <div id="smartwizard-1-step-1" class="card animated fadeIn">
    ...
  </div>
</div>
    After
    <ul class="nav">
  <li><a href="#" class="nav-link mb-3">...</a></li>
  ...
</ul>

<div class="tab-content mb-3">
  <div id="#" class="tab-pane card" role="tabpanel">
    ...
  </div>
</div>
    Before
    $el.smartWizard({
  useURLhash: false,
  showStepURLhash: false,
  ...
})
.on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
  if (stepDirection === 'forward'){ return $el.valid(); }
  return true;
})
.on('showStep', function(e, anchorObject, stepNumber, stepDirection) {
  var $btn = $el.find('.btn-finish');

  if (stepNumber === 3) {
    $btn.removeClass('hidden');
  } else {
    $btn.addClass('hidden');
  }
});
    After
    $el.smartWizard({
  enableURLhash: false,
  ...
})
.on('leaveStep', function(e, anchorObject, currentStepIndex, nextStepIndex, stepDirection) {
  var $finishBtn = $el.find('.btn-finish');

  if (stepDirection === 'forward'){
    var isValid = $el.valid();

    if (!isValid) {
      anchorObject.addClass('danger');
    } else {
      anchorObject.removeClass('danger');

      if (nextStepIndex === 3) {
        $finishBtn.removeClass('d-none');
      }
    }

    return isValid;
  } else {
    $finishBtn.addClass('d-none');
  }

  return true;
})
.find('> .toolbar .btn:not(.btn-primary)').addClass('btn-secondary');

    For more info see http://techlaboratory.net/jquery-smartwizard

  • Copy with replace the next files and directories:

    Vendor/css/_appwork/_functions.scss
Vendor/libs/bootstrap-datepicker/
Vendor/libs/bootstrap-daterangepicker/
Vendor/libs/bootstrap-material-datetimepicker/
Vendor/libs/bootstrap-select/
Vendor/libs/flatpickr/
Vendor/libs/growl/
Vendor/libs/plyr/
Vendor/libs/select2/
Vendor/libs/sweetalert2/
Vendor/libs/timepicker/
Vendor/libs/typeahead-js/

  • Copy with replace the next file:

    Vendor/libs/flatpickr/flatpickr.scss

  1. Update Visual Studio IDE.

  2. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

    Note: Yarn package manager is not reqired anymore.

  3. Remove the next files and directories:

    Vendor/css/migrate/

  4. Copy new files and directories:

    Vendor/css/_custom-variables/_appwork-dark.scss
Vendor/css/_custom-variables/_features.scss

  5. Since some extensions were removed from the bootstrap-table package, remove Vendor/libs/bootstrap-table/ directory and copy new appwork-v1_5_0/aspnet-mvc-starter/AspnetMvcStarter/Vendor/libs/bootstrap-table/

  6. Copy with replace all SCSS files within Vendor/css/ and Vendor/css/rtl/ directories:

    Vendor/css/*.scss
Vendor/css/rtl/*.scss

  7. Copy with replace changed files and directories:

    Vendor/fonts/fontawesome/
Vendor/fonts/fontawesome.css
Vendor/css/_appwork/
Vendor/css/_theme/
Vendor/css/_uikit/
Vendor/css/pages/
Vendor/js/
Vendor/libs/

  8. Update:

    ApplicationInsights.config. Diff

    {PROJECT_NAME}.csproj. Diff

    package.json. Diff

    packages.config. Diff

    Web.config. Diff

    Vendor/css/_custom-variables/_libs.scss. Diff

    Vendor/css/_custom-variables/_pages.scss. Diff

    Vendor/css/_custom-variables/_uikit.scss. Diff

  9. Edit variables in the Vendor/css/_custom-variables/_features.scss file according your setup.

    Variable Feature
    $enable-rtl-support Set to true to enable RTL mode support, otherwise set to false.
    $enable-light-style Set to true to enable light (previously default) style support, otherwise set to false.
    $enable-material-style Set to true to enable material style support, otherwise set to false.
    $enable-dark-style Set to true to enable dark style support, otherwise set to false.

  10. Reload the project and restore NuGet packages.

  11. Remove node_modules directory and then restore NPM packages.

  12. Rebuild the project

  • theme-default class is renamed to theme-light.

    [Before] Views/Shared/Layouts/_Application.cshtml
    <html lang="en" class="default-style">
    [After] Views/Shared/Layouts/_Application.cshtml
    <html lang="en" class="light-style">

  • ThemeSettings plugin settings are changed. Use Settings Panel Generator to get updated settings.

  • ThemeSettings.setMaterial() method is removed.
    Added ThemeSettings.setStyle(), ThemeSettings.isLightStyle(), ThemeSettings.isMaterialStyle(), ThemeSettings.isDarkStyle() methods.
    See Settings panel docs.

  • New style-dependent utility classes, which change its color depending on the current active style:

    • .theme-text-white - White (light or material style) / dark (dark style) text.
    • .theme-text-dark - Dark (light or material style) / white (dark style) text.
    • .theme-bg-white - White (light or material style) / dark (dark style) background.
    • .theme-bg-dark - Dark (light or material style) / white (dark style) background.
    • .theme-border-white - White (light or material style) / dark (dark style) border.
    • .theme-border-dark - Dark (light or material style) / white (dark style) border.

Changes in third-party components:

  • plyr changed its initialization method:

    Before
    plyr.setup('#selector', options);
    After
    new Plyr('#selector', options);

  • spinkit classes are changed. See https://github.com/tobiasahlin/SpinKit

  • SweetAlert's type option is renamed to icon.

    Before
    Swal.fire({
  ...,
  type: 'warning',
});
    After
    Swal.fire({
  ...,
  icon: 'warning',
});

  • Update Visual Studio IDE

  • (Optional) Upgrade Node.js to 10.16 LTS and Yarn

  • Remove {PROJECT_NAME}/Vendor/libs/ directory and copy appwork-v1_4_0/aspnet-mvc-starter/AspnetMvcStarter/Vendor/libs/

  • Copy with replace changed files and directories:

    AspnetMvcStarter/Vendor/js/
AspnetMvcStarter/Vendor/css/_appwork/_custom-forms.scss
AspnetMvcStarter/Vendor/css/_appwork/_dropdown.scss
AspnetMvcStarter/Vendor/css/_appwork/_forms.scss
AspnetMvcStarter/Vendor/css/_appwork/_layout.scss
AspnetMvcStarter/Vendor/css/_appwork/_mixins.scss
AspnetMvcStarter/Vendor/css/_appwork/_nav.scss
AspnetMvcStarter/Vendor/css/_appwork/_sidenav.scss
AspnetMvcStarter/Vendor/css/_appwork/_tables.scss
AspnetMvcStarter/Vendor/css/_appwork/_utilities.scss
AspnetMvcStarter/Vendor/fonts/fontawesome/
AspnetMvcStarter/Vendor/fonts/fontawesome.css
AspnetMvcStarter/Vendor/fonts/ionicons/
AspnetMvcStarter/Vendor/fonts/ionicons.css
AspnetMvcStarter/Vendor/fonts/linearicons/
AspnetMvcStarter/Vendor/fonts/pe-icon-7-stroke/

  • Copy new files:

    AspnetMvcStarter/Views/Shared/_ValidationScriptsPartial.cshtml

  • Update:

    {PROJECT_NAME}.sln. Diff

    {PROJECT_NAME}/{PROJECT_NAME}.csproj. Diff

    {PROJECT_NAME}/packages.config. Diff

    {PROJECT_NAME}/Web.config. Diff

    {PROJECT_NAME}/package.json. Diff

    {PROJECT_NAME}/Web.Debug.config. Diff

    {PROJECT_NAME}/Web.Release.config. Diff

    {PROJECT_NAME}/App_Start/BundleConfig.cs. Diff

    {PROJECT_NAME}/Views/Web.config. Diff

    {PROJECT_NAME}/Views/Shared/Layouts/_Application.cshtml. Diff

  • Restore NuGet packages

  • Restore/Install Yarn packages

  • Rebuild project

Changes in third-party libraries:

  • bootstrap-multiselect plugin was removed.
  • bootstrap-sweetalert replaced with original sweetalert2 plugin. API isn't changed.
  • Shepherd.js changed its API. See aspnet-mvc-demo/AspnetMvcDemo/Scripts/ui_tour.js for example. https://shepherdjs.dev/docs/tutorial-02-usage.html

  • Available extensions list of bootstrap-table package is changed (see aspnet-mvc-starter/AspnetMvcStarter/Vendor/libs/bootstrap-table/extensions):

    Added extensions/cell-input
Removed extensions/group-by
Removed extensions/multi-column-toggle
Removed extensions/multiple-search
Removed extensions/multiple-selection-row
Removed extensions/select2-filter
Removed extensions/tree-column

  1. Copy with replace the next directories:

    Vendor/libs/bootstrap-sortable/
Vendor/libs/flot/
Vendor/libs/idletimer/

  2. Update:

    package.json. Diff

  3. Restore/Install Yarn packages

  4. Include Vendor/libs/bootstrap-sortable/_bootstrap-sortable.css in the project

  1. (Optional) Upgrade Node.js to 10.15 LTS and Yarn

  2. Copy new files and directories:

    Vendor/css/migrate/

  3. Copy with replace all SCSS files within Vendor/css/ and Vendor/css/rtl/ directories:

    Vendor/css/*.scss
Vendor/css/rtl/*.scss

  4. Copy with replace changed files and directories:

    Vendor/css/_appwork/
Vendor/css/_theme/
Vendor/css/_uikit/_social.scss
Vendor/css/pages/clients.scss
Vendor/css/pages/messages.scss
Vendor/js/
Vendor/libs/
Vendor/fonts/

  5. Remove excluded libraries:

    Vendor/libs/bootstrap-tour/

  6. Since some extensions were removed from the bootstrap-table package, remove Vendor/libs/bootstrap-table/ directory and copy new appwork-v1_3_0/aspnet-mvc-starter/AspnetMvcStarter/Vendor/libs/bootstrap-table/

  7. Update:

    package.json. Diff

  8. Restore/Install Yarn packages

    Note: Do not forget to include in the project new files and exclude removed.

  9. Upgrade NuGet packages:

    BundleTransformer.Autoprefixer to 1.11.0
BundleTransformer.Core to 1.10.0
BundleTransformer.SassAndScss to 1.10.4
BundleTransformer.Yui to 1.10.0
Glob to 1.1.2
JavaScriptEngineSwitcher.Core to 3.0.0
JavaScriptEngineSwitcher.V8 to 3.0.5
JavaScriptEngineSwitcher.V8.Native.win-x64 to 3.0.5
JavaScriptEngineSwitcher.V8.Native.win-x86 to 3.0.5
LibSassHost to 1.2.3
LibSassHost.Native.win-x64 to 1.2.3
LibSassHost.Native.win-x86 to 1.2.3
Microsoft.ApplicationInsights to 2.9.1
Microsoft.ApplicationInsights.DependencyCollector to 2.9.1
Microsoft.ApplicationInsights.PerfCounterCollector to 2.9.1
Microsoft.ApplicationInsights.Web to 2.9.1
Microsoft.ApplicationInsights.WindowsServer to 2.9.1
Microsoft.ApplicationInsights.WindowsServer.TelemetryChannel to 2.9.1
Microsoft.AspNet.Mvc to 5.2.7
Microsoft.AspNet.Razor to 3.2.7
Microsoft.AspNet.TelemetryCorrelation to 1.0.5
Microsoft.AspNet.WebPages to 3.2.7
Microsoft.Net.Compilers to 2.10.0
Newtonsoft.Json to 12.0.1
System.Runtime.InteropServices.RuntimeInformation to 4.0.0

  10. Install following NuGet packages if missing:

    AdvancedStringBuilder 0.1.0
System.Buffers 4.0.0

  11. Update:

    App_Start/JsEngineSwitcherConfig.cs. Diff

    ApplicationInsights.config. Diff

    Global.asax.cs. Diff

    Web.config. Diff

  12. Include polyfills in the <head> block after core stylesheets (see aspnet-mvc-starter-generator for example):

    <!-- Load polyfills -->
@Scripts.Render("~/bundle/vendor/js/polyfills")
<script>document['documentMode']===10&&document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.~locale.en"><\/script>')</script>

  • Bootstrap CSS:

    Insert the following line into the App_Start/BundleConfig.cs:

    bundles.Add(SassBundle("~/bundle/vendor/css/migrate/appwork-130").Include("~/Vendor/css/migrate/appwork-130.scss"));

    Include migration CSS file to the end of the <head> block:

    @Styles.Render("~/bundle/vendor/css/migrate/appwork-130")

    Remove this import after you correct all changed CSS classes in your HTML code.

    Changed classes: 

    .font-weight-thin → .font-weight-lighter
.text-dark → .text-body
.bg-none → .bg-transparent
.font-sans-serif → .text-sans-serif
.font-serif → .text-serif
.font-monospace → .text-monospace
.box-shadow-none → .shadow-none
.container-m--x → .container-m-nx
.container-m--y → .container-m-ny
.btn-round → .rounded-pill

Negative horizontal margins:
.m{sides}--{size} → .m{sides}-n{size}
.m{sides}-{breakpoint}--{size} → .m{sides}-{breakpoint}-n{size}

  • Bootstrap JS:

    All dropdown links must have href="#" attribute. Dropdown links with href="javascript:void(0)" will throw an error

  • Plugin API changed:

    Flot.js - See https://github.com/flot/flot/blob/master/CHANGELOG.md

    bootstrap-table - see demo examples

    Fullcalendar - See https://fullcalendar.io/docs

    bootstrap-sweetalert is deprecated, use Sweetalert2 instead. See - https://sweetalert2.github.io/

    bootstrap-tour library was removed, use "shepherd" tour library instead. See - https://shipshapecode.github.io/shepherd/

Note: Validation icons are disabled by default. To enable it, add the next variable in the Vendor/css/_custom-variables/_appwork.scss and Vendor/css/_custom-variables/_appwork-material.scss: 

$enable-validation-icons: true;

  1. Update the following NuGet packages:

    • Antlr to 3.5.0.2
    • BundleTransformer.Autoprefixer to 1.9.214
    • BundleTransformer.Core to 1.9.213
    • EcmaScript.NET to 2.0.0
    • Glob to 1.0.4
    • Microsoft.ApplicationInsights to 2.8.1
    • Microsoft.ApplicationInsights.Agent.Intercept to 2.4.0
    • Microsoft.ApplicationInsights.DependencyCollector to 2.8.1
    • Microsoft.ApplicationInsights.PerfCounterCollector to 2.8.1
    • Microsoft.ApplicationInsights.Web to 2.8.1
    • Microsoft.ApplicationInsights.WindowsServer to 2.8.1
    • Microsoft.ApplicationInsights.WindowsServer.TelemetryChannel to 2.8.1
    • Microsoft.AspNet.Mvc to 5.2.6
    • Microsoft.AspNet.Razor to 3.2.6
    • Microsoft.AspNet.WebPages to 3.2.6
    • Microsoft.CodeDom.Providers.DotNetCompilerPlatform to 2.0.1
    • Microsoft.Net.Compilers to 2.9.0
    • Newtonsoft.Json to 11.0.2
    • System.Diagnostics.DiagnosticSource to 4.5.1
    • System.ValueTuple to 4.5.0
    • WebGrease to 1.6.0
    • YUICompressor.NET to 3.0.0

  2. Install the following NuGet packages:

    • LibSassHost.Native.win-x64, vesion 1.1.8
    • JavaScriptEngineSwitcher.V8.Native.win-x64, vesion 2.4.16

  3. Update *.csproj. Diff

  4. Update App_Start/BundleConfig.cs. Diff

  5. Update ApplicationInsights.config. Diff

  6. Update Web.config. Diff

  7. Update package.json. Diff

  8. Copy with replace changed files and directories:

    Vendor/css/_appwork/_accordion.scss
Vendor/css/_appwork/_breadcrumb.scss
Vendor/css/_appwork/_buttons.scss
Vendor/css/_appwork/_close.scss
Vendor/css/_appwork/_custom-forms.scss
Vendor/css/_appwork/_mixins.scss
Vendor/css/_appwork/_switcher.scss
Vendor/css/_appwork/_variables-material.scss
Vendor/css/_appwork/_variables.scss
Vendor/css/colors-material.scss
Vendor/fonts/fontawesome/
Vendor/fonts/ionicons/
Vendor/fonts/fontawesome.css
Vendor/fonts/ionicons.css
Vendor/js/
Vendor/libs/

  9. Restore Yarn packages

  10. Rebuild project:

    Build -> Clean {ProjectName}
Build -> Rebuild {ProjectName}