Search results

Hide Sidebar in ASP.NET MVC Sidebar control

The following example demonstrates how to hide layout page sidebar. Initially sidebar is rendered with layout page. While navigate to another page, it hides the layout page sidebar.

razor
controller.cs
Index.cshtml
About.cshtml
Contact.cshtml
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <!-- Syncfusion Essential JS 2 Styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />

    <!-- Syncfusion Essential JS 2 Scripts -->
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

    @{Html.EJS().Sidebar("sidebar-menu").Width("220px").Target(".main-content").ContentTemplate(@<div class="dock-menu">
    <!-- normal state element declaration -->
    <div class="sidebar-header header-cover">

        <div style="padding-top:30px">
            <div class="sub-title">
                Layout Page Sidebar
            </div>
        </div>
    </div>
    <!-- end of normal state element declaration -->
  </div>).Render();}
    <div id="maintext" class=".main-content">
        <div>
            @RenderBody()
        </div>
    </div>
    @Html.EJS().ScriptManager()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <style>
        #sidebar-menu {
            padding-top: 30px;
            background-color: #1694CA
        }

        .sub-title {
            text-align: center;
            font-size: 20px;
            padding: 3vw;
            color: white;
        }
        .container {
            margin-left: 10px;
        }
    </style>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult Contact()
        {
            return View();
        }
        public IActionResult About()
        {
            return View();
        }
    }
}
<div>
    <h2 class="sidebar-heading"> Responsive Sidebar With Treeview</h2>
    <p class="paragraph-content">
        This is a graphical aid for visualising and categorising the site, in the style of an expandable and
        collapsable treeview component. It auto-expands to display the node(s), if any, corresponding to the currently
        viewed title, highlighting that node(s) and its ancestors. Load-on-demand when expanding nodes is available
        where supported (most graphical browsers), falling back to a full-page reload. MediaWiki-supported caching,
        aside from squid, has been considered so that unnecessary re-downloads of content are avoided where possible.
        The complete expanded/collapsed state of the treeview persists across page views in most situations.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading">Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
<style>
    .sidebar-heading {
        color: #1c86c8;
        margin: 40px 0;
        padding: 2px;
    }
     .paragraph-content {
        font-family: 'Poppins', sans-serif;
        padding: 5px;
        font-weight: 300;
        color: grey;
    }
    #myCarousel {
        padding-left: 1vw;
    }
</style>
@{Html.EJS().Sidebar("sidebar").Width("230px").Target(".maincontent").ContentTemplate(@<div>
    <!-- Sidebar content -->
    <div class="sidebar-header header-cover">

        <div style="padding-top:30px">
            <div class="sub-title">
                About Page Sidebar
            </div>
        </div>
    </div>
</div>).Render();}
<div>
    <h2 class="sidebar-heading"> Responsive Sidebar With Treeview</h2>
    <p class="paragraph-content">
        This is a graphical aid for visualising and categorising the site, in the style of an expandable and
        collapsable treeview component. It auto-expands to display the node(s), if any, corresponding to the currently
        viewed title, highlighting that node(s) and its ancestors. Load-on-demand when expanding nodes is available
        where supported (most graphical browsers), falling back to a full-page reload. MediaWiki-supported caching,
        aside from squid, has been considered so that unnecessary re-downloads of content are avoided where possible.
        The complete expanded/collapsed state of the treeview persists across page views in most situations.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading">Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <div class="line"></div>
    <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
    <p class="paragraph-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var sidebarTreeview = document.getElementById("sidebar-menu").ej2_instances[0];
        // Toggle the Sidebar
        if (sidebarTreeview.isOpen) {
            sidebarTreeview.hide();
        }
    });
</script>
<style>
    #sidebar {
        padding-top: 30px;
        background-color: #1694CA;
        height: 100%;
        position:fixed;
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
        color: white;
    }

    .sidebar-heading {
        color: #1c86c8;
        margin: 40px 0;
        padding: 2px;
    }

    .paragraph-content {
        font-family: 'Poppins', sans-serif;
        padding: 5px;
        font-weight: 300;
        color: grey;
    }

    body {
        padding-top: 10px;
    }
    .e-content-animation {
        padding-top:1.5vw;
    }
      #myCarousel {
        padding-left: 1vw;
    }
</style>
@{Html.EJS().Sidebar("sidebar").Width("230px").Target(".maincontent").ContentTemplate(@<div>
    <!-- Sidebar content -->
    <div class="sidebar-header header-cover">

        <div style="padding-top:30px">
            <div class="sub-title">
                Contact Page Sidebar
            </div>
        </div>
    </div>
</div>).Render();}
<div>
     <h2 class="sidebar-heading"> Responsive Sidebar With Treeview</h2>
        <p class="paragraph-content">
            This is a graphical aid for visualising and categorising the site, in the style of an expandable and
            collapsable treeview component. It auto-expands to display the node(s), if any, corresponding to the currently
            viewed title, highlighting that node(s) and its ancestors. Load-on-demand when expanding nodes is available
            where supported (most graphical browsers), falling back to a full-page reload. MediaWiki-supported caching,
            aside from squid, has been considered so that unnecessary re-downloads of content are avoided where possible.
            The complete expanded/collapsed state of the treeview persists across page views in most situations.
        </p>
        <div class="line"></div>
        <h2 class="sidebar-heading">Lorem Ipsum Dolor</h2>
        <p class="paragraph-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </p>
        <div class="line"></div>
        <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
        <p class="paragraph-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <div class="line"></div>
        <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
        <p class="paragraph-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <div class="line"></div>
        <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
        <p class="paragraph-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <div class="line"></div>
        <h2 class="sidebar-heading"> Lorem Ipsum Dolor</h2>
        <p class="paragraph-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
</div>
<script>
 document.addEventListener('DOMContentLoaded', function () {
            var sidebarTreeview = document.getElementById("sidebar-menu").ej2_instances[0];
            // Toggle the Sidebar
             if (sidebarTreeview.isOpen) {
                 sidebarTreeview.hide();
             }
    });
</script>
<style>
    #sidebar {
        padding-top: 30px;
        background-color: #1694CA;
        height:100%;
        position:fixed;
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
        color: white;
    }
    .sidebar-heading {
        color: #1c86c8;
        margin: 40px 0;
        padding: 2px;
    }

    .paragraph-content {
        font-family: 'Poppins', sans-serif;
        padding: 5px;
        font-weight: 300;
        color: grey;
    }
    body {
        padding-top: 10px;
    }
    .e-content-animation {
        padding-top: 1.5vw;
    }
      #myCarousel {
        padding-left: 1vw;
    }
</style>

Output be like the below in layout page.

Sidebar Sample

Output be like the below, while navigate to other page, it hides the layout page sidebar.

Sidebar Sample