Search results

Layout Sidebar in ASP.NET MVC Sidebar control

The following example demonstrates how to render sidebar in layout page. Sidebar is displayed in all the view page. While navigate to other view page, main content of sidebar changes.

razor
controller.cs
styles.css
Index.cshtml
Accordion.cshtml
Card.cshtml
ContextMenu.cshtml
Avatar.cshtml
Splitter.cshtml
InputMask.cshtml
TextBox.cshtml
@using Syncfusion.EJ2.Navigations;
<!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>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/styles.css")
        @Scripts.Render("~/bundles/modernizr")
        <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />
        <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
    </head>
    <body>
        @{Html.EJS().Sidebar("sidebar-menu").Width("290px").Target(".maincontent").MediaQuery("(min-width:670px)").ContentTemplate(@<div>
        <!-- Sidebar content -->
            <div class="sidebar-header header-cover" style="background-color: #1694CA">
                <div style="text-align:center">
                    <div class="sidebar-brand">
                         Essential JS 2 Syncfusion Components
                    </div>
                </div>
                <div style="padding:0  5px 10px 5px">
                    <div class="searchbox">
                        <input id="search-by" type="text" placeholder="Search Components">
                        <span data-search-clear=""><i class="fa fa-search" style="font-size:20px"></i></span>
                    </div>
                </div>
            </div>
            <div class="control-section">
                <div class="control_wrapper accordion-control-section">
                    @Html.EJS().Accordion("accordion").ExpandMode(ExpandMode.Single).EnablePersistence(true).Items(new List<AccordionAccordionItem>
                        {
                        new AccordionAccordionItem { Header = "Navigations",Expanded=true, Content = "#navigation" },
                        new AccordionAccordionItem { Header = "Layouts", Content = "#layouts" },
                        new AccordionAccordionItem { Header = "Inputs", Content = "#inputs" },
                        }).Render()
                </div>
                    <ul id="navigation" style="display:none">
                        <li><a href="/Home/Index">Sidebar</a></li>
                        <li><a href="/Home/ContextMenu">ContextMenu</a></li>
                        <li><a href="/Home/Accordion">Accordion</a></li>
                    </ul>
                    <ul id="layouts" style="display:none">
                        <li><a href="/Home/Avatar">Avatar</a></li>
                        <li><a href="/Home/Card">Card</a></li>
                        <li><a href="/Home/Splitter">Splitter</a></li>
                    </ul>
                    <ul id="inputs" style="display:none">
                        <li><a href="/Home/InputMask">Input Mask</a></li>
                        <li><a href="/Home/TextBox">TextBox</a></li>
                    </ul>
            </div>
        <!-- end of normal state element declaration -->
        </div>).Render();}
        <div id="body_content" class="maincontent">
            <div style="padding: 1.5vw 3vw;">
                @RenderBody()
            </div>
        </div>
        @Html.EJS().ScriptManager()
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </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 ContextMenu()
        {
            return View();
        }
        public IActionResult Accordion()
        {
            return View();
        }
        public IActionResult Card()
        {
            return View();
        }
        public IActionResult Avatar()
        {
            return View();
        }
        public IActionResult Splitter()
        {
            return View();
        }
        public IActionResult InputMask()
        {
            return View();
        }
        public IActionResult TextBox()
        {
            return View();
        }
    }
}
/*Layout page styles*/
#body_content {
    margin-top: 50px;
    height: 100%;
    overflow: hidden;
}

#sidebar-menu {
    background-color: #38424D;
    color: #fff;
    border: none;
}

.list {
    margin-top: 20px;
    background-color: #38424D;
    padding: 0px;
}

.e-acrdn-content li {
    list-style: none;
    padding: 0 0 10px 0;
}

li a {
    color: #bbbbbb;
    font-size: 16px;
}

    li a:hover {
        color: white;
        text-decoration: none;
    }


.sidebar-brand {
    height: 100%;
    padding: 20px;
    font-size: 20px;
    color: white;
}

#accordion.e-accordion .e-acrdn-item .e-acrdn-header {
    line-height: 45px;
}

#accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
    padding: 10px 16px 0 0;
}

#accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
    height: 45px;
    color: #bbbbbb;
}

#accordion, #accordion .e-acrdn-item, #accordion .e-acrdn-header {
    background: #38424D;
    border: none;
}

    #accordion .e-active .e-acrdn-header .e-acrdn-header-content, #accordion .e-active .e-acrdn-header .e-toggle-icon {
        color: #555 !important;
    }

    #accordion .e-active .e-acrdn-header {
        background: white;
    }

    #accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
        color: #bbbbbb;
        font-size: 16px;
    }

#sidebar-menu .search-icon {
    text-indent: 10px;
    height: 40px;
    width: 23em;
}

.searchbox {
    margin-top: 0.5rem;
    position: relative;
    border: 1px solid #19a5e1;
    background: #1383b3;
    border-radius: 4px;
}

    .searchbox label {
        color: rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 10px;
        top: 16px;
    }

    .searchbox input {
        display: inline-block;
        color: #fff;
        width: 100%;
        background: transparent;
        border: 0;
        padding: 8px;
    }

input[type="text"] {
    font-size: 15px;
}

.searchbox span {
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    right: 10px;
    top: 8px;
    cursor: pointer;
}

::placeholder {
    color: white;
    font-size: 15px;
}
/*end of layout page styles*/
/*main content styles*/
 .link a {
    font-size: 1.5vw;
}

#top-bar {
    background: #F6F6F6;
    border-radius: 2px;
    height: 0;
    min-height: 40px;
}

#body_content {
    margin-top: 0px !important;
}

#feature .link {
    height: 50px;
    width: 100%;
}

#top-bar .header {
    font-style: italic;
    font-size: 16px;
    color: #1694CA;
    padding-right: 5px;
}

#feature .content {
    text-align: center;
    padding: 2.5vw;
    padding-top: 0px;
    position: relative;
    margin: 2vw;
    box-shadow: 0 0 8px 0;
}

#feature .body-inner {
    padding-top: 50px;
    text-align: center;
    font-size: 3vw;
}

body {
    padding: 0px;
}

#top-bar .component {
    height: 100%;
    line-height: 40px;
    padding: 0 0 0 27px;
}

#feature .text {
    font-size: 16px;
    text-align: justify;
    padding-top: 20px;
    font-family: "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
}
/*end of main content styles*/
<table class="table">
    <div id="top-bar">
        <div class="component">
            <span class="header">Components</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Navigations</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Sidebar</span>
        </div>
    </div>
    <div id="feature">
        <div class="content">
            <div class="body-inner">
                Sidebar
            </div>
            <div style="text-align:left">
                <div style="font-size:2vw">Overview</div>
                <div class="text">The ASP.NET MVC Sidebar control is an expandable and collapsible container area that holds primary and secondary information placed alongside the main content of a webpage.</div>
            </div>
            <div style="padding:2vw 0 2vw 0;text-align:left">
                <div style="font-size:1.5vw">Key Features</div>
                <div class="text">
                    <p>1. <b>Target: </b>Sidebar can be initialized in any HTML element other than the body element.</p>
                    <p>2. <b>Types and positions: </b>Supports Push, Over, Slide, and Auto to expand or collapse the Sidebar, and also allows to position it in the Left or Right direction.</p>
                    <p>3. <b>Auto close: </b>Allows to set the Sidebar in an expanded or collapsed state only in certain resolutions.</p>
                    <p>4. <b>Dock: </b>By default, supports display of short notifications about the content on docked mode.</p>
                </div>
            </div>
            <div class="link">
                <span style="float:left"><a href="https://ej2.syncfusion.com/documentation/sidebar/getting-started">Documentation Link</a></span>
                <span style="float:right"><a href="https://ej2.syncfusion.com/aspnetmvc/Sidebar/DefaultFunctionalities#/material">Samples Link</a></span>
            </div>
        </div>
    </div>
</table>
@using Syncfusion.EJ2

