Mvc Structure

  1. Docs
  2. Mvc Structure

Mvc Folder Structure

MVC file structure

Layout.cshtml


<!doctype html>
<html lang="en" data-layout="semibox" data-sidebar-visibility="show" data-topbar="light" data-sidebar="light" data-sidebar-size="lg" data-sidebar-image="none" data-preloader="disable">
<head> 
    @Html.Partial("~/Views/Shared/_title_meta.cshtml")
    @RenderSection("styles", required: false)
    @Html.Partial("~/Views/Shared/_head_css.cshtml")
</head>   

<body>
    <!-- Begin page -->
    <div id="layout-wrapper">
    @Html.Partial("~/Views/Shared/_menu.cshtml")

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
   
        <div class="page-content">
            <div class="container-fluid">
                @Html.Partial("~/Views/Shared/_page_title.cshtml")
   
                @RenderBody()
            </div>
        </div>

        @RenderSection("externalhtml", required: false)
        @Html.Partial("~/Views/Shared/_footer.cshtml")
    </div>

    </div>
    <!-- END layout-wrapper -->
    @Html.Partial("~/Views/Shared/_customizer.cshtml")

    @Html.Partial("~/Views/Shared/_vendor_scripts.cshtml")

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

Layout setup

You can set the default layout in the Velzon/Views/Shared/_Layout.cshtml file in the html tag.

<html data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg">
data-layout="vertical" To set default layout as Vertical
data-layout="horizontal" To set default layout as Horizontal
data-layout="twocolumn" To set default layout as Two column
data-layout="semibox" To set default layout as Semibox
data-layout-mode="light" To set Light layout mode.
data-layout-mode="dark" To set Dark layout mode.
data-sidebar-size="lg" data-layout-width="fluid" To set layout width Fluid and left sidebar large.
data-sidebar-size="sm-hover" data-layout-width="boxed" To set layout width Boxed and left sidebar on hover show menu.
data-layout-position="fixed" To set layout position Fixed.
data-layout-position="scrollable" To set layout position Scrollable.
data-topbar="light" To set the Light color of Topbar.
data-topbar="dark" To set the dark color of Topbar.
data-sidebar-size="lg" To set the Large left sidebar.
data-sidebar-size="md" To set the Compact left sidebar.
data-sidebar-size="sm" To set the Icon view left sidebar.
data-sidebar-size="sm-hover" To set the Icon hover left sidebar.
data-layout-style="default" To set the Default layout.
data-layout-style="detached" To set the Detached layout.
data-sidebar="light" To set the Light color of left Sidebar.
data-sidebar="dark" To set the Dark color of left Sidebar.
data-sidebar="gradient" To set the Gradient color of left Sidebar.
data-sidebar="gradient-2" To set the Gradient-2 color of left Sidebar.
data-sidebar="gradient-3" To set the Gradient-3 color of left Sidebar.
data-sidebar="gradient-4" To set the Gradient-4 color of left Sidebar.
data-sidebar-image="none" To Disable image on left Sidebar.
data-sidebar-image="img-1" To set the img-1 Image of left Sidebar.
data-sidebar-image="img-2" To set the img-2 Image of left Sidebar.
data-sidebar-image="img-3" To set the img-3 Image of left Sidebar.
data-sidebar-image="img-4" To set the img-4 Image of left Sidebar.
data-preloader="enable" To enable the preloader on the Page.
data-preloader="disable" To disable the preloader on the Page.