syncfusion-aspnetcore-textbox

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing TextBox in ASP.NET Core

在ASP.NET Core中实现TextBox组件

The TextBox is a fundamental input component that enables users to enter text data with advanced features like floating labels, validation states, adornments (icons/buttons), and accessibility support. This skill guides you through implementing TextBox in ASP.NET Core applications using Syncfusion's tag helper syntax.

TextBox是一款基础输入组件，支持用户输入文本数据，并具备浮动标签、验证状态、装饰元素（图标/按钮）和无障碍支持等高级功能。本指南将引导你使用Syncfusion的标签助手语法，在ASP.NET Core应用中实现TextBox组件。

When to Use This Skill

适用场景

Use this skill when you need to:

Create text input fields with floating labels and placeholder support
Add validation visual states (success, error, warning)
Display icons or buttons within text inputs (prepend/append templates)
Build multiline textarea fields with auto-grow behavior
Implement password fields with visibility toggles
Create accessible forms following WCAG 2.2 Level AA standards
Integrate TextBox with ASP.NET Core models and data binding

当你需要以下功能时，可使用本指南：

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

Key Features

核心功能

Feature	Use Case
Floating Labels	Professional form UI that floats labels above input on focus
Validation States	Visual feedback with error, warning, and success classes
Adornments	Add icons, buttons, or text before/after the input
Multiline Mode	Create textarea fields with optional auto-grow
Icon Groups	Combine icons with floating labels for better UX
WCAG Compliance	Built-in accessibility support for screen readers and keyboard navigation
Data Binding	Two-way binding with ASP.NET Core models
Event Handling	Respond to Created, Change, Input, Focus, and Blur events

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

Documentation Navigation Guide

文档导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Prerequisites and system requirements
Installing Syncfusion.EJ2.AspNet.Core NuGet package
Configuring TagHelper in _ViewImports.cshtml
Adding stylesheets and script resources via CDN
Registering the script manager
Creating your first TextBox
Running and testing the application

📄 阅读： references/getting-started.md

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

Tag Helper Syntax

标签助手语法

📄 Read: references/tag-helper-syntax.md

TextBox tag helper structure and properties
Common properties (Placeholder, Value, Readonly, Disabled)
Data binding with ASP.NET Core models
Event binding in tag helpers
Tag helper vs programmatic approaches
Best practices and performance tips

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

TextBox标签助手的结构和属性
常用属性（Placeholder、Value、Readonly、Disabled）
与ASP.NET Core模型的数据绑定
标签助手中的事件绑定
标签助手与编程式实现的对比
最佳实践和性能优化建议

Validation States

验证状态

📄 Read: references/validation-states.md

Implementing error, warning, and success validation states
CSS class-based validation styling
Server-side validation integration
Client-side validation patterns
Real-world form validation examples
Accessibility for validation messages

📄 阅读： references/validation-states.md

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

Adornments and Icons

装饰元素与图标

📄 Read: references/adornments-and-icons.md

Adding prepend and append templates
Icon integration (FontAwesome, Material Icons, Bootstrap Icons)
Password visibility toggle implementation
Clear button functionality
Unit indicators (currency, measurements)
Complex adornment patterns

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

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

Floating Labels

浮动标签

📄 Read: references/floating-labels.md

FloatLabelType property (Auto, Always, Never)
Styling and animating floating labels
Accessibility with floating labels
Dynamic label positioning patterns
Edge cases and troubleshooting

📄 阅读： references/floating-labels.md

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

Multiline TextBox

多行TextBox

📄 Read: references/multiline-textarea.md

Converting TextBox to textarea
Multiline property configuration
Character counting implementation
Auto-grow and resize behavior
Placeholder in multiline mode
Validation in multiline TextBox
Accessibility for textarea fields

📄 阅读： references/multiline-textarea.md

将TextBox转换为文本域
多行属性配置
字符计数实现
自动扩展与调整大小行为
多行模式下的占位符
多行TextBox的验证
文本域的无障碍支持

Advanced Patterns

高级模式

📄 Read: references/advanced-patterns.md

