Syncfusion.AspNetMvc.Layouts

Syncfusion® ASP.NET MVC Layouts Components

A comprehensive suite of ASP.NET Mvc layout and structural components for building organized page layouts. Includes Dashboard Layout, Splitter, Card, Avatar, and Timeline components.

Supported Components

This package includes the following components:

• Dashboard Layout
• Splitter
• Card
• Avatar
• Timeline

ASP.NET MVC Dashboard Layout Component

The ASP.NET MVC Dashboard Layout Component provides a drag-and-drop, resizable panel-based layout for building interactive dashboards.

Key Features:

• Drag and Drop: Rearrange dashboard panels interactively at runtime
• Resizable Panels: Resize panels horizontally and vertically within the grid
• Floating Layout: Panels float upward to fill empty space automatically
• Collision Detection: Prevents overlapping when panels are moved or resized
• Stacking: Stack panels in a defined column-based grid system
• Responsive: Adjusts panel layout based on available container width
• Serialization: Save and restore panel positions and sizes programmatically

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Splitter Component

The ASP.NET MVC Splitter Component divides content into resizable horizontal or vertical panes with collapsible support.

Key Features:

• Horizontal & Vertical: Split content into panes in either orientation
• Resizable Panes: Drag the separator bar to resize adjacent panes
• Collapsible Panes: Collapse individual panes to free up space
• Min/Max Size: Set minimum and maximum size constraints per pane
• Nested Splitters: Embed splitters within panes for complex layouts
• Fixed Panes: Lock specific panes to a fixed size
• Accessibility: Keyboard-navigable separator bars with ARIA support

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Timeline Component

The ASP.NET MVC Timeline Component displays events or steps in a vertical or horizontal timeline format with custom content support.

Key Features:

• Vertical & Horizontal: Render the timeline in vertical or horizontal orientation
• Custom Content: Support for text, HTML, or templated content per item
• Item Templates: Individually customize the appearance of each timeline item
• Dot Customization: Configure dot icons, colors, and styles per item
• Opposite Content: Display content on both sides of the timeline axis
• Reverse Order: Render items in reverse chronological order
• Accessibility: Semantic list structure with ARIA roles for screen readers

Documentation

• Getting Started
• API Reference
• Live Demos

Common Setup

These setup steps are required only once for your application, regardless of which Syncfusion components you use.

1. Install Base NuGet Package

Install-Package Syncfusion.AspNetMvc.Layouts

2. Add Namespace Reference

Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

3. Add Stylesheet & Script References

In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - Syncfusion Application</title>
    
    <!-- Syncfusion ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.1.31/fluent2.css" />
    
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/34.1.31/dist/ej2.min.js"></script>
</head>

4. Register Script Manager

At the end of the <body> tag in your layout file (~/Views/Shared/_Layout.cshtml):

<body>
    @RenderBody()
    
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Quick Start

Step 1: Add ASP.NET MVC Layouts control

Add the Syncfusion® ASP.NET MVC Layouts control ~/Views/Home/Index.cshtml page:

<!-- Splitter -->
@Html.EJS().Splitter("splitter")
    .Panes(pane =>
    {
        pane.Content("Panel 1").Add();
        pane.Content("Panel 2").Add();
    })
    .Render()

<!-- Dashboard Layout -->
@Html.EJS().DashboardLayout("dashboard")
    .Panels(panel =>
    {
        panel.Id("Panel1").Content("Panel 1").Add();
    })
    .Render()

<!-- ListView -->
@Html.EJS().ListView("listview")
    .DataSource(new string[] { "Item 1", "Item 2", "Item 3" })
    .Render()

Step 2: Run the Application

Press Ctrl+F5 to run the application in your browser.

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET mvc | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com

[email protected] | Toll Free: 1-888-9-DOTNET