syncfusion-aspnetcore-listview

ASP.NET Core での ListView の実装

ListView コンポーネントは、インタラクティブな階層構造でデータを表示する、強力で機能豊富なコントロールです。データバインド（ローカルおよびリモート）、グループ化、ネストされたリスト、カスタムテンプレート、パフォーマンスを高める仮想化、包括的なキーボードアクセシビリティに対応しています。

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

次のような場合に、このスキルを使用します。

• インタラクティブなリストを表示する：クリックによる選択、ホバーエフェクト、視覚的なフィードバックを伴ってデータコレクションを描画する
• 関連する項目をグループ化する：groupBy フィールドを使用して、リスト項目をカテゴリ別に整理する
• ネストされたナビゲーションに対応する：親子関係を持つ複数レベルの階層を作成する
• パフォーマンスを最適化する：UI 仮想化を使って大規模なデータセット（1000 件以上）を処理する
• 外観をカスタマイズする：ヘッダー、項目、グループタイトルにテンプレートを適用する
• 選択機能を有効にする：チェックボックスを使った単一選択または複数選択を実装する
• リモートデータを処理する：DataManager と Query を使用してサーバー API にバインドする
• キーボード操作に対応する：アクセシビリティのためのキーボードナビゲーションをサポートする

コンポーネントの概要

Syncfusion EJ2 for ASP.NET Core の ListView コンポーネントは、TagHelper 構文を使用し、主要なプロパティを公開します。

カテゴリ	主なプロパティ
データバインド	dataSource、fields、query
表示の制御	template、headerTemplate、groupTemplate
ユーザー操作	showCheckBox、checkBoxPosition、sortOrder
パフォーマンス	enableVirtualization、height
外観	cssClass、width、showHeader、showIcon
アクセシビリティ	enableRtl、イベントハンドラー

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

はじめにとデータバインド

📄 参照先： references/getting-started-and-data-binding.md

• ASP.NET Core プロジェクトのセットアップと TagHelper のインポート
• DataSource プロパティの各種形式（配列、JSON、リモート）
• テキスト、ID、ネストされたプロパティのフィールドマッピング
• DataManager と Query を使用したリモートデータバインド
• ListView の基本的な初期化例

フィールド設定と構成

📄 参照先： references/field-settings-and-configuration.md

• フィールドマッピングの全オプション（14 プロパティ）
• アイコンを動的にカスタマイズする iconCss
• enabled、isVisible、isChecked の状態プロパティ
• カテゴリ分類ロジックの groupBy
• ネストされたリストに対応する child プロパティ
• 検証パターンと境界ケース

グループ化、ネストされたリスト、仮想化

📄 参照先： references/grouping-nested-lists-virtualization.md

• groupTemplate を使用した項目のカテゴリ別グループ化
• ネストされたリストのナビゲーション構造
• 大規模なデータセットに対応する enableVirtualization
• ウィンドウスクロールとコンテナースクロールのモード
• テンプレートでの条件付きレンダリング
• パフォーマンス最適化の手法

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

📄 参照先： references/templates-and-customization.md

• 項目をカスタマイズする template プロパティ
• headerTemplate と groupTemplate
• 組み込み CSS クラス（e-list-wrapper、e-list-avatar、e-list-badge など）
• アバターと複数行リストのパターン
• テンプレート内のカスタム HTML マークアップ

チェックボックス、選択、イベント

📄 参照先： references/checkboxes-selection-events.md

• showCheckBox プロパティと配置（Left／Right）
• SelectEventArgs を使用する select イベント
• 複数項目の選択パターン
• チェック状態の管理
• 選択イベントの処理

スタイル設定と外観

📄 参照先： references/styling-appearance-properties.md

• カスタムスタイル設定用の cssClass
• height と width の制御
• showHeader と showIcon プロパティ
• スタイル設定用の CSS セレクター一覧
• ホバー状態とフォーカス状態のカスタマイズ

イベントとエラー処理

📄 参照： references/events-and-error-handling.md

• select、scroll、actionBegin、actionComplete イベント
• TagHelper でのイベントバインド
• リモートデータの障害シナリオ
• エラー処理の戦略

並べ替え、フィルタリング、スクロール

📄 参照： references/sorting-filtering-scrolling.md

• sortOrder プロパティ（Ascending、Descending）
• sortBy フィールドのマッピング
• 動的読み込みの scroll イベント
• 無限スクロールのパターン
• フィルター操作

アクセシビリティとキーボード操作

📄 参照： references/accessibility-keyboard-aria.md

• キーボードショートカット（Arrow Up/Down、Select、Back）
• ARIA 属性（aria-selected、aria-level）
• 右から左への表示をサポートする enableRtl
• スクリーンリーダーとの互換性
• インクルーシブデザインのベストプラクティス

