syncfusion-aspnetcore-switch

实现 Syncfusion ASP.NET Core Switch 组件

何时使用此技能

当用户需要执行以下操作时，请使用此技能：

• 创建切换按钮/Switch，用于布尔值输入（开/关、启用/禁用、是/否）
• 向表单添加 Switch 控件，以供用户选择状态
• 配置 Switch 外观（标签、尺寸、颜色）
• 使用事件处理程序处理 Switch 状态变化
• 设置 Switch 组件样式并进行自定义
• 将 Switch 与 ASP.NET Core 模型和后端逻辑集成
• 使用 Switch 值实现验证和表单提交

关于 Switch 组件

Syncfusion Switch（切换按钮）是一种轻量、易于访问的输入控件，用于在两种状态之间切换。它基于 TypeScript/JavaScript 构建，可与 ASP.NET Core Razor 标记和 C# 后端代码无缝集成。

主要功能：

• 二进制状态切换（选中/未选中）
• 自定义开/关标签
• 支持键盘导航
• 基于事件的变化检测
• 基于 CSS 的自定义
• 符合 WCAG 无障碍标准
• 轻量且响应迅速

文档和导航指南

开始使用 Switch

📄 阅读： references/getting-started.md

• TagHelper 注册和设置
• NuGet 包安装和验证
• 创建第一个 Switch 控件
• 设置开/关标签
• 基本初始化和渲染

Switch 属性和配置

📄 阅读： references/switch-properties.md

• 了解 Switch 属性（checked、disabled、name、value）
• 将属性绑定到 ASP.NET Core 模型
• 表单的数据模型集成
• 将 Switch 状态绑定到 C# 属性
• 默认值和初始状态

Switch 事件和状态管理

📄 阅读： references/switch-events.md

• 实现 change 事件处理程序
• 检测状态转换
• 使用 Switch 值提交表单
• 服务端验证
• 跟踪用户交互

样式设置和自定义

📄 阅读： references/styling-customization.md

• 用于自定义的 CSS 类（wrapper、handle、inner）
• 应用主题（Material、Fabric、Bootstrap）
• 使用 CSS 自定义外观
• 与 Theme Studio 集成
• 高级样式设置技巧

高级操作模式

📄 阅读： references/advanced-how-to.md

• 更改 Switch 尺寸（默认或小型）
• 启用从右到左（RTL）支持
• 阻止或拦截状态变化
• 根据条件设置禁用状态
• 通过表单提交 Switch 值

快速入门示例

基本 Switch 实现

@addTagHelper *, Syncfusion.EJ2


<div class="switch-container">
    <label>Enable Notifications</label>
    <ejs-switch id="switchId"></ejs-switch>
</div>

带标签的 Switch

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

带事件处理的 Switch

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

常见模式

模式 1：将 Switch 绑定到表单模型

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

模式 2：使用条件逻辑设置禁用状态

<ejs-switch id="premiumSwitch" 
            disabled="@(!Model.IsPremiumUser)">
</ejs-switch>

模式 3：组合多个 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>

主要属性

属性	类型	描述	使用场景
checked	boolean	初始状态（true = 开，false = 关）	设置页面加载时 Switch 的默认位置
disabled	boolean	禁用交互（true/false）	显示但禁止更改（权限、加载中）
name	string	HTML 表单 name 属性	表单提交和服务端绑定
value	string	HTML 表单 value 属性	发送到服务器的自定义值
onLabel	string	“开”状态下显示的文本	明确启用选项
offLabel	string	“关”状态下显示的文本	明确禁用选项
change	function	状态变化的事件处理程序	响应用户交互
cssClass	string	用于设置样式的自定义 CSS 类	应用主题或自定义外观

常见用例

1. 用户偏好设置 - 启用/禁用通知、电子邮件、分析跟踪
2. 功能开关 - 切换实验性功能、测试版、维护模式
3. 表单选项 - 接受/同意条款、同意共享数据、同意书
4. 管理员控制 - 启用/禁用用户、功能或系统设置
5. 订阅状态 - 激活/停用订阅、试用版、许可证

后续步骤

1. 从这里开始： 查看入门指南了解初始设置
2. 配置： 探索开关属性，以满足你的用例需求
3. 处理事件： 学习事件处理，实现交互功能
4. 自定义： 查看样式设置，调整外观

如需完整参考，请访问 Syncfusion ASP.NET Core Switch 文档。