syncfusion-aspnetcore-multiselect

ASP.NET Core での MultiSelect の実装

MultiSelect は、フィルタリング、テンプレート、チェックボックス、グループ化、完全なアクセシビリティサポートなどの機能を備えた、複数の値を定義済みリストから選択できる高度なドロップダウンコンポーネントです。このスキルでは、Syncfusion のタグヘルパー構文を使用して、ASP.NET Core アプリケーションに MultiSelect を実装する方法を説明します。

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

次のような場合に、このスキルを使用してください。

• ユーザーが複数のオプションを選択できるドロップダウンフィールドを作成する
• 大量のオプションを含むリストに検索／フィルタリング機能を追加する
• 選択した項目を削除可能なチップとして表示する
• 明確な複数選択 UI を実現するためにチェックボックスを実装する
• ローカル配列またはリモートデータソースにバインドする
• テンプレートでリスト項目の外観をカスタマイズする
• 関連するオプションをカテゴリ別にグループ化する
• WCAG 2.2 のアクセシビリティ準拠を確保する
• 複雑な選択シナリオ（連動、カスタム値）に対応する

主な機能

機能	使用例
複数選択	ドロップダウンリストから複数の値を選択
フィルタリングと検索	大量のリストを効率的に検索
チェックボックス	チェックボックスモードで複数選択を視覚的に表示
データバインディング	ローカル配列またはリモートデータソース
テンプレート	項目の外観や選択した値の表示をカスタマイズ
グループ化	オプションを論理的なカテゴリに整理
並べ替え	オプションをアルファベット順（昇順／降順）に並べ替え
チップ表示	選択した項目を削除可能なチップとして表示
カスタム値	ユーザーがカスタムの選択値を追加できるようにする
仮想スクロール	1000 件以上の項目を含むリストを効率的に処理
連動	複数の MultiSelect コンポーネントを連動させる
WCAG 準拠	スクリーンリーダーとキーボード操作に対応する組み込みアクセシビリティ
イベント	選択の変更、開閉に応答

ドキュメントのナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• 前提条件とシステム要件
• Syncfusion.EJ2.AspNet.Core NuGet パッケージのインストール
• _ViewImports.cshtml での TagHelper の設定
• CDN 経由でのスタイルシートとスクリプトリソースの追加
• スクリプトマネージャーの登録
• 最初の MultiSelect の作成
• アプリケーションの実行とテスト

タグヘルパーの構文

📄 参照: references/tag-helper-syntax.md

• MultiSelect タグヘルパーの構造とプロパティ
• 基本的なプロパティ（Placeholder、Value、Readonly、Disabled）
• データソースバインディングの基礎
• タグヘルパーでのイベントバインディング
• CSS クラスのカスタマイズ
• ベストプラクティスと一般的なパターン

データバインディング

📄 参照: references/data-binding.md

• 文字列のローカル配列へのバインド
• オブジェクトの配列へのバインド
• ネストされたフィールドを含む複雑なオブジェクトのバインド
• DataManager を使用したリモートデータソース
• フィールドマッピング（text、value、groupBy）
• 動的なデータ読み込みと更新のパターン

フィルタリングと検索

📄 参照: references/filtering-and-search.md

• 組み込みの検索ボックス機能
• フィルタータイプのオプション（contains、startswith、endswith）
• サーバー側フィルタリングによるカスタムフィルターロジック
• 高度な検索 UI 向けのフィルターテンプレート
• NoRecordsTemplate の処理
• 検索パフォーマンスの最適化

テンプレートとカスタマイズ

📄 参照: references/templates-and-customization.md

• 項目テンプレートのカスタマイズ
• 値テンプレート（選択した項目の表示）
• ヘッダーとフッターのテンプレート
• グループヘッダーのテンプレート
• 項目へのアイコンの統合
• CSS スタイルとクラスのカスタマイズ

高度な機能

📄 参照: references/advanced-features.md

• 複数選択 UI を強化するチェックボックスモード
• 項目のカテゴリ別グループ化
• 並べ替えオプション（昇順／降順）
• カスタム値のサポート（新しい値の作成）
• チップのカスタマイズと削除
• 大規模なデータセット向けの仮想スクロール
• MultiSelect の連動パターン

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2 レベル AA 準拠
• キーボード操作（矢印キー、Tab、Enter、Escape）
• ARIA 属性とロール
• スクリーンリーダーのサポート
• フォーカス管理のベストプラクティス
• ツールを使ったアクセシビリティのテスト

クイックスタートの例

最小限の MultiSelect 実装例です。

@addTagHelper *, Syncfusion.EJ2


<ejs-multiselect id="multiselect" 
    dataSource="ViewBag.DataSource" 
    fields-text="Name" 
    fields-value="Id"
    placeholder="Select options">
</ejs-multiselect>

