ASP.NET MVC - Appwork v1.1.0 Docs

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

Without settings panel
With settings panel

`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

...

fonts

Iconic fonts

fontawesome.css

ionicons.css

...

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:

Remove unwanted packages from the dependencies section in the AspnetMvcStarter/package.json file.
Remove related directories within the AspnetMvcStarter/Vendor/libs directory.
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:

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

Installation

Download and install Node.js 8.x from https://nodejs.org/en/.
Download and install Git from https://git-scm.com/downloads.
Download and install Yarn from https://yarnpkg.com/en/docs/install.
Logout from the system and login again.
Launch cmd.exe as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
Logout from the system and login again.
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).
Download and install Yarn Installer package from https://marketplace.visualstudio.com/items?itemName=MadsKristensen.YarnInstaller. Also disable npm restore and enable yarn restore (see package's page for instructions).
Make your node.js install prioritized. You can do it in two ways:
1. Open Tools -> Options -> Projects and solutions. Move $(PATH) string to the top of the list using the arrows.
2. Open Tools -> Options -> Projects and solutions. Click Add button and paste path to node.exe directory. Then move added path to the top of the list using the arrows.
Open the solution.
In the solution explorer window right click on the solution and select Restore NuGet packages. Wait while packages restored.
In the solution explorer window right click on package.json and select Restore Packages (Yarn). Wait while packages restored.
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="default-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")

    <!-- 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>
    @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="default-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")

    <!-- 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")',
                        </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")',
                        </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>
    @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:

Layout for the entire app - set layout property in the AspnetMvcStarter/Views/_ViewStart.cshtml file.
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/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/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/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"));
...

Theming

To enable a theme you need to:

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"));
...

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:

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

AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml

<html class="material-style">

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"));
...

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")

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>

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")

RTL support

To enable RTL direction support, 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/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/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/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"));
...

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:

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

AspnetMvcStarter/Views/Shared/Layouts/_Application.cshtml

@Scripts.Render("~/bundle/vendor/js/pace")

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

Docs v1.1.0 / ASP.NET MVC HTML5 Angular Vue.js Laravel Laravel + Vue.js Rails ASP.NET Core 2 OTHER Settings panel Layout helpers

OTHER

Page structure

Docs v1.1.0 / ASP.NET MVC HTML5 Angular Vue.js Laravel Laravel + Vue.js Rails ASP.NET Core 2

OTHER
Settings panel Layout helpers