syncfusion-aspnetcore-list-box

Name: syncfusion-aspnetcore-list-box
Author: syncfusion

github.com/syncfusionデザイン・UI052 回インストール2 週間前に更新

リポジトリ

syncfusion-aspnetcore-list-box について

ASP.NET Core アプリで Syncfusion ListBox を実装・トラブルシューティングするスキルです。選択、データバインド、スタイル設定、高度なリスト操作を扱います。

主な機能

01単一・複数選択
02配列・オブジェクトのデータバインド
03並べ替えとグループ化
04ドラッグ＆ドロップとデュアルリスト
05テーマ、テンプレート、フィルタリング

活用シーン

01カテゴリや従業員の選択欄の作成
02複数の権限の割り当て
03製品など長いリストの絞り込み
04リスト間での項目の移動

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/syncfusion-aspnetcore-list-boxを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

data-binding.md

features.md

getting-started.md

howto-common-tasks.md

selection-modes.md

sorting-and-grouping.md

styling-and-appearance.md

詳細

Syncfusion ASP.NET Core ListBox の実装

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

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

TagHelper 構文を使用して、ASP.NET Core アプリケーションに ListBox コントロールを実装する
選択モードを設定する（単一項目または複数項目の選択）
データソースを ListBox コンポーネントにバインドする
デザインに合わせて テーマとスタイルを適用する
ドラッグ＆ドロップ、デュアルリスト、フィルタリングなどの 高度な機能を処理する
項目の追加、スクローラーの有効化、フォームとの統合などの 一般的なタスクを解決する
選択、データバインディング、レンダリングに関する 問題をデバッグする

コンポーネントの概要

Syncfusion ASP.NET Core の ListBox コンポーネントは、次の機能を備えた多用途の選択コントロールです。

キーボードとマウスでの操作に対応した 単一項目および複数項目の選択
配列、オブジェクト、動的ソースからの データバインディング
高度な機能：ドラッグ＆ドロップ、テンプレート、デュアルリスト、並べ替え、グループ化
組み込みテーマとカスタムテーマを備えた 包括的なテーマ機能
完全なアクセシビリティサポート（WCAG 準拠、キーボード操作）
CSS クラス、プロパティ、イベントによる 柔軟なカスタマイズ

最適な用途：ドロップダウン、フィルター、選択インターフェイス、権限リスト、一括操作

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

ListBox の使用開始

📄 参照： references/getting-started.md

NuGet パッケージのインストール手順
ASP.NET Core プロジェクトのセットアップ（Razor ページ、MVC）
_ViewImports.cshtml での TagHelper の登録
CDN のスタイルシートとスクリプトの設定
Syncfusion Script Manager の登録
最初の ListBox コントロールの作成
初期データバインディングの例

選択モードとユーザー操作

📄 参照： references/selection-modes.md

単一選択モード（ラジオボタン形式）
複数選択モード（チェックボックス形式）
選択イベント（change、select、doubleClick）
キーボード操作（矢印、スペース、Ctrl+A）
プログラムによる選択管理
チェックボックスによる全選択機能
高度な選択パターン

データバインディングとデータソース

📄 参照： references/data-binding.md

文字列配列の ListBox へのバインド
複雑なオブジェクト配列のバインド
フィールドマッピング（Text プロパティと Value プロパティ）
AJAX による動的なデータ読み込み
リアルタイムのデータ更新
マスター詳細リストと依存リスト
データのフィルタリングと更新

スタイル、テーマ、外観

📄 参照： references/styling-and-appearance.md

組み込みテーマ（Material、Bootstrap、Fluent、Tailwind）
カスタムテーマ向けの Theme Studio との統合
ListBox 要素の CSS クラスのカスタマイズ
水平方向の ListBox レイアウトの実装
色、フォント、間隔を使ったカスタムスタイル
モバイルやタブレット向けのレスポンシブデザインパターン
状態に応じた項目の色分けとテンプレート

ListBox データの並べ替えとグループ化

📄 参照： references/sorting-and-grouping.md