// Controller
public IActionResult Index()
{
    List<SelectData> data = new List<SelectData>
    {
        new SelectData { Id = "1", Name = "Option 1" },
        new SelectData { Id = "2", Name = "Option 2" },
        new SelectData { Id = "3", Name = "Option 3" }
    };
    ViewBag.DataSource = data;
    return View();
}

よくあるパターン

パターン 1：文字列配列

文字列値のリストから選択します。

<ejs-multiselect id="skills" 
    dataSource="ViewBag.SkillsList" 
    placeholder="Select skills">
</ejs-multiselect>

パターン 2：カスタム表示を使ったオブジェクト配列

<ejs-multiselect id="products" 
    dataSource="ViewBag.ProductList"
    fields-text="ProductName"
    fields-value="ProductId"
    placeholder="Select products">
</ejs-multiselect>

パターン 3：チェックボックスを使う

<ejs-multiselect id="languages" 
    dataSource="ViewBag.LanguageList"
    fields-text="Language"
    fields-value="LanguageCode"
    mode="CheckBox"
    placeholder="Select languages">
</ejs-multiselect>

パターン 4：フィルターによる選択

<ejs-multiselect id="countries" 
    dataSource="ViewBag.CountryList"
    fields-text="CountryName"
    fields-value="CountryCode"
    allowFiltering="true"
    filterType="Contains"
    placeholder="Search and select countries">
</ejs-multiselect>

主要プロパティのリファレンス

プロパティ	型	説明
dataSource	Array	データ項目のリスト
fields-text	string	表示テキストに使用するフィールド名
fields-value	string	データ値に使用するフィールド名
placeholder	string	空の場合に表示するヒントテキスト
value	string[]	初期選択値
allowFiltering	boolean	検索／フィルターボックスを有効にします
filterType	string	フィルターの種類（StartsWith、Contains、EndsWith）
mode	string	選択モード（Default、CheckBox、Delimiter）
readonly	boolean	編集を防止します
disabled	boolean	コントロールを無効にします
showSelectAll	boolean	すべて選択するチェックボックスを表示します
maximumSelectionLength	number	選択可能な項目の最大数
delayUpdateOn	string	更新を実行するイベント
fields-groupBy	string	フィールドごとに項目をグループ化します

よくあるユースケース

ユースケース 1：管理パネルでのロール選択

ユーザーは管理者に割り当てる複数のロールを選択します。

• 利用可能なロールをすべて表示します
• ユーザーの入力に応じてフィルターします
• 選択内容をチップとして表示します
• 選択数を検証します

ユースケース 2：商品カテゴリーフィルター

複数のカテゴリーで商品を絞り込む E コマースサイトの例です。

• 親カテゴリーごとにカテゴリーをグループ化します
• カテゴリーごとの項目数を表示します
• 1000 件以上の項目には仮想スクロールを使用します
• 選択内容を記憶します

ユースケース 3：チームメンバーの割り当て

プロジェクトに複数のチームメンバーを割り当てます。

• 名前で検索します
• 部門ごとのグループ化を表示します
• 選択チップにアバターを表示します
• 自分自身への割り当てを防止します

ユースケース 4：タグ選択

MultiSelect を使ったブログ／コンテンツのタグ付けです。

• カスタムタグの作成を許可します
• タグ数／人気度を表示します
• カテゴリーごとにグループ化します
• オートコンプリート候補を表示します

ベストプラクティス

1. 明確なラベルを必ず用意します - 関連付けた <label> 要素で MultiSelect にラベルを付けます
2. 妥当なデフォルト選択を設定します - 適切な場合は論理的なデフォルト値を事前選択します
3. 項目数が多い場合はフィルタリングを使います - 項目が 10 個を超える場合はフィルタリングを有効にします
4. サーバー側で検証します - クライアント側の検証だけを決して信頼しないでください
5. 空の状態に対応します - 項目が選択されていない場合は、明確なメッセージを表示します
6. 関連する項目をグループ化します - 項目が 20 個を超えるリストでは groupBy を使用します
7. 選択数を制限します - 不正利用を防ぐために maximumSelectionLength を使用します
8. キーボード操作をテストします - すべての機能をキーボードで利用できることを確認します
9. アクセシブルなラベルを用意します - 適切な ARIA 属性を使用します
10. パフォーマンスを監視します - 1000 件以上の項目には仮想スクロールを使用します

次のステップ

1. 「はじめに」から始めます - セットアップ手順に従います
2. 簡単な例を実装します - 基本的な MultiSelect バインディングを作成します
3. フィルタリングを追加します - 検索機能を有効にします
4. テンプレートをカスタマイズします - テンプレートで見た目を強化します
5. 選択イベントを処理します - ユーザーの選択に応じて処理します
6. アクセシビリティをテストします - キーボードとスクリーンリーダーのサポートを確認します

---

学習を始める準備はできましたか？ はじめにから始めましょう →