syncfusion-aspnetcore-inputs

实现 Syncfusion ASP.NET Core 输入控件

Uploader

Uploader 是一款高级文件上传控件，支持分块上传、拖放、验证、进度跟踪和预览等功能，可让用户异步上传文件。它还支持多个文件、模板、安全验证和表单集成。

导航指南

入门

📄 阅读： references/uploader-getting-started.md

• NuGet 包安装与设置
• 标记帮助程序注册以及脚本和样式引用
• 使用 <ejs-uploader> 渲染基本的 Uploader
• 自动上传与手动上传
• SaveUrl/RemoveUrl 配置
• 选择多个文件

异步上传

📄 阅读： references/uploader-async-upload.md

• <e-uploader-asyncsettings> 子标记及其 SaveUrl/RemoveUrl
• 顺序上传与同时上传
• 使用 progress 事件跟踪进度
• 成功/失败事件处理
• 控制器端点模式

分块上传

📄 阅读： references/uploader-chunk-upload.md

• 使用 chunkSize 启用分块上传
• 使用 retryCount 和 retryAfterDelay 设置重试逻辑
• 暂停/恢复操作
• 大文件处理
• 服务器端分块处理

文件验证

📄 阅读： references/uploader-file-validation.md

• 使用 allowedExtensions 限制文件类型
• 使用 minFileSize 和 maxFileSize 限制文件大小
• 文件数量限制
• 重复文件检测
• 通过 selected 事件进行自定义验证

拖放支持

📄 阅读： references/uploader-drag-drop-support.md

• 默认拖放区域
• 使用 dropArea 选择器指定自定义放置区域
• 粘贴上传功能
• 使用 directoryUpload 上传目录/文件夹
• 拖入/拖出事件

模板与样式

📄 阅读： references/uploader-templates-and-styling.md

• 自定义文件列表模板
• 按钮自定义
• 进度条样式
• CSS 类（e-primary、e-success 等）
• 主题支持（Fluent、Material、Bootstrap）

高级模式

📄 阅读： references/uploader-advanced-patterns.md

• 使用上传的文件提交表单
• 目录上传
• 安全注意事项（路径遍历、MIME 验证）
• 文件预览（图像）
• 错误处理模式

API 参考

📄 阅读： references/uploader-api.md

• 所有属性的类型、默认值和说明
• 所有事件（selected、uploading、success、failure、progress 等）
• AsyncSettings 子属性
• CSS 类参考表
• 完整的标记帮助程序属性语法

---

快速入门

1. 安装 NuGet 包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在 ~/Pages/_ViewImports.cshtml 中注册标记帮助程序：

@addTagHelper *, Syncfusion.EJ2

3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. 在 <body> 末尾添加 Script Manager：

<ejs-scripts></ejs-scripts>

5. 渲染 Uploader：

<ejs-uploader id="uploader" autoUpload="true">
    <e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
    </e-uploader-asyncsettings>
</ejs-uploader>

---

常见模式

使用 SaveUrl/RemoveUrl 进行异步上传

<ejs-uploader id="uploader" autoUpload="true" multiple="true">
    <e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
    </e-uploader-asyncsettings>
</ejs-uploader>

分块上传

<ejs-uploader id="chunkUploader" autoUpload="true">
    <e-uploader-asyncsettings saveUrl="Home/SaveChunk" 
                              removeUrl="Home/Remove"
                              chunkSize="1048576">
    </e-uploader-asyncsettings>
</ejs-uploader>

文件验证

<ejs-uploader id="validatedUploader" 
    allowedExtensions=".jpg,.png,.pdf"
    maxFileSize="5242880"
    minFileSize="1024"
    multiple="false">
    <e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
    </e-uploader-asyncsettings>
</ejs-uploader>

使用自定义区域进行拖放

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
    Drop files here
</div>
<ejs-uploader id="uploader" dropArea="#dropArea" autoUpload="true">
    <e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
    </e-uploader-asyncsettings>
</ejs-uploader>

---

NumericTextBox

NumericTextBox 是一种文本输入控件，可让用户输入数值，并支持格式化、验证、微调按钮、小数精度和全球化。它还支持与 ASP.NET Core 模型进行双向绑定。

导航指南

入门

📄 阅读： references/numeric-textbox-getting-started.md

