Syncfusion.AspNetMvc.Layouts
34.1.31
Prefix Reserved
dotnet add package Syncfusion.AspNetMvc.Layouts --version 34.1.31
NuGet\Install-Package Syncfusion.AspNetMvc.Layouts -Version 34.1.31
<PackageReference Include="Syncfusion.AspNetMvc.Layouts" Version="34.1.31" />
<PackageVersion Include="Syncfusion.AspNetMvc.Layouts" Version="34.1.31" />
<PackageReference Include="Syncfusion.AspNetMvc.Layouts" />
paket add Syncfusion.AspNetMvc.Layouts --version 34.1.31
#r "nuget: Syncfusion.AspNetMvc.Layouts, 34.1.31"
#:package Syncfusion.AspNetMvc.Layouts@34.1.31
#addin nuget:?package=Syncfusion.AspNetMvc.Layouts&version=34.1.31
#tool nuget:?package=Syncfusion.AspNetMvc.Layouts&version=34.1.31
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:
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
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
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
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>
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.1.31/fluent2.css" />
<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()
@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:
@Html.EJS().Splitter("splitter")
.Panes(pane =>
{
pane.Content("Panel 1").Add();
pane.Content("Panel 2").Add();
})
.Render()
@Html.EJS().DashboardLayout("dashboard")
.Panels(panel =>
{
panel.Id("Panel1").Content("Panel 1").Add();
})
.Render()
@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
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA
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
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
sales@syncfusion.com | Toll Free: 1-888-9-DOTNET
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET Framework | net462 is compatible. net463 was computed. net47 was computed. net471 was computed. net472 was computed. net48 was computed. net481 was computed. |
-
- Newtonsoft.Json (>= 13.0.3)
- Syncfusion.AspNetMvc.Base (>= 34.1.31)
- Syncfusion.EJ2.JavaScript (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.