高度な機能と状態の保持

📄 参照： references/advanced-features-persistence.md

• 状態を保持する enablePersistence
• AnimationSettings を使用する animation プロパティ
• ローカライズ用の locale
• disableHtmlEncode と enableHtmlSanitizer
• RTL と文化に応じた調整

API リファレンス

📄 参照： references/api-reference.md

• ListView プロパティの全一覧（30 以上のプロパティを解説）
• イベントリファレンス（select、scroll、actionBegin、actionComplete、actionFailure）
• 型シグネチャ付きのフィールドマッピング API
• 列挙型（SortOrder、AnimationEffect など）
• プログラムによる制御のためのメソッドシグネチャ
• イベント引数の型とプロパティ

クイックスタートの例

TagHelper を使用した基本的な ASP.NET Core ListView：

@{
    ViewData["Title"] = "ListView Example";
    List<ListItem> dataSource = new List<ListItem>()
    {
        new ListItem { id = "1", text = "Artwork" },
        new ListItem { id = "2", text = "Abstract" },
        new ListItem { id = "3", text = "Modern Painting" },
        new ListItem { id = "4", text = "Ceramics" }
    };
}

<ejs-listview id="list" dataSource="dataSource" 
    showHeader="true" headerTitle="Art Gallery">
</ejs-listview>

@code {
    public class ListItem
    {
        public string id { get; set; }
        public string text { get; set; }
    }
}

選択とチェックボックスを使用：

<ejs-listview id="list" dataSource="dataSource" 
    showCheckBox="true" checkBoxPosition="Right">
</ejs-listview>

グループ化を使用：

<ejs-listview id="list" dataSource="dataSource">
    <e-listview-fieldsettings text="text" groupBy="category" id="id"></e-listview-fieldsettings>
</ejs-listview>

よく使われるパターン

パターン 1：シンプルなデータリスト

文字列またはオブジェクトの配列で dataSource を使用し、表示するデータを fields.text にマッピングします。

パターン 2：カテゴリ別グループ

fields.groupBy を設定すると、項目がカテゴリ見出しの下に自動的に整理されます。

パターン 3：ネストされた階層

fields.child をマッピングして、親子関係をたどるドリルダウンナビゲーションを有効にします。

パターン 4：大規模データセットの最適化

enableVirtualization="true" を有効にすると、表示中の項目だけがレンダリングされ、パフォーマンスが 10 倍以上向上します。

パターン 5：項目のカスタム表示

template プロパティと <div class="e-list-wrapper"> を使用して、豊富な書式設定（アバター、バッジ、複数行テキスト）を実現します。

パターン 6：リモートデータの統合

DataManager と dataSource を使用し、query を設定してサーバー側でフィルターや並べ替えを行い、API レスポンスに合わせて fields をバインドします。

主なフィールドマッピングのリファレンス

fields プロパティでデータの抽出方法を制御します。よく使われるマッピングは次のとおりです。

フィールドプロパティ	目的	例
text	項目の表示テキスト	text="productName"
id	一意の識別子	id="productId"
groupBy	カテゴリ／グループのフィールド	groupBy="category"
child	ネストされたリストデータ	child="subcategories"
iconCss	アイコンのクラス	iconCss="iconClass"
enabled	有効／無効の状態	enabled="isActive"
isChecked	チェックボックスの状態	isChecked="isSelected"
isVisible	表示状態	isVisible="isVisible"
tooltip	ホバー時のツールチップテキスト	tooltip="description"
sortBy	並べ替えフィールド	sortBy="name"
htmlAttributes	カスタム属性	htmlAttributes="attributes"

よくある使用例

使用例 1：商品カテゴリの閲覧

商品をカテゴリ別にグループ化し、ショッピングカートに追加するための選択を有効にします。

使用例 2：ファイル／フォルダーのナビゲーション

ネストされたリストとアイコンを使用して、ファイルエクスプローラーのインターフェイスを作成します。

使用例 3：タスク管理リスト

チェックボックスとテンプレートを組み合わせ、ToDo／タスクの表示とステータス追跡を行います。

使用例 4：連絡先ディレクトリ

アルファベット順に並べ替え、アバターと連絡先情報を含むテンプレートを使用し、カテゴリでフィルターします。

ユースケース 5：大容量データフィード（ニュース、ログ）

仮想化を有効にし、動的読み込みのためのスクロールイベントを実装して、レンダリングを最適化します。

---

次のステップ：

• getting-started-and-data-binding.mdを読んで、最初の ListView をセットアップします
• api-reference.mdで、プロパティ、イベント、メソッドに関するドキュメントをすべて確認します
• templates-and-customization.mdで、高度な書式設定オプションを確認します
• references/accessibility-keyboard-aria.mdで、キーボードと ARIA のサポートを確認します