• NuGet 包安装与设置
• 标记帮助程序注册以及脚本和样式引用
• 使用 <ejs-numerictextbox> 渲染基本的 NumericTextBox
• 设置值、最小值和最大值
• NumericTextBoxFor 模型绑定

格式和验证

📄 阅读： references/numeric-textbox-formats-and-validation.md

• 货币（c2）、百分比（p2）、十进制格式
• 最小值/最大值范围验证
• 使用 strictMode 将超出范围的值限制在范围内
• 自定义格式字符串
• 使用 validateOnType 实时验证

装饰元素和样式

📄 阅读： references/numeric-textbox-adornments-and-styling.md

• 使用模板添加前置/后置装饰元素
• 货币符号、百分比图标
• 尺寸类（e-small、e-bigger）
• CSS 自定义和主题

微调按钮和步长

📄 阅读： references/numeric-textbox-spin-buttons-and-step.md

• 使用 showSpinButton 显示/隐藏微调按钮
• 递增/递减步长值
• 键盘导航（向上/向下箭头键）
• 自定义步长模式

精度和小数位数

📄 阅读： references/numeric-textbox-precision-decimals.md

• 使用 decimals 属性设置小数精度
• 使用 validateDecimalOnType 实时验证小数
• strictMode 行为
• 货币和百分比精度

双向绑定和表单

📄 阅读： references/numeric-textbox-two-way-binding-forms.md

• NumericTextBoxFor 模型绑定
• 使用 POST 提交表单
• 服务端验证
• 与 HTML 表单集成的标记帮助程序

国际化和无障碍

📄 阅读： references/numeric-textbox-globalization-accessibility.md

• 使用 locale 属性设置区域性
• 为非英语区域性加载 CLDR 数据
• 使用 enableRtl 支持阿拉伯语、希伯来语
• 符合 WCAG 2.2 标准并支持 ARIA 属性
• 键盘导航和屏幕阅读器支持

API 参考

📄 阅读： references/numeric-textbox-api.md

• 所有属性及其类型、默认值和说明
• 所有事件（change、input、focus、blur、created、destroyed）
• CSS 类参考表
• 枚举值（FloatLabelType 等）
• 完整的标记帮助程序属性语法

---

快速入门

1. 安装 NuGet 包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在 ~/Pages/_ViewImports.cshtml 中注册标记帮助程序：

@addTagHelper *, Syncfusion.EJ2

3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. 在 <body> 末尾添加脚本管理器：

<ejs-scripts></ejs-scripts>

5. 渲染 NumericTextBox：

<ejs-numerictextbox id="price" min="0" max="10000" value="100" 
                    format="c2" placeholder="Enter price">
</ejs-numerictextbox>

---

常见模式

货币格式

<ejs-numerictextbox id="amount" format="c2" min="0" value="100">
</ejs-numerictextbox>

带步长的百分比

<ejs-numerictextbox id="percentage" format="p2" min="0" max="100" 
                    step="5" showSpinButton="true">
</ejs-numerictextbox>

NumericTextBoxFor（模型绑定）

@model AppModel
<ejs-numerictextboxfor id="quantity" for="@Model.Quantity">
</ejs-numerictextboxfor>

带验证

<ejs-numerictextbox id="age" min="18" max="100" strictMode="true" 
                    validateOnType="true" placeholder="Enter age">
</ejs-numerictextbox>

---

OTP 输入

OTP 输入（一次性密码）是一种专用输入控件，用于输入验证码、OTP、PIN 或任意固定长度的字母数字序列。支持多种输入类型（数字、文本、密码）、样式模式和无障碍功能。

导航指南

入门

📄 阅读： references/otp-input-getting-started.md

• NuGet 包安装和设置
• 标记帮助程序注册以及脚本/样式引用
• 使用 <ejs-otpinput> 基本渲染 OTP
• 设置长度和类型
• 用于验证的 ValueChanged 事件

配置

📄 阅读： references/otp-input-configuration.md

• 输入类型：数字、文本、密码
• 样式模式：描边、填充、下划线
• 占位文本（单个或每个字段分别设置）
• 字段间的分隔符
• 禁用状态和 CSS 类

事件

📄 阅读： references/otp-input-events.md

• Created、Input、ValueChanged、Focus、Blur 事件
• 实时反馈模式
• 完成时自动提交
• 超时处理
• 验证反馈

无障碍功能

📄 阅读： references/otp-input-accessibility.md

• 符合 WCAG 2.2 AA 标准
• WAI-ARIA 属性（role、aria-label、aria-required）
• 完整的键盘交互表
• 屏幕阅读器支持
• 支持阿拉伯语、希伯来语的 RTL 布局

API 参考

📄 阅读： references/otp-input-api.md

• 所有属性（length、type、stylingMode、separator 等）
• 所有事件及其说明
• CSS 类参考
• 完整的标签助手属性语法

---

快速开始

1. 安装 NuGet 包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在 ~/Pages/_ViewImports.cshtml 中注册标签助手：

@addTagHelper *, Syncfusion.EJ2

3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. 在 <body> 末尾添加脚本管理器：

<ejs-scripts></ejs-scripts>

5. 渲染 OTP 输入框：

<ejs-otpinput id="otp" length="6" type="number" 
              placeholder="0" valueChanged="onOtpComplete">
</ejs-otpinput>

---

常见模式

6 位数字 OTP

<ejs-otpinput id="otp" length="6" type="number" 
              placeholder="0" autoFocus="true">
</ejs-otpinput>

带分隔符的字母数字 OTP

<ejs-otpinput id="otp" length="6" type="text" 
              separator="-" stylingMode="filled">
</ejs-otpinput>

密码类型 OTP（隐藏）

<ejs-otpinput id="otp" length="4" type="password">
</ejs-otpinput>

---

文本区域

TextArea 是一种多行文本输入控件，支持浮动标签、装饰元素、字符数限制、调整大小模式、验证、表单集成和无障碍功能。它还支持以编程方式管理值的方法。

导航指南

入门

📄 阅读： references/textarea-getting-started.md

• NuGet 包安装和设置
• 标签助手注册以及脚本和样式引用
• 使用 <ejs-textarea> 渲染基本 TextArea
• 设置行数、列数和值
• TextAreaFor 模型绑定

浮动标签

📄 阅读： references/textarea-floating-label.md

• floatLabelType 模式：Auto、Always、Never
• Material 风格的浮动标签
• 各模式的适用场景

装饰元素

📄 阅读： references/textarea-adornments.md

• 前置/后置模板装饰元素
• 使用 adornmentFlow 设置图标位置
• 货币符号、字符计数器
• 交互式装饰元素

调整大小

📄 阅读： references/textarea-resize.md

• 调整大小模式：Both、Vertical、Horizontal、None
• 使用 cssClass 添加样式
• 禁用调整大小
• 自动调整大小模式

最大长度

📄 阅读： references/textarea-max-length.md

• 使用 maxLength 属性限制字符数
• 实时字符计数器
• 用户反馈模式
• 服务端验证

行、列和尺寸

📄 阅读： references/textarea-rows-columns-sizing.md

• rows 和 cols 属性
• 自定义宽度和高度
• 基于 CSS 的尺寸设置
• 响应式行为

表单支持

📄 阅读： references/textarea-form-support.md

• HTML 表单集成
• 使用 FormValidator 进行客户端验证
• 使用 POST 提交表单
• 使用 TextAreaFor 进行模型绑定

样式和外观

📄 阅读： references/textarea-styling-appearance.md

• 尺寸类（e-small、e-bigger）
• 填充模式与轮廓模式
• CSS 自定义和主题
• 验证状态（e-success、e-error、e-warning）

值和内容

📄 阅读： references/textarea-value-and-content.md

• 以编程方式设置/获取值
• 从服务端加载数据
• 默认值和占位符
• JavaScript 互操作

方法

📄 阅读： references/textarea-methods.md

• focusIn() 和 focusOut() 方法
• 使用 getPersistData() 持久化状态
• 使用 reset() 清除值
• addAttributes() 和 removeAttributes()

事件

📄 阅读： references/textarea-events.md

• Created、Input、Change、Focus、Blur、Destroyed 事件
• 事件参数和使用模式
• 实际场景（字符计数器、自动保存、验证）

无障碍

📄 阅读： references/textarea-accessibility.md

• 符合 WCAG 2.2 AA 标准
• WAI-ARIA 属性
• 完整的键盘交互表
• 屏幕阅读器支持和 RTL

API 参考

📄 阅读： references/textarea-api.md

• 所有属性及其类型、默认值和说明
• 所有事件（Created、Input、Change、Focus、Blur、Destroyed）
• CSS 类参考表
• 枚举值（FloatLabelType、ResizeMode 等）
• 完整的标记帮助程序属性语法

---

快速入门

1. 安装 NuGet 包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper：

@addTagHelper *, Syncfusion.EJ2

3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. 在 <body> 末尾添加 Script Manager：

<ejs-scripts></ejs-scripts>

5. 渲染 TextArea：

<ejs-textarea id="comment" rows="4" cols="50" 
              placeholder="Enter your comment..." maxLength="500">
</ejs-textarea>

---

常见模式

基本多行输入

<ejs-textarea id="description" rows="5" cols="60" 
              placeholder="Enter description">
</ejs-textarea>

浮动标签

<ejs-textarea id="notes" rows="4" 
              floatLabelType="Auto" 
              placeholder="Notes">
</ejs-textarea>

设置最大长度

<ejs-textarea id="feedback" rows="4" maxLength="500" 
              placeholder="Your feedback">
</ejs-textarea>

双向调整大小

<ejs-textarea id="content" rows="6" 
              cssClass="e-resize-both">
</ejs-textarea>

---

TextBox

TextBox 是一种单行文本输入控件，支持多种输入类型（文本、密码、电子邮件、数字等）、浮动标签、装饰元素、验证状态、图标按钮、清除功能和多行模式。它还提供全面的无障碍功能和样式选项。

导航指南

入门

📄 阅读： references/textbox-getting-started.md

• NuGet 包安装和设置
• Tag Helper 注册以及脚本和样式引用
• 使用 <ejs-textbox> 渲染基本 TextBox
• 输入类型（text、email、password、number、tel、url、search）
• TextBoxFor 模型绑定

样式和尺寸

📄 阅读： references/textbox-styling-and-sizing.md

• 预定义尺寸类（e-small、e-bigger）
• 圆角
• CSS 自定义和主题
• 填充和轮廓模式

功能和分组

📄 阅读： references/textbox-features-and-groups.md

• 浮动标签（Auto、Always、Never）
• 前缀和后缀图标
• 使用 showClearButton 的清除按钮
• 用于组合输入的分组模板
• 附加图标

高级功能

📄 阅读： references/textbox-advanced-features.md

• 前置/后置装饰元素
• TextBox 内的交互元素
• HTML5 输入类型（date、time、color、range）
• 输入事件处理

多行和扩展

📄 阅读： references/textbox-multiline-and-expansion.md

• 创建多行 TextBox
• 自动扩展行为
• 多行模式下的浮动标签
• 调整大小模式

验证和状态

📄 阅读： references/textbox-validation-and-states.md

• 有效/无效 CSS 类（e-success、e-error、e-warning）
• 禁用和只读状态
• HTML5 验证集成
• FormValidator 集成

无障碍和迁移

📄 阅读： references/textbox-accessibility-and-migration.md

• 符合 WCAG 2.2 AA 标准
• WAI-ARIA 属性
• 完整的键盘交互表
• 屏幕阅读器支持和 RTL
• 从 ASP.NET Web Forms 迁移的指南

API 参考

📄 阅读： references/textbox-api.md

• 所有属性及其类型、默认值和说明
• 所有事件（input、change、focus、blur、created、destroyed）
• CSS 类参考表
• 枚举值（InputType、FloatLabelType）
• 完整的标记帮助程序属性语法

---

快速入门

1. 安装 NuGet 包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper：

@addTagHelper *, Syncfusion.EJ2

3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. 在 <body> 末尾添加 Script Manager：

<ejs-scripts></ejs-scripts>

5. 渲染 TextBox：

<ejs-textbox id="email" placeholder="Enter email" 
             floatLabelType="Auto" type="email">
</ejs-textbox>

---

常见模式

带浮动标签的电子邮件

<ejs-textbox id="email" type="email" 
             floatLabelType="Auto" 
             placeholder="Email Address">
</ejs-textbox>

带可见性切换的密码

<ejs-textbox id="password" type="password" 
             showClearButton="true" 
             placeholder="Password">
</ejs-textbox>

带图标装饰

<ejs-textbox id="search" placeholder="Search..." 
             prefixIcon="e-search">
</ejs-textbox>

TextBoxFor（模型绑定）

@model AppModel
<ejs-textboxfor id="username" for="@Model.Username" 
                placeholder="Username">
</ejs-textboxfor>

---

范围滑块

范围滑块（<ejs-slider>）是一种多功能输入控件，允许用户选择单个值或一段值范围。它支持水平／垂直方向、刻度、工具提示、格式化、自定义限制和颜色范围。

导航指南

入门

📄 阅读： references/range-slider-getting-started.md

• NuGet 包安装和设置
• 标记帮助程序注册以及脚本／样式引用
• 使用 <ejs-slider> 渲染基本滑块
• 设置值、最小值和最大值
• 注册 Syncfusion Script Manager

类型和方向

📄 阅读： references/range-slider-types-and-orientation.md

• 滑块类型：Default、MinRange、Range
• 水平与垂直方向
• 单值与范围值选择
• 视觉差异和使用场景

工具提示和刻度

📄 阅读： references/range-slider-tooltips-and-ticks.md

• 工具提示的显示和位置（Before、After）
• 自定义工具提示格式
• 使用 showTicks 显示刻度
• 刻度位置和标签
• 小步长和大步长刻度

格式化和限制

📄 阅读： references/range-slider-formatting-and-limits.md

• 自定义值格式（货币、百分比）
• 最小值／最大值限制
• 步长值
• 动态更新范围

事件和方法

📄 阅读： references/range-slider-events-and-methods.md

• Change、Input、slideStart、slideEnd 事件
• getValue、setValue、refresh 方法
• 以编程方式管理值
• 事件流程和模式

样式

📄 阅读： references/range-slider-styling.md

• 自定义轨道和滑块的 CSS
• 颜色范围（e-primary、e-success、e-warning、e-danger）
• 渐变轨道
• 主题支持

无障碍功能

📄 阅读： references/range-slider-accessibility.md

• 符合 WCAG 2.2 AA 标准
• WAI-ARIA 属性（aria-valuemin、aria-valuemax、aria-valuenow）
• 完整的键盘交互表
• 屏幕阅读器支持和 RTL

API 参考

📄 阅读： references/range-slider-api.md

• 所有属性及其类型、默认值和说明
• 所有事件（Change、Input、SlideStart、SlideEnd、Created、Destroyed）
• 所有方法（getValue、setValue、refresh、destroy）
• CSS 类参考表
• 完整的标记帮助程序属性语法

---

快速开始

1. 安装 NuGet 包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在 ~/Pages/_ViewImports.cshtml 中注册标记帮助程序：

@addTagHelper *, Syncfusion.EJ2

3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. 在 <body> 末尾添加 Script Manager：

<ejs-scripts></ejs-scripts>

5. 渲染范围滑块：

<ejs-slider id="volume" min="0" max="100" value="30" type="MinRange">
</ejs-slider>

---

常见模式

默认单值滑块

<ejs-slider id="default" value="30"></ejs-slider>

带工具提示的 MinRange 滑块

<ejs-slider id="minrange" value="30" type="MinRange" 
            showButtons="true">
</ejs-slider>

范围滑块（两个滑块）

<ejs-slider id="range" value="@ViewBag.range" type="Range">
</ejs-slider>

垂直方向

<div style="height: 300px;">
    <ejs-slider id="vertical" value="50" orientation="Vertical">
    </ejs-slider>
</div>

带刻度和工具提示

<ejs-slider id="tickSlider" min="0" max="100" value="40" 
            showTicks="true" tooltipPlacement="Before">
</ejs-slider>

---

签名

Signature 是一种数字签名采集控件，允许用户使用鼠标、触控或笔在画布上绘制签名。它支持笔画自定义、撤销／重做、清除、保存（base64、blob、图像）、加载现有签名、禁用／只读状态以及工具栏集成。

导航指南

入门

📄 阅读： references/signature-getting-started.md

• NuGet 包安装和设置
• 标记帮助程序注册以及脚本／样式引用
• 使用 <ejs-signature> 渲染基本签名控件
• 画布尺寸和样式
• 将签名捕获为数据 URL

自定义

📄 阅读： references/signature-customization.md

• 使用 strokeColor 设置线条颜色
• 使用 maxStrokeWidth 和 minStrokeWidth 设置线条粗细
• 使用 velocity 设置压力感应的线条宽度
• 使用 backgroundColor 和 backgroundImage 设置背景
• 使用 saveWithBackground 控制是否包含背景

用户交互

📄 阅读： references/signature-user-interaction.md

• 撤销和重做操作
• 清空画布
• Disabled 和 ReadOnly 状态
• 检查 isEmpty 和 canUndo/canRedo
• 完整的按钮集成示例

打开和保存

📄 阅读： references/signature-open-save.md

• 使用 getSignature() 获取 base64 PNG
• 使用 saveAsBlob() 获取 Blob 对象
• 使用 getBlob() 获取原始数据
• 使用 save() 下载
• 使用 load() 恢复签名

工具栏集成

📄 阅读： references/signature-toolbar-integration.md

• 集成带有撤销/重做/清除/保存功能的 Syncfusion 工具栏
• 按钮状态管理（canUndo、canRedo、isEmpty）
• 自定义工具栏布局
• 实时事件处理

无障碍

📄 阅读： references/signature-accessibility.md

• 符合 WCAG 2.2 AA
• WAI-ARIA 属性
• 键盘快捷键（Ctrl+Z、Ctrl+Y、Ctrl+S、Delete）
• 屏幕阅读器支持和 RTL

API 参考

📄 阅读： references/signature-api.md

• 所有属性（strokeColor、maxStrokeWidth、backgroundColor 等）
• 所有方法（undo、redo、clear、save、load、getSignature、saveAsBlob）
• 所有事件（change、created、destroyed）
• CSS 类参考表
• 完整的标签助手属性语法

---

快速入门

1. 安装 NuGet 包：

Install-Package Syncfusion.EJ2.AspNet.Core

2. 在 ~/Pages/_ViewImports.cshtml 中注册标签助手：

@addTagHelper *, Syncfusion.EJ2

3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本：

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

4. 在 <body> 末尾添加 Script Manager：

<ejs-scripts></ejs-scripts>

5. 渲染签名：

<div class="wrap">
    <ejs-signature id="signature" strokeColor="#000000" 
                   maxStrokeWidth="2">
    </ejs-signature>
</div>

<style>
    .wrap { margin: 0 auto; width: 300px; text-align: center; }
    #signature { border: 1px solid lightgray; height: 100%; width: 100%; }
</style>

---

常见模式

添加撤销/重做/清除按钮

<div class="wrap">
    <ejs-button id="undoBtn" content="Undo" disabled="true"></ejs-button>
    <ejs-button id="redoBtn" content="Redo" disabled="true"></ejs-button>
    <ejs-button id="clearBtn" content="Clear" disabled="true"></ejs-button>
    <ejs-signature id="signature" change="change"></ejs-signature>
</div>

<script>
    var signature = document.getElementById("signature").ej2_instances[0];
    
    document.getElementById("undoBtn").addEventListener('click', function () {
        if (!signature.isReadOnly && !signature.disabled) signature.undo();
    });
    document.getElementById("redoBtn").addEventListener('click', function () {
        if (!signature.isReadOnly && !signature.disabled) signature.redo();
    });
    document.getElementById("clearBtn").addEventListener('click', function () {
        if (!signature.isReadOnly && !signature.disabled) signature.clear();
    });
    
    function change() {
        document.getElementById("undoBtn").ej2_instances[0].disabled = !signature.canUndo();
        document.getElementById("redoBtn").ej2_instances[0].disabled = !signature.canRedo();
        document.getElementById("clearBtn").ej2_instances[0].disabled = signature.isEmpty();
    }
</script>

保存为 Base64

<ejs-signature id="signature"></ejs-signature>
<ejs-button id="saveBtn" content="Save"></ejs-button>

<script>
    document.getElementById("saveBtn").addEventListener('click', function () {
        var sig = document.getElementById("signature").ej2_instances[0];
        var imageData = sig.getSignature();
        console.log('Base64:', imageData);
    });
</script>

自定义笔画设置

<ejs-signature id="signature" 
               strokeColor="#0066cc" 
               maxStrokeWidth="3" 
               minStrokeWidth="1" 
               velocity="0.5">
</ejs-signature>