項目を昇順または降順に並べ替える
カテゴリまたはタイプごとに項目をグループ化する
並べ替えとグループ化を組み合わせて、リストを整理する
グループヘッダーを使って複雑なデータを処理する
複数のカテゴリを使った実用的な例
大規模なグループ化リストのパフォーマンス最適化

高度な機能と設定

📄 参照： references/features.md

リスト内およびリスト間でのドラッグ＆ドロップ
アイコンとカスタム項目テンプレート
デュアルリストボックス（リスト間での移動）
大規模なデータセット向けの仮想スクロール
固定高さに対応したスクローラーの設定
複雑な選択シナリオとパターン
イベント処理のベストプラクティス

よくあるタスクとトラブルシューティング

📄 参照： references/howto-common-tasks.md

項目を動的に追加・削除する
特定の項目を有効化・無効化する
検索で ListBox のデータをフィルターする
選択した値を使ってフォームを送信する
スクロール位置の設定と監視
操作の前にユーザー入力を検証する
パフォーマンスを最適化する手法
よくある問題をデバッグする

クイックスタートの例

1. Syncfusion パッケージをインストールする

// Package Manager Console
Install-Package Syncfusion.EJ2.AspNet.Core -Version 25.1.35

2. TagHelper を登録する


@addTagHelper *, Syncfusion.EJ2

3. テーマとスクリプトを追加する


<head>
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/25.1.35/fluent.css" />
</head>
<body>
    
    <script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js"></script>
    <ejs-scripts></ejs-scripts>
</body>

4. 基本的な ListBox を作成する

// ~/Pages/Index.cshtml.cs
public class IndexModel : PageModel
{
    public List<string> Fruits { get; set; }
    
    public void OnGet()
    {
        Fruits = new List<string> { "Apple", "Banana", "Cherry", "Date" };
    }
}


@page
@model IndexModel

<ejs-listbox id="fruitBox" dataSource="@Model.Fruits"></ejs-listbox>

よくあるパターン

パターン 1：単一選択（ラジオボタンのような動作）

<ejs-listbox id="categoryBox" 
             dataSource="@Model.Categories"
             selectionSettings="@(new Syncfusion.EJ2.DropDowns.ListBoxSelectionSettings 
             { 
                 Mode = Syncfusion.EJ2.DropDowns.SelectionMode.Single 
             })"
             change="onCategoryChange">
</ejs-listbox>

<script>
    function onCategoryChange(args) {
        console.log('Selected: ' + args.text);
    }
</script>

使用する場面： ユーザーが1つの選択肢（カテゴリ、部署、ステータス）を選ぶ場合

パターン 2：複数選択（チェックボックスのような動作）

<ejs-listbox id="tagsBox" 
             dataSource="@Model.Tags"
             selectionSettings="@(new Syncfusion.EJ2.DropDowns.ListBoxSelectionSettings 
             { 
                 Mode = Syncfusion.EJ2.DropDowns.SelectionMode.Multiple,
                 CheckboxPosition = Syncfusion.EJ2.DropDowns.CheckBoxPosition.Before
             })">
</ejs-listbox>

使用する場面： ユーザーが複数の選択肢（権限、機能、フィルター）を選ぶ場合

パターン 3：検索フィルター付き

<input type="text" id="searchBox" placeholder="Search..." />
<ejs-listbox id="searchableList" dataSource="@Model.Items"></ejs-listbox>

<script>
    const allItems = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.Items));
    
    document.getElementById('searchBox').addEventListener('keyup', function(e) {
        var listbox = document.getElementById('searchableList').ej2_instances[0];
        var term = e.target.value.toLowerCase();
        listbox.dataSource = allItems.filter(item => 
            item.toLowerCase().includes(term)
        );
    });
</script>

使用する場面： 長いリストをフィルターする必要がある場合（従業員、製品、権限）

パターン 4：デュアルリスト（リスト間で項目を移動）