<table class="table">
    <div id="top-bar">
        <div class="component">
            <span class="header">Components</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Navigations</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Accordion</span>
        </div>
    </div>
    <div id="feature">
        <div class="content">
            <div class="body-inner">
                Accordion
            </div>
            <div style="text-align:left">
                <div style="font-size:2vw">Overview</div>
                <div class="text">The ASP.NET MVC Accordion control provides vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space.</div>
            </div>
            <div style="padding:2vw 0 2vw 0;text-align:left">
                <div style="font-size:1.5vw">Key Features</div>
                <div class="text">
                    <p>1. <b>Rendering: </b>Can be rendered based on the items collection and HTML elements.</p>
                    <p>2. <b>Expand Mode: </b>Supports to define single or multiple expand mode for Accordion panels.</p>
                    <p>3. <b>RTL Support: </b>Supports right-to-left alignment.</p>
                    <p>4. <b>Accessibility: </b>Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Accordion by using keyboard shortcuts.</p>
                </div>
            </div>
            <div class="link">
                <span style="float:left"><a href="https://ej2.syncfusion.com/documentation/accordion/getting-started/">Documentation Link</a></span>
                <span style="float:right"><a href="https://ej2.syncfusion.com/aspnetmvc/Accordion/DefaultFunctionalities#/materiall">Samples Link</a></span>
            </div>
        </div>
    </div>
</table>
@using Syncfusion.EJ2

<table class="table">
    <div id="top-bar">
        <div class="component">
            <span class="header">Components</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Layouts</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Card</span>
        </div>
    </div>
    <div id="feature">
        <div class="content">
            <div class="body-inner">
                Card
            </div>
            <div style="text-align:left">
                <div style="font-size:2vw">Overview</div>
                <div class="text">The Cards component is a container-based user interface (UI) control built using HTML5/CSS3 markup and styles for displaying organized content. The card design is widely used in social media and e-commerce sites such as Facebook, Google Now, Amazon, Pinterest, and more. The cards are mostly used as entry points to more detailed views, such as in a gallery or dashboard.</div>
            </div>
            <div style="padding:2vw 0 2vw 0;text-align:left">
                <div style="font-size:1.5vw">Key Features</div>
                <div class="text">
                    <p>1. <b>Header : </b>Header supports to include title, subtitle along with image.</p>
                    <p>2. <b>Images and Title : </b>Support to include images with customizable caption positions in it.</p>
                    <p>3. <b>Action Buttons: </b>Supports to add buttons within the card either in vertical or horizontal alignment.</p>
                    <p>4. <b>Horizontal Card : </b>Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.</p>
                </div>
            </div>
            <div class="link">
                <span style="float:left"><a href="https://ej2.syncfusion.com/documentation/card/getting-started">Documentation Link</a></span>
                <span style="float:right"><a href="https://ej2.syncfusion.com/aspnetmvc/Card/BasicCard#/material">Samples Link</a></span>
            </div>
        </div>
    </div>
</table>
@using Syncfusion.EJ2

<table class="table">
    <div id="top-bar">
        <div class="component">
            <span class="header">Components</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Navigations</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">ContextMenu</span>
        </div>
    </div>
    <div id="feature">
        <div class="content">
            <div class="body-inner">
                ContextMenu
            </div>
            <div style="text-align:left">
                <div style="font-size:2vw">Overview</div>
                <div class="text">Context menu or right click menu is a graphical user interface that appears on the user right click/touch hold action. You can define the list of items that a context menu will contain, create multi-level menus and attach event handlers to the menu items.</div>
            </div>
            <div style="padding:2vw 0 2vw 0;text-align:left">
                <div style="font-size:1.5vw">Key Features</div>
                <div class="text">
                    <p>1. <b>Separator: </b>Supports menu items grouping by using the Separator.</p>
                    <p>2. <b>Icons and Navigations: </b>Supports items to have Icons and Navigation URL's.</p>
                    <p>3. <b>Template and Multilevel Nesting: </b>Supports template and multilevel nesting in ContextMenu.</p>
                    <p>4. <b>Accessibility: </b>Provided with built-in accessibility support that helps to access all the ContextMenu component features through the keyboard, screen readers, or other assistive technology devices.</p>
                </div>
            </div>
            <div class="link">
                <span style="float:left"><a href="https://ej2.syncfusion.com/documentation/context-menu/getting-started/">Documentation Link</a></span>
                <span style="float:right"><a href="https://ej2.syncfusion.com/aspnetmvc/ContextMenu/DefaultFunctionalities#/material">Samples Link</a></span>
            </div>
        </div>
    </div>
