Getting Started

This section briefly explains how to include simple Sidebar control in your ASP.NET MVC application. You can refer to ASP.NET MVC Getting Started documentation page for system requirements, and configure common specifications.

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET MVC application to use our components.

Adding component to the Application

Now open your view page to render Sidebar components.

@{Html.EJS().Sidebar("default-sidebar").CloseOnDocumentClick(false).ContentTemplate(@<div>
            <div class="title-header">
                <div style="display:inline-block"> Sidebar </div>
            </div>
</div>).Render();}
<div>
    <div class="title default">Main content</div>
    <div class="sub-title">
        Place your primary content here.
    </div>
</div>

Run the application

After successful compilation of your application, simply press F5 to run the application.

The following example shows a basic Sidebar component.

razor

getting-started.cs

@{Html.EJS().Sidebar("default-sidebar").CloseOnDocumentClick(false).ContentTemplate(@<div>
            <div class="title-header">
                <div style="display:inline-block"> Sidebar </div>
            </div>
   </div>).Render();}
   <div>
    <div class="title default">Main content</div>
    <div class="sub-title">
        Place your primary content here.
    </div>
</div>
<style>
    .center-align {
        text-align: center;
        padding: 20px;
    }

    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

   .column {
        display: inline-block;
        padding: 10px;
    }

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

    body {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .center {
        text-align: center;
        display: none;
        font-size: 13px;
        font-weight: 400;
        margin-top: 20px;
    }

    .sb-content-tab .center {
        display: block;
    }

    .sb-content-tab #wrapper {
        display: none;
    }

    #default-sidebar {
        background-color: rgb(25, 118, 210);
        color: #ffffff;
    }

        #default-sidebar .close-btn:hover {
            color: rgba(0, 0, 0, .87);
            background-color: #fafafa;
        }

    .e-sidebar .title-header #close {
        color: #fafafa;
        cursor: pointer;
        line-height: 25px;
    }

    .e-sidebar.e-left .title-header #close {
        float: right;
    }

    .e-sidebar.e-right .title-header #close {
        float: left;
    }

    .title-header {
        text-align: center;
        font-size: 18px;
        padding: 15px;
    }

    .title.default {
        padding: 25px 15px 15px;
    }
</style>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult sample()
        {
            return View();
        }
    }
}

Output be like the below.

Sidebar Sample

Enable backdrop

Enabling the showBackdrop in the Sidebar component will prevent the main content from user interactions. Here, the DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen.

razor

backdrop.cs

@{Html.EJS().Sidebar("default-sidebar").ShowBackdrop(true).Type(Syncfusion.EJ2.Navigations.SidebarType.Push).Width("280px").ContentTemplate(@<div>
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
               @Html.EJS().Button("close").Content("CloseSidebar").Render()
            </div>
   </div>).Render();}
    <div>
        <div class="title">Main content</div>
        <div class="sub-title"> Click the button to open/close the Sidebar.</div>
        <div style="padding:20px" class="center-align">
            @Html.EJS().Button("toggle").Content("Toggle Sidebar").CssClass("e-info").Render()
        </div>
    </div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {

        document.getElementById('toggle').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            defaultSidebar.toggle();
        }
        // Close the sidebar
        document.getElementById('close').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            defaultSidebar.hide();
        }
    });
</script>
<style>

    .header {
 	width:100%;
	height: 40px;
	font-size:20px;
	line-height: 40px;
	font-weight: 500;
	background: #eee;
	display: inline-block;
}
.center-align {
	text-align: center;
	padding: 20px;
}
#close,#close:hover,#close:active,#close:focus{ /* csslint allow: adjoining-classes*/
	background: #fafafa;
	color:black
}
.title {
	text-align: center;
	font-size: 20px;
	padding: 15px;
}

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

.center {
	text-align: center;
	display: none;
	font-size: 13px;
	font-weight: 400;
	margin-top: 20px;
}

#wrapper {
	display: block;
}

.sb-content-tab .center { /* csslint allow: adjoining-classes*/
	display: block;
}

.sb-content-tab #wrapper { /* csslint allow: adjoining-classes*/
	display: none;
}

.right {
	float: right;
}

body {
	margin: 0;
}

#default-sidebar {
	background-color: rgb(25, 118, 210);
	color: #ffffff;
}