<div style="display: flex; gap: 20px;">
    <div>
        <label>Available</label>
        <ejs-listbox id="availableBox" dataSource="@Model.Available"></ejs-listbox>
    </div>
    <div>
        <button onclick="moveRight()">→</button>
        <button onclick="moveLeft()">←</button>
    </div>
    <div>
        <label>Selected</label>
        <ejs-listbox id="selectedBox" dataSource="@Model.Selected"></ejs-listbox>
    </div>
</div>

使用する場面： リスト間で項目を移動する場合（権限、機能、ユーザー）

主なプロパティとメソッド

必須プロパティ

プロパティ	型	目的
`dataSource`	IEnumerable	リストに表示するデータ
`value`	string/array	現在選択されている値
`selectionSettings`	ListBoxSelectionSettings	選択動作を設定する
`fields`	ListBoxFieldSettings	オブジェクトのプロパティを text/value/groupBy に対応付ける
`sortOrder`	SortOrder	項目を並べ替える：None、Ascending、Descending
`cssClass`	string	スタイル設定用のカスタム CSS クラス
`allowDragAndDrop`	bool	ドラッグ＆ドロップによる並べ替えを有効にする
`height`	string	スクロール可能な固定の高さ

よく使うメソッド

var listbox = document.getElementById('listBox').ej2_instances[0];

// Get/set value
listbox.value;                    // Get selected value(s)
listbox.value = 'newValue';       // Set selected

// Selection operations
listbox.selectAll();              // Select all items
listbox.clearSelection();         // Deselect all
listbox.selectItemsByRange(0, 3); // Select range

// Data operations
listbox.refresh();                // Refresh UI after data change
listbox.destroy();                // Clean up component

よくある使用例

使用例	選択	機能	例
カテゴリ選択	単一	なし	ストアのカテゴリ設定を保存する
一括権限設定	複数	チェックボックス	ユーザーに権限を割り当てる
製品フィルター	複数	検索	E コマースのフィルタリング
機能の切り替え	複数	ドラッグによる並べ替え	機能の優先順位を設定する
従業員選択	複数	検索、テンプレート	チームへの割り当て
レポートのフィールド	複数	デュアルリスト	フィールドを含める／除外する

主な機能の概要

✓ 単一／複数選択 - 1つまたは複数の項目を選択
✓ データバインディング - 配列、オブジェクト、データベースに接続
✓ 並べ替え - アルファベット順に並べ替え（昇順／降順）
✓ グループ化 - カテゴリや種類ごとに項目を整理
✓ ドラッグ＆ドロップ - 項目の順序を変更したり、リスト間で移動したりする
✓ テンプレート - HTML で項目の表示をカスタマイズ
✓ テーマ - 7 種類以上の組み込みテーマとカスタムテーマ
✓ フィルタリング - データを検索・フィルター
✓ キーボード操作 - アクセシビリティに対応した完全なキーボードサポート
✓ 仮想スクロール - 数千件の項目を効率よく処理
✓ イベント - 変更、選択、スクロールのイベント
✓ レスポンシブ対応 - デスクトップ、タブレット、モバイルで動作

トラブルシューティングのクイックリンク

問題 → 解決策

「ListBox が表示されない」 → Getting Startedを確認
「データがバインドされない」 → Data Bindingを参照
「イベントが発生しない」 → Selection Modesを参照
「スタイルがおかしい」 → Styling Guideを確認
「並べ替えが機能しない」 → Sorting & Groupingを確認
「グループ化が機能しない」 → Sorting & Grouping Guideを参照
「パフォーマンスが遅い」 → Features - Scrollerを確認
「ドラッグ＆ドロップが機能しない」 → Features - Drag & Dropを確認

Next Steps

New to ListBox? Start with Getting Started
Need selection control? Go to Selection Modes
Working with data? Read Data Binding
Organizing large lists? Visit Sorting & Grouping
Styling your list? Visit Styling & Appearance
Advanced features? Explore Advanced Features
Solving problems? Check Common Tasks

基本情報

作者: syncfusion
リポジトリ: syncfusion/aspnetcore-ui-components-skills
カテゴリ: デザイン・UI
インストール数: 52
GitHub スター: 0

問題を報告