Syncfusion.AspNetMvc.Buttons 34.1.33

Syncfusion® ASP.NET MVC Button Components

A comprehensive suite of ASP.NET MVC button and toggle components for building modern interactive user interfaces. Includes Button, CheckBox, Chips, Radio Button, Toggle Switch, Floating Action Button, and Speed Dial components.

Supported Components

This package includes the following components:

• Button
• CheckBox
• Chips
• Radio Button
• Toggle Switch
• Floating Action Button
• Speed Dial

ASP.NET MVC Button Component

The ASP.NET MVC Button Component is a custom HTML5 button control with built-in features for icons, predefined styles, button types, sizes, and UI customization.

Key Features:

• Button Types: Basic, flat, outline, and rounded button styles
• Icon Support: Built-in Material, Bootstrap, and custom icon integration with flexible positioning
• Button States: Normal, hover, active, disabled, and focus states
• Sizing Options: Small, normal, and large predefined sizes with custom sizing
• Toggle Button: Enable/disable button toggle functionality for state management
• Accessibility: Full keyboard navigation and ARIA support
• UI Customization: Custom colors, themes, and CSS class integration

Documentation:

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC CheckBox Component

The ASP.NET MVC CheckBox Component is a custom checkbox input component for selecting one or more options from a predefined list.

Key Features:

• Checkbox States: Checked, unchecked, indeterminate, and disabled states
• Multi-Select Support: Select multiple options from a list of predefined choices
• Indeterminate State: Mixed state for parent-child hierarchical selections
• Label Positioning: Flexible label placement (before, after) with custom text
• Size Options: Small, normal, and large predefined sizes with custom sizing
• Accessibility: Full keyboard navigation (Space to toggle) and ARIA labeling
• Event Handling: Change, focus, and blur events for reactive form handling
• Styling: Theme support and custom CSS class integration

Documentation:

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Chips Component

The ASP.NET MVC Chips Component displays small blocks of information with optional avatars, images, and icons. Ideal for tagging, filtering, and multi-select scenarios.

Key Features:

• Content Types: Text, avatars, images, and icons in compact chip format
• Removable Chips: Built-in close button for dismissible chip removal
• Selection Modes: Single-select or multi-select chip collections
• Template Support: Custom templates for complex chip content
• Chip Variants: Outlined and filled chip styling options
• Size Options: Small, normal, and large predefined sizes
• Accessibility: Keyboard navigation and ARIA attributes for screen readers

Documentation:

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Radio Button Component

The ASP.NET MVC Radio Button Component is a custom radio input component for selecting a single option from a group of choices.

Key Features:

• Single Selection: Mutually exclusive radio button groups for one-from-many selection
• Grouping Support: Automatic grouping by name attribute for cohesive behavior
• Radio States: Checked, unchecked, disabled, and focus states
• Label Positioning: Flexible label placement with custom text and styling
• Size Options: Small, normal, and large predefined sizes with custom sizing
• Value Binding: Two-way data binding for reactive form updates
• Accessibility: Full keyboard navigation (Arrow keys) and ARIA roles
• Event Handling: Change and focus events for form validation and submission

Documentation:

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Toggle Switch Component

The ASP.NET MVC Toggle Switch is a binary toggle component for on/off state control. Perfect for settings, preferences, and conditional feature activation.

Key Features:

• Binary States: On/Off toggle with checked and unchecked states
• Custom Labels: Text labels for both on and off states
• Disabled State: Support for disabled toggles in forms
• Size Options: Small, normal, and large predefined sizes with custom sizing
• Value Binding: Two-way data binding for reactive state management
• Animation: Smooth toggle animation between states
• Accessibility: Full keyboard navigation (Space to toggle) and ARIA attributes
• Styling Options: Multiple themes and custom CSS class integration

Documentation:

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Floating Action Button Component

The ASP.NET MVC Floating Action Button Component is a primary action button that floats above screen content. Commonly used for the main action on a page.

Key Features:

• Floating Overlay: Fixed positioning above all page content for primary actions
• Icon Integration: Built-in Material and Bootstrap icon support with custom icons
• Position Flexibility: Configurable positions (top-left, top-right, bottom-left, bottom-right)
• Size Options: Small, normal, and large predefined sizes with custom sizing
• Multiple Styles: Solid, outlined, and custom styling options
• Visibility Control: Show/hide animations and conditional rendering
• Icon Buttons: Support for multiple action buttons in a single FAB

Documentation:

• Getting Started
• API Reference
• Live Demos

ASP.NET MVC Speed Dial Component

The ASP.NET MVC Speed Dial Component extends the Floating Action Button to display a list of related action buttons on interaction.

Key Features:

• Action List: Display multiple related actions from a single FAB
• Icon Integration: Built-in Material and Bootstrap icon support
• Position Flexibility: Multiple position options for the speed dial group
• Animation: Smooth reveal animation for action buttons
• Custom Templates: Template support for complex action layouts
• Accessibility: Full keyboard navigation and ARIA support
• Event Handling: Open, close, and item selection events

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.Buttons

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.33/fluent2.css" />
    
    
    <script src="https://cdn.syncfusion.com/ej2/34.1.33/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 Buttons control

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

    
    @Html.EJS().Button("element").Content("Button").Render()

    
    @Html.EJS().CheckBox("default").Label("Default").Render()

    
    @Html.EJS().RadioButton("radio1").Label("Option 1").Name("default").Render()
    @Html.EJS().RadioButton("radio2").Label("Option 2").Name("default").Render()

    
    @Html.EJS().Switch("default").Render()

     
    <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
        @Html.EJS().Fab("fab").Target("#target").Content("Add").Render()
    </div>

    
    @Html.EJS().ChipList("chip").Text("Janet Leverling").Render()

    
    <div id="target" style="min-height:200px; position:relative; width:300px; border:1px solid;">
        @Html.EJS().SpeedDial("speeddial").Target("#target").Content("Edit").Items(ViewBag.datasource).Render()
    </div>

Step 2: Create controller ~/Controllers/HomeController.cs

using Syncfusion.EJ2.Buttons;

public class HomeController : Controller
{
    public ActionResult Index()
    {
        List<SpeedDialItem> items = new List<SpeedDialItem>
        {
            new SpeedDialItem { IconCss = "e-icons e-cut", Text = "Cut" },
            new SpeedDialItem { IconCss = "e-icons e-copy", Text = "Copy" },
            new SpeedDialItem { IconCss = "e-icons e-paste", Text = "Paste" }
        };
        
        ViewBag.DataSource = items;
        return View();
    }
}

Step 3: 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

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET