syncfusion-aspnetcore-textbox

Name: syncfusion-aspnetcore-textbox
Author: syncfusion

github.com/syncfusion设计与 UI053 次安装2 周前更新

代码仓库

关于 syncfusion-aspnetcore-textbox

面向 ASP.NET Core 开发者的 Syncfusion TextBox 实现指南，涵盖表单输入、验证、自定义和无障碍功能，并采用 Tag Helper 语法。

主要功能

01浮动标签与占位文本
02验证状态与样式
03输入框前后缀和图标
04支持自动扩展的多行输入
05密码可见性切换
06模型绑定与事件处理

适用场景

01带验证的联系表单
02带图标的搜索框
03含字符计数的评论区
04无障碍注册表单

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-textbox

安装后在 Claude Code 中输入/syncfusion-aspnetcore-textbox确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

adornments-and-icons.md

advanced-patterns.md

floating-labels.md

getting-started.md

multiline-textarea.md

tag-helper-syntax.md

validation-states.md

详细介绍

在 ASP.NET Core 中实现 TextBox

TextBox 是一款基础输入组件，可让用户输入文本数据，并提供浮动标签、验证状态、装饰项（图标/按钮）和无障碍支持等高级功能。本技能将指导你使用 Syncfusion 的标记帮助程序语法，在 ASP.NET Core 应用程序中实现 TextBox。

何时使用此技能

在需要以下功能时使用此技能：

创建支持浮动标签和占位符的文本输入字段
添加验证视觉状态（成功、错误、警告）
在文本输入框中显示图标或按钮（前置/后置模板）
构建具有自动增长行为的多行文本区域
实现带有可见性切换功能的密码字段
创建符合 WCAG 2.2 AA 级标准的无障碍表单
将 TextBox 与 ASP.NET Core 模型和数据绑定集成

主要功能

功能	使用场景
浮动标签	构建专业的表单 UI，在输入框获得焦点时将标签浮动到上方
验证状态	使用错误、警告和成功类提供视觉反馈
装饰项	在输入框前后添加图标、按钮或文本
多行模式	创建可选自动增长的文本区域
图标组	将图标与浮动标签结合，提升用户体验
WCAG 合规性	内置无障碍支持，适用于屏幕阅读器和键盘导航
数据绑定	与 ASP.NET Core 模型进行双向绑定
事件处理	响应 Created、Change、Input、Focus 和 Blur 事件

文档导航指南

入门

📄 阅读： references/getting-started.md

先决条件和系统要求
安装 Syncfusion.EJ2.AspNet.Core NuGet 包
在 _ViewImports.cshtml 中配置 TagHelper
通过 CDN 添加样式表和脚本资源
注册脚本管理器
创建你的第一个 TextBox
运行和测试应用程序

标记帮助程序语法

📄 阅读： references/tag-helper-syntax.md

TextBox 标记帮助程序结构和属性
常用属性（Placeholder、Value、Readonly、Disabled）
与 ASP.NET Core 模型进行数据绑定
在标记帮助程序中绑定事件
标记帮助程序与编程方式的比较
最佳实践和性能提示

验证状态

📄 阅读： references/validation-states.md

实现错误、警告和成功验证状态
基于 CSS 类的验证样式
集成服务器端验证
客户端验证模式
实际表单验证示例
验证消息的无障碍支持

装饰项和图标

📄 阅读： references/adornments-and-icons.md

添加前置和后置模板
集成图标（FontAwesome、Material Icons、Bootstrap Icons）
实现密码可见性切换
清除按钮功能
单位指示符（货币、计量单位）
复杂装饰项模式

浮动标签

📄 阅读： references/floating-labels.md

FloatLabelType 属性（Auto、Always、Never）
设置浮动标签的样式和动画
使用浮动标签时的无障碍支持
动态标签定位模式
边缘情况和故障排除

多行 TextBox

📄 阅读： references/multiline-textarea.md

将 TextBox 转换为文本区域
配置 Multiline 属性
实现字符计数
自动增长和调整大小行为
多行模式下的占位符
多行 TextBox 中的验证
文本区域字段的无障碍支持

高级模式

📄 阅读： references/advanced-patterns.md

使用 HTML 帮助器进行数据绑定
使用 C# 和 JavaScript 以编程方式创建 TextBox
事件处理模式（Created、Change、Input、Focus、Blur）
基于模板的渲染
与 ASP.NET Core Forms 和验证集成
模型绑定示例
安全性：防止 XSS 和清理输入

快速入门示例

带浮动标签的基本 TextBox（Tag Helper）

@* Pages/Index.cshtml *@
<div class="form-group">
    <ejs-textbox id="email" 
                  placeholder="Enter email" 
                  floatLabelType="Auto"
                  type="email">
    </ejs-textbox>
</div>

在 _ViewImports.cshtml 中（一次性设置）

@addTagHelper *, Syncfusion.EJ2

在 _Layout.cshtml 中（一次性设置）

<head>
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
</head>
<body>
    @RenderBody()
    
    <script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
    <ejs-scripts></ejs-scripts>
</body>

结果

用户会看到：

带有占位文本“输入电子邮件”的输入框
聚焦或填入内容时，标签“电子邮件”会浮动到输入框上方
自动应用电子邮件验证

常见模式

模式 1：带验证状态的联系表单

<form asp-action="Submit">
    <div class="form-group">
        <ejs-textbox id="name" 
                      placeholder="Full Name" 
                      floatLabelType="Auto"
                      cssClass="e-success">
        </ejs-textbox>
        <small class="d-block mt-2">Name is valid</small>
    </div>

    <div class="form-group">
        <ejs-textbox id="email" 
                      placeholder="Email Address" 
                      floatLabelType="Auto"
                      cssClass="e-error">
        </ejs-textbox>
        <small class="text-danger d-block mt-2">Invalid email format</small>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

模式 2：带可见性切换的密码字段

<div class="form-group">
    <ejs-textbox id="password" 
                  type="password"
                  placeholder="Password" 
                  floatLabelType="Auto"
                  appendTemplate="<span class='e-input-group-icon' onclick='togglePassword()'>👁️</span>">
    </ejs-textbox>
</div>

<script>
    function togglePassword() {
        const input = document.getElementById('password');
        const type = input.type === 'password' ? 'text' : 'password';
        input.type = type;
    }
</script>

模式 3：带图标的搜索输入框

<div class="form-group">
    <ejs-textbox id="search" 
                  placeholder="Search products..." 
                  prependTemplate="<span class='e-input-group-icon'>🔍</span>"
                  floatLabelType="Auto">
    </ejs-textbox>
</div>

关键属性参考

属性	类型	默认值	用途
`id`	string	-	TextBox 的唯一标识符
`value`	string	-	初始文本值
`placeholder`	string	-	内容为空时显示的占位文本
`floatLabelType`	FloatLabelType	`Never`	标签动画（Auto、Always、Never）
`multiline`	bool	false	启用多行 textarea 模式
`readonly`	bool	false	阻止用户输入，但允许聚焦
`disabled`	bool	false	完全禁用输入框
`cssClass`	string	-	CSS 类（例如，“e-error”、“e-warning”、“e-success”）
`prependTemplate`	string	-	添加到输入框前面的 HTML 模板
`appendTemplate`	string	-	添加到输入框后面的 HTML 模板
`type`	string	"text"	输入类型（text、email、password、number 等）

常见用例

用例 1：联系表单构建器

创建具有浮动标签、验证和电子邮件/电话模式的专业联系表单：

适用场景： 收集用户联系信息
参考： validation-states.md
主要功能： 浮动标签、验证状态、模式验证

用例 2：搜索界面

实现带有前置图标和动态筛选功能的搜索框：

适用场景： 构建产品/内容搜索功能
参考： adornments-and-icons.md
主要功能： 图标装饰、事件处理

用例 3：反馈/评论区

构建用于用户评论的 textarea，支持字符计数和自动扩展：

适用场景： 创建反馈表单、评论区
参考： multiline-textarea.md
主要功能： 多行模式、字符限制、自动扩展

用例 4：无障碍注册表单

创建符合 WCAG 2.2 Level AA 标准的注册表单：

适用场景： 构建面向公众的注册表单
参考： advanced-patterns.md
主要功能： ARIA 标签、键盘导航、屏幕阅读器支持

后续步骤：

查看 getting-started.md，设置你的第一个 TextBox
选择你的用例，并按照相应的参考指南操作
复制代码示例并根据项目进行调整
对于复杂场景，请参阅 advanced-patterns.md

支持 Markdown

登录后评论