Implementing Syncfusion ASP.NET Core Switch Component

When to Use This Skill

• Create toggle buttons/switches for boolean input (on/off, enabled/disabled, yes/no)
• Add Switch controls to forms for user state selection
• Configure Switch appearance (labels, size, colors)
• Handle Switch state changes with event handlers
• Style and customize the Switch component
• Integrate Switch with ASP.NET Core models and backend logic
• Implement validation and form submission with Switch values

About the Switch Component

• Binary state toggle (checked/unchecked)
• Custom on/off labels
• Keyboard navigation support
• Event-driven change detection
• CSS-based customization
• WCAG accessibility compliance
• Lightweight and responsive

Documentation and Navigation Guide

Getting Started with Switch

• TagHelper registration and setup
• NuGet package installation and verification
• Creating your first Switch control
• Setting on/off labels
• Basic initialization and rendering

Switch Properties and Configuration

• Understanding Switch properties (checked, disabled, name, value)
• Property binding with ASP.NET Core models
• Data model integration for forms
• Binding Switch state to C# properties
• Default values and initial state

Switch Events and State Management

• Change event handler implementation
• Detecting state transitions
• Form submission with Switch values
• Server-side validation
• Tracking user interactions

Styling and Customization

• CSS classes for customization (wrapper, handle, inner)
• Theme application (Material, Fabric, Bootstrap)
• Custom appearance with CSS
• Theme Studio integration
• Advanced styling techniques

Advanced How-To Patterns

• Change Switch size (default vs small)
• Enable right-to-left (RTL) support
• Prevent or intercept state changes
• Set disabled state based on conditions
• Submit Switch values through forms

Quick Start Example

Basic Switch Implementation

<!-- In ~/Pages/Shared/_ViewImports.cshtml (if not already added) -->
@addTagHelper *, Syncfusion.EJ2

<!-- In ~/Pages/Index.cshtml -->
<div class="switch-container">
    <label>Enable Notifications</label>
    <ejs-switch id="switchId"></ejs-switch>
</div>

Switch with Labels

<ejs-switch id="switchWithLabels" 
            onLabel="ON" 
            offLabel="OFF">
</ejs-switch>

Switch with Event Handling

<ejs-switch id="switchWithEvent" 
            change="onChange">
</ejs-switch>

<script>
    function onChange(args) {
        console.log('Switch state changed:', args.checked);
        // Update UI or call server
    }
</script>

Common Patterns

<!-- Page Model: public bool NotificationEnabled { get; set; } -->
<ejs-switch id="notificationSwitch" 
            checked="@Model.NotificationEnabled"
            change="onNotificationChange">
</ejs-switch>

<script>
    function onNotificationChange(args) {
        // Update form data for submission
        document.getElementById('notificationValue').value = args.checked;
    }
</script>

<!-- Disable Switch based on condition -->
<ejs-switch id="premiumSwitch" 
            disabled="@(!Model.IsPremiumUser)">
</ejs-switch>

<div class="preferences">
    <div class="preference-item">
        <label>Email Notifications</label>
        <ejs-switch id="emailSwitch"></ejs-switch>
    </div>
    <div class="preference-item">
        <label>SMS Notifications</label>
        <ejs-switch id="smsSwitch"></ejs-switch>
    </div>
</div>

Key Properties

checked

disabled

name

value

onLabel

offLabel

change

cssClass

Common Use Cases

1. User Preferences - Enable/disable notifications, emails, analytics tracking
2. Feature Toggles - Toggle experimental features, beta versions, maintenance mode
3. Form Options - Accept/agree to terms, agree to share data, consent forms
4. Admin Controls - Enable/disable users, features, or system settings
5. Subscription States - Activate/deactivate subscriptions, trial versions, licenses

Next Steps

1. Start Here: Review Getting Started for initial setup
2. Configure: Explore Switch Properties for your use case
3. Handle Events: Learn Event Handling for interactivity
4. Customize: Check Styling for appearance