</table>
@using Syncfusion.EJ2

<table class="table">
    <div id="top-bar">
        <div class="component">
            <span class="header">Components</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Layouts</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Avatar</span>
        </div>
    </div>
    <div id="feature">
        <div class="content">
            <div class="body-inner">
                Avatar
            </div>
            <div style="text-align:left">
                <div style="font-size:2vw">Overview</div>
                <div class="text">The ASP.NET MVC Avatar is a pure CSS control used to add initials, icons, or images representing people or objects in different shapes and sizes. Easily integrate the Avatar with other controls like ListView, Card, NavBar, and Badge.</div>
            </div>
            <div style="padding:2vw 0 2vw 0;text-align:left">
                <div style="font-size:1.5vw">Key Features</div>
                <div class="text">
                    <p>1. <b>Types : </b>Provided 2 types of avatars such as default and circle.</p>
                    <p>2. <b>Sizes : </b>Supports 7 different sizes to adapt the various application scenario.</p>
                </div>
            </div>
            <div class="link">
                <span style="float:left"><a href="https://ej2.syncfusion.com/aspnetmvc/documentation/avatar/getting-started">Documentation Link</a></span>
                <span style="float:right"><a href="https://ej2.syncfusion.com/aspnetmvc/Avatar/Default#/material">Samples Link</a></span>
            </div>
        </div>
    </div>
</table>
@using Syncfusion.EJ2

<table class="table">
    <div id="top-bar">
        <div class="component">
            <span class="header">Components</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Layouts</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Splitter</span>
        </div>
    </div>
    <div id="feature">
        <div class="content">
            <div class="body-inner">
                Splitter
            </div>
            <div style="text-align:left">
                <div style="font-size:2vw">Overview</div>
                <div class="text">The HTML5 ASP.NET MVC Splitter is a layout user interface (UI) control that has multiple resizable panes. It is used to create different complex layouts in the web application by using multiple and nested panes. The orientation of the pane can be either horizontal or vertical. Users can integrate their child controls or content within the panes.</div>
            </div>
            <div style="padding:2vw 0 2vw 0;text-align:left">
                <div style="font-size:1.5vw">Key Features</div>
                <div class="text">
                    <p>1. <b>Multiple Panes : </b>Provided an option to configure more than two panes.</p>
                    <p>2. <b>Resizable Panes: </b>Supports resizable to adjust its pane size dynamically.</p>
                    <p>3. <b>Orientation : </b>The panes can orient either horizontally or vertically.</p>
                    <p>4. <b>Integration : </b>Other JavaScript UI controls can be integrated within panes.</p>
                    <p>5. <b>Nested Panes :</b>Another splitter can be integrated within panes to create a complex layout.</p>
                </div>
            </div>
            <div class="link">
                <span style="float:left"><a href="https://ej2.syncfusion.com/aspnetmvc/documentation/splitter/getting-started">Documentation Link</a></span>
                <span style="float:right"><a href="https://ej2.syncfusion.com/aspnetmvc/Splitter/DefaultFunctionalities#/material">Samples Link</a></span>
            </div>
        </div>
    </div>
</table>
@using Syncfusion.EJ2

<table class="table">
    <div id="top-bar">
        <div class="component">
            <span class="header">Components</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Inputs</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Input Mask</span>
        </div>
    </div>
    <div id="feature">
        <div class="content">
            <div class="body-inner">
                Input Mask
            </div>
            <div style="text-align:left">
                <div style="font-size:2vw">Overview</div>
                <div class="text">The ASP.NET MVC input mask, or masked textbox control, provides an easy and reliable way to collect user input based on a standard mask. It allows you to capture phone numbers, date values, credit card numbers, and other standard format values.</div>
            </div>
            <div style="padding:2vw 0 2vw 0;text-align:left">
                <div stytle="font-size:2vw">Key Features</div>
                <div class="text">
                    <p>1. <b>Custom Characters : </b>Allows you to use your own characters as the mask elements.</p>
                    <p>2. <b>Regular Expression : </b>Can be used as a mask element for each character of the MaskedTextBox.</p>
                    <p>3. <b>Accessibility : </b>Provides built-in accessibility support which helps to access all the MaskedTextBox component features through keyboard, on-screen readers, or other assistive technology devices.</p>
                </div>
            </div>
            <div class="link">
                <span style="float:left"><a href="https://ej2.syncfusion.com/aspnetmvc/documentation/maskedtextbox/getting-started-mvc">Documentation Link</a></span>
                <span style="float:right"><a href="https://ej2.syncfusion.com/aspnetmvc/MaskedTextBox/DefaultFunctionalities#/material">Samples Link</a></span>
            </div>
        </div>
    </div>
</table>
@using Syncfusion.EJ2

<table class="table">
    <div id="top-bar">
        <div class="component">
            <span class="header">Components</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">Inputs</span>
            <span><i class="fa fa-angle-right" style="font-size:16px"></i></span>
            <span class="header">TextBox</span>
        </div>
    </div>
    <div>
        <div class="content">
            <div class="body-inner">
                TextBox
            </div>
            <div style="text-align:left">
                <div style="font-size:2vw">Overview</div>
                <div class="text">The ASP.NET MVC TextBox (text field) control is most useful for editing, displaying, or entering plain text on forms to capture user names, phone numbers, email, and more. This control is an extended version of the HTML5 TextBox (input type text) control with icons, floating labels, different sizing, grouping, validation states, and more. It is available in an HTML5/CSS version and an ASP.NET MVC version.</div>
            </div>
            <div style="padding:2vw 0 2vw 0;text-align:left">
                <div style="font-size:1.5vw">Key Features</div>
                <div class="text">
                    <p>1. <b>Floating Label  : </b>Floats the placeholder text while focus.</p>
                    <p>2. <b>Input Group : </b>Group the icons, buttons along with textbox.</p>
                    <p>3. <b>Validation States: </b>Provides styles for success, error, and warning states.</p>
                    <p>4. <b>Multiline : </b>Handles multiline input with placeholder text.</p>
                </div>
            </div>
            <div class="link">
                <div>
                    <span style="float:left"><a href="https://ej2.syncfusion.com/aspnetmvc/documentation/textbox/getting-started">Documentation Link</a></span>
                    <span style="float:right"><a href="https://ej2.syncfusion.com/aspnetmvc/TextBoxes/DefaultFunctionalities#/material">Samples Link</a></span>
                </div>
            </div>
        </div>
    </div>
</table>
<style>
    div a {
        font-size: 1.5vw;
    }

    #top-bar {
        background: #F6F6F6;
        border-radius: 2px;
        height: 0;
        min-height: 40px;
    }

    #body_content {
        margin-top: 0px !important;
    }

    .link {
        height: 50px;
        width: 100%;
    }

    .header {
        font-style: italic;
        font-size: 16px;
        color: #1694CA;
        padding-right: 5px;
    }

    .content {
        text-align: center;
        padding: 2.5vw;
        padding-top: 0px;
        position: relative;
        margin: 2vw;
        box-shadow: 0 0 8px 0;
    }

    .body-inner {
        padding-top: 50px;
        text-align: center;
        font-size: 3vw;
    }

    body {
        padding: 0px;
    }

    .component {
        height: 100%;
        line-height: 40px;
        padding: 0 0 0 27px;
    }

    .text {
        font-size: 16px;
        text-align: justify;
        padding-top: 20px;
        font-family: "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    }
</style>

Output be like the below.

Sidebar Sample