syncfusion-aspnetcore-textbox

ASP.NET Core での TextBox の実装

TextBox は基本的な入力コンポーネントで、フローティングラベル、検証状態、装飾（アイコン／ボタン）、アクセシビリティ対応などの高度な機能を備え、ユーザーがテキストデータを入力できるようにします。このスキルでは、Syncfusion のタグヘルパー構文を使用して、ASP.NET Core アプリケーションに TextBox を実装する方法を説明します。

このスキルを使用する場面

次のことが必要な場合に、このスキルを使用してください。

• フローティングラベルとプレースホルダーに対応したテキスト入力フィールドを作成する
• 検証状態（成功、エラー、警告）を視覚的に表示する
• テキスト入力内にアイコンやボタンを表示する（前置／後置テンプレート）
• 自動拡張動作を備えた複数行のテキストエリアフィールドを作成する
• 表示切り替え機能を備えたパスワードフィールドを実装する
• WCAG 2.2 レベル AA 規格に準拠したアクセシブルなフォームを作成する
• TextBox を ASP.NET Core のモデルおよびデータバインディングと統合する

主な機能

機能	使用例
フローティングラベル	フォーカス時にラベルが入力欄の上に移動する、プロフェッショナルなフォーム UI
検証状態	エラー、警告、成功をクラスで視覚的にフィードバック
装飾	入力欄の前後にアイコン、ボタン、テキストを追加
複数行モード	オプションの自動拡張機能を備えたテキストエリアフィールドを作成
アイコングループ	アイコンとフローティングラベルを組み合わせて UX を向上
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（タグヘルパー）

@* 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. プレースホルダー「Enter email」付きの入力フィールド
2. フォーカス時または入力後に、ラベル「email」が入力欄の上に浮かび上がります
3. メールアドレスの検証が自動的に適用されます

よく使われるパターン

パターン 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	複数行のテキストエリアモードを有効にします
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：フィードバック／コメントセクション

文字数カウントと自動拡張に対応した、ユーザーコメント用のテキストエリアを作成します。

• 対象： フィードバックフォームやコメントセクションを作成する場合
• 参照： multiline-textarea.md
• 主な機能： 複数行モード、文字数制限、自動拡張

ユースケース 4：アクセシブルな登録フォーム

WCAG 2.2 レベル AA 規格に準拠した登録フォームを作成します。

• 対象： 一般ユーザー向けの登録フォームを構築する場合
• 参照： advanced-patterns.md
• 主な機能： ARIA ラベル、キーボード操作、スクリーンリーダーのサポート

---

次のステップ：

1. getting-started.md を参照して、最初の TextBox を設定します
2. ユースケースを選び、対応するリファレンスガイドに従います
3. コード例をコピーして、プロジェクトに合わせて調整します
4. 複雑なシナリオについては、advanced-patterns.md を参照してください