.book .ej2-sample-frame { /* csslint allow: adjoining-classes */
	padding: 0;
}
</style>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult backdrop()
        {
            return View();
        }
    }
}

Output be like the below.

Sidebar Sample

Position

Positioning the Sidebar to the right or left of the main content can be achieved by using the position property. If the position is not set, the Sidebar will expand from the left to the body element.

razor

position.cs

@{Html.EJS().Sidebar("default-sidebar").Type(Syncfusion.EJ2.Navigations.SidebarType.Push).CloseOnDocumentClick(false).Width("280px").Target(".maincontent").ContentTemplate(@<div>
        <div class="title"> Sidebar content</div>
        <div class="sub-title">
            Click the button to close the Sidebar.
        </div>
        <div class="center-align">
               @Html.EJS().Button("close").Content("CloseSidebar").Render()
        </div>
  </div>).Render();}
</ejs-sidebar>
<div id="head">
   @Html.EJS().Button("toggle").Content("Open").IsToggle(true).CssClass("e-info").IconCss("e-icons burg-icon").Render()
</div>
<div class="maincontent" style="height:335px;border:1px solid gray">
    <div>
        <div class="title">Main content</div>
        <div class="sub-title">
            <div class="column">
               @Html.EJS().RadioButton("left").Label("Left").Name("state").Checked(true).Change("positionChange").Render()
            </div>
            <div class="column">
            @Html.EJS().RadioButton("right").Label("Right").Name("state").Change("positionChange").Render()
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {

        document.getElementById('toggle').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            var togglebtn = document.getElementById("toggle").ej2_instances[0];
            if (document.getElementById('toggle').classList.contains('e-active')) {
                togglebtn.content = 'Close';
                defaultSidebar.show();
            } else {
                togglebtn.content = 'Open';
                defaultSidebar.hide();
            }
        }
        // Close the sidebar
        document.getElementById('close').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            defaultSidebar.hide();
            document.getElementById('toggle').classList.remove('e-active');
            var togglebtn = document.getElementById("toggle").ej2_instances[0];
            togglebtn.content = 'Open'
        }

    });

    function positionChange(args) {
        var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
        defaultSidebar.position = (args.event.target.id == "left") ? "Left" : "Right";
    }
</script>
<style>
    .header {
        width: 100%;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        font-weight: 500;
        background: #eee;
        display: inline-block;
    }

    .center-align {
        text-align: center;
        padding: 20px;
    }

    .burg-icon:before {
        content: '\e10d';
        font-size: 16px;
    }

    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    #head {
        border: 1px solid #424242;
        border-bottom-color: transparent;
        background: #00897B;
    }

    #toggle, #container .e-btn.e-info, #container .e-btn.e-info:hover, #container .e-btn.e-info:focus { /* csslint allow: adjoining-classes*/
        background: #00695C;
        box-shadow: none;
        border-radius: 0;
        height: 39px;
        width: 100px;
    }

    #close, #close:hover, #close:active, #close:focus { /* csslint allow: adjoining-classes*/
        background: #fafafa;
        color: black
    }

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

    .radiobutton {
        display: inline-block;
        padding: 10px;
    }

    .center {
        text-align: center;
        display: none;
        font-size: 13px;
        font-weight: 400;
        margin-top: 20px;
    }

    .column {
        display: inline-block;
        padding: 10px;
    }


    .sb-content-tab .center { /* csslint allow: adjoining-classes*/
        display: block;
    }

    .sb-content-tab #wrapper { /* csslint allow: adjoining-classes*/
        display: none;
    }

    .right {
        float: right;
    }

    body {
        margin: 0;
    }

    #default-sidebar {
        background-color: #26A69A;
        color: #ffffff;
    }

    .close-btn:hover {
        color: #fafafa;
    }

    .content-section { /* csslint allow: adjoining-classes */
        padding: 30px 10px 10px 20px;
    }

    .book .ej2-sample-frame { /* csslint allow: adjoining-classes */
        padding: 0;
    }

    @@font-face {
        font-family: 'e-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
</style>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult position()
        {
            return View();
        }
    }
}

Output be like the below.

Sidebar Sample

Contents

Adding component to the Application
Run the application
Enable backdrop
Position

Contents

Adding component to the Application
Run the application
Enable backdrop
Position

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!