syncfusion-aspnetcore-textbox（同步融合 aspnetcore 文本框）

Implementing TextBox in ASP.NET Core

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.

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

Key Features

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

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

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

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

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

Multiline 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

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

Quick Start Example

Basic TextBox with Floating Label (Tag Helper)

@* 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)

@addTagHelper *, Syncfusion.EJ2

In _Layout.cshtml (one-time setup)

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

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

Common Patterns

Pattern 1: Contact Form with Validation States

<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

<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

<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

Common Use Cases

Use Case 1: Contact Form Builder

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

Use Case 2: Search Interface

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

Use Case 3: Feedback/Comments Section

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

Use Case 4: Accessible Registration Form

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:

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