Data binding with HTML helpers
Programmatic TextBox creation with C# and JavaScript
Event handling patterns (Created, Change, Input, Focus, Blur)
Template-based rendering
Integration with ASP.NET Core Forms and Validation
Model binding examples
Security: XSS prevention and input sanitization

📄 阅读： references/advanced-patterns.md

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

Quick Start Example

快速入门示例

Basic TextBox with Floating Label (Tag Helper)

带浮动标签的基础TextBox（标签助手）

cshtml

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

cshtml

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

In _ViewImports.cshtml (one-time setup)

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

cshtml

@addTagHelper *, Syncfusion.EJ2

cshtml

@addTagHelper *, Syncfusion.EJ2

In _Layout.cshtml (one-time setup)

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

html

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

html

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

Result

效果

User sees:

Input field with placeholder "Enter email"
When focused or filled, label "email" floats above the input
Email validation applied automatically

用户将看到：

带有占位符“Enter email”的输入框
当输入框获得焦点或已填写内容时，标签“email”会浮动到输入框上方
自动应用邮箱验证

Common Patterns

常见模式

Pattern 1: Contact Form with Validation States

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

cshtml

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

cshtml

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

Pattern 2: Password Field with Visibility Toggle

模式2：带可见性切换的密码输入框

cshtml

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

cshtml

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

Pattern 3: Search Input with Icon

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

cshtml

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

cshtml

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

Key Properties Reference

核心属性参考

Property	Type	Default	Purpose
`id`	string	-	Unique identifier for the TextBox
`value`	string	-	Initial text value
`placeholder`	string	-	Placeholder text displayed when empty
`floatLabelType`	FloatLabelType	`Never`	Label animation (Auto, Always, Never)
`multiline`	bool	false	Enable multiline textarea mode
`readonly`	bool	false	Prevent user input while allowing focus
`disabled`	bool	false	Disable input completely
`cssClass`	string	-	CSS classes (e.g., "e-error", "e-warning", "e-success")
`prependTemplate`	string	-	HTML template prepended to input
`appendTemplate`	string	-	HTML template appended to input
`type`	string	"text"	Input type (text, email, password, number, etc.)

属性	类型	默认值	用途
`id`	string	-	TextBox的唯一标识符
`value`	string	-	初始文本值
`placeholder`	string	-	输入框为空时显示的占位文本
`floatLabelType`	FloatLabelType	`Never`	标签动画类型（Auto、Always、Never）
`multiline`	bool	false	启用多行文本域模式
`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等）

Common Use Cases

常见用例

Use Case 1: Contact Form Builder

用例1：联系表单构建器

Create a professional contact form with floating labels, validation, and email/phone patterns:

When: Building user contact information collection
Reference: validation-states.md
Key Features: Floating labels, validation states, pattern validation

创建带有浮动标签、验证和邮箱/电话格式验证的专业联系表单：

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

Use Case 2: Search Interface

用例2：搜索界面

Implement a search box with prepended icon and dynamic filtering:

When: Building product/content search features
Reference: adornments-and-icons.md
Key Features: Icon adornments, event handling

实现带有前置图标和动态过滤的搜索框：

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

Use Case 3: Feedback/Comments Section

用例3：反馈/评论区

Build textarea for user comments with character counting and auto-grow:

When: Creating feedback forms, comment sections
Reference: multiline-textarea.md
Key Features: Multiline mode, character limit, auto-grow

构建带有字符计数和自动扩展功能的用户评论文本域：

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

Use Case 4: Accessible Registration Form

用例4：可访问注册表单

Create a registration form following WCAG 2.2 Level AA standards:

When: Building public-facing registration forms
Reference: advanced-patterns.md
Key Features: ARIA labels, keyboard navigation, screen reader support

Next Steps:

Review getting-started.md to set up your first TextBox
Choose your use case and follow the corresponding reference guide
Copy code examples and adapt to your project
Refer to advanced-patterns.md for complex scenarios

创建遵循WCAG 2.2 Level AA标准的注册表单：

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

下一步：

查看getting-started.md搭建你的第一个TextBox
根据你的使用场景选择对应的参考指南
复制代码示例并适配你的项目
复杂场景请参考advanced-patterns.md