MVC Application Layout View Setup

The Customer Solutions UI Kit Samples provides MVC partial views that interact with the UI Kit style package.

Main Layout Page - _Layout.cshtml

In most MVC projects the _Layout.cshtml file is used as the applications outer web structure that contains items such as the header and footer along with any CSS and JavaScript resources. This is the ideal place to inject parts of the UI Kit style package into to the project.

The head of the layout page contains media data for mobile devices, page title, and linking to CSS style sheets. These CSS resources are stacked as follows:

bootstrap.min.css - Bootstrap 5 Library
uikit.css - Customer Solutions General Style Kit
uikit-icons.css - Customer Solutions Icons Style Kit
uikit-ribbon.css - Customer Solutions Ribbon Style Kit
site.css - MVC Application site style file.
Head - MVC Render Section that can inject other CSS files

The body of the layout page contains main MVC Render Body action along with several partial views which allows developers to adjust particular sections ribbon and navigation without affecting the whole layout structure. Below is a list of the partial views and how they stack in the layout page:

_UIKitRibbon.cshtml - Header Ribbon ( Title Changed Here )
- _UIKit9Dot.cshtml - 9 Dot Menu
- _UIKitGlobeMenu.cshtml - Global Language Menu
- _UIKitSettingsMenu.cshtml - Settings Menu
- _UIKitHelpMenu.cshtml - Help Menu
- _UIKitProfileMenu.cshtml - Profile Menu
- _UIKitNavigation.cshtml - Application Navigation Menu
_AlertRibbon.cshtml - Alert Ribbon using MVC ModelState Errors
_UIKitFooter - Footer Ribbon

The last portion of the body of the layout page is where all the JavaScript files are linked. Below is a list of the scripts introduced:

bootstrap.js - Bootstrap 5 JavaScript Library
uikit-ribbon.css - Customer Solutions Ribbon supporting JavaScript file (Used for Mobile Navigation)
site.js - MVC Application site JavaScript file.
Scripts - MVC Render Section that can inject other JavaScript files

_Layout.cshtml Code


        <html lang="en">

          <head>

                
        <meta charset="utf-8" />

                
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

                
        <title>@ViewData["Title"]</title>

                
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

                
        <link rel="stylesheet" href="~/lib/customersolutions.uikit/dist/css/uikit.css" />

                
        <link rel="stylesheet" href="~/lib/customersolutions.uikit/dist/css/uikit-icons.css" />

                
        <link rel="stylesheet" href="~/lib/customersolutions.uikit/dist/css/uikit-ribbon.css" />

                
        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

            @await RenderSectionAsync("Head", required: false)

              
        </head>

          
        <body>

                
        <div class="page-layout">

                      
        @await Html.PartialAsync("_UIKitRibbon")

                      
        @await Html.PartialAsync("_AlertRibbon")

                      
        <main>

                @RenderBody()

                          
        </main>

                      
        @await Html.PartialAsync("_UIKitFooter")

                  
                  
        </div>


                
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>

                
        <script src="~/lib/customersolutions.uikit/dist/js/uikit-ribbon.js"></script>

                
        <script src="~/js/site.js" asp-append-version="true"></script>

                
        @await RenderSectionAsync("Scripts", required: false)

              
        </body>

        </html>