syncfusion-aspnetcore-dropdownlist

ASP.NET Core での DropdownList の実装

DropdownList は、あらかじめ定義された値の一覧を表示する単一選択コントロールです。ユーザーはドロップダウンリストから値を 1 つ選択できます。データバインディング、フィルタリング、グループ化、カスタムテンプレート、アクセシビリティ機能に対応しています。

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

以下が必要な場合に、このスキルを使用します。

• ASP.NET Core アプリケーションに単一選択のドロップダウンを作成する
• サーバー側のデータソース（配列、データベース、API）からドロップダウンのデータをバインドする
• 大規模な一覧でフィルタリングを有効にする
• 関連する項目をグループ化する
• テンプレートで項目の表示をカスタマイズする
• アクセシビリティへの準拠を確保する
• 親の選択内容に応じてドロップダウンを連動させる
• イベントでユーザーの選択を処理する

コンポーネントの概要

主な機能：

• ローカル配列やリモートソースからのデータバインディング
• 検索ボックスを使ったリアルタイムフィルタリング
• 項目の自動グループ化
• カスタマイズ可能な項目テンプレートと値テンプレート
• キーボード操作による WCAG アクセシビリティ対応
• 連動するドロップダウンへの対応
• 大規模なデータセット向けの仮想スクロール

一般的なプロパティ：

• DataSource - データ配列または DataManager
• Fields - フィールドのマッピング（text、value、groupBy、iconCss）
• AllowFiltering - フィルタリングの有効／無効
• FilterType - フィルタリングアルゴリズム（StartsWith、Contains、EndsWith）
• GroupBy - グループ化するフィールド名
• ItemTemplate - カスタム項目の描画
• ValueTemplate - 選択値のカスタム描画
• Placeholder - ヒントテキスト
• Value - 選択された値
• ReadOnly - 読み取り専用の状態

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージの設定
• TagHelper の登録と設定
• DropdownList の基本的な実装
• HTML 構造と最小限のサンプル
• CSS テーマのインポート
• クリックイベントと変更イベントのハンドラー

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

📄 参照： references/data-binding.md

• 単純なデータ（文字列、数値）の配列のバインド
• 複雑な JSON オブジェクトのバインド
• ネストされたデータ構造のマッピング
• DataManager を使ったリモートデータのバインド
• OData と Web API の統合
• フィールドのマッピングと値のバインド
• テキストフィールドと値フィールドの理解

フィルタリングとグループ化

📄 参照： references/filtering-grouping.md

• フィルタリングの有効化と設定
• フィルターの種類（StartsWith、Contains、EndsWith）
• 大文字と小文字を区別しないフィルタリング
• カテゴリ別の項目のグループ化
• カスタムのグループヘッダー
• 並べ替え順の設定（昇順／降順）
• パフォーマンス向上のための仮想グループ化

テンプレートとスタイル設定

📄 参照： references/templates-styling.md

• 項目テンプレートのカスタマイズ
• 選択値のテンプレート
• ヘッダーとフッターのテンプレート
• グループヘッダーのテンプレート
• CSS クラスのカスタマイズ
• テーマのスタイル設定と配色
• レスポンシブなサイズ設定と配置

アクセシビリティと機能

📄 参照： references/accessibility-features.md

• WCAG 2.1 レベル AA への準拠
• キーボード操作（矢印キー、Enter、Tab）
• ARIA 属性とスクリーンリーダーへの対応
• フォーカス管理とフォーカスインジケーター
• 無効状態の処理
• RTL（右から左）言語への対応
• ツールチップとヘルプテキストの統合

高度なシナリオ

📄 参照： references/advanced-scenarios.md

• 連動するドロップダウン（依存する選択）
• 複数選択ドロップダウンのパターン
• 大規模なデータセット向けの仮想スクロール
• 検索とオートコンプリートのパターン
• API 統合と非同期データ読み込み
• エラー処理と空の状態
• パフォーマンス最適化のヒント

クイックスタートの例

コントローラー（HomeController.cs）：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewBag.Fruits = new List<string> { "Apple", "Orange", "Banana", "Mango" };
        return View();
    }
}

ビュー（Index.cshtml）：

@Html.EJ2().DropDownList()
    .Id("DropdownList")
    .DataSource(ViewBag.Fruits)
    .Placeholder("Select fruit")
    .Render()

一般的なパターン

パターン 1：イベント処理を伴う基本的な選択

モデル：

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

コントローラー：

public IActionResult Index()
{
    var categories = new List<Category>
    {
        new Category { Id = 1, Name = "Electronics" },
        new Category { Id = 2, Name = "Furniture" },
        new Category { Id = 3, Name = "Clothing" }
    };
    ViewBag.Categories = categories;
    return View();
}

ビュー：

@Html.EJ2().DropDownList()
    .Id("Category")
    .DataSource(ViewBag.Categories)
    .Fields(fields => fields.Text("Name").Value("Id"))
    .Change("onCategoryChange")
    .Placeholder("Select category")
    .Render()

<script>
function onCategoryChange(args) {
    console.log('Selected ID:', args.value);
    console.log('Selected Text:', args.text);
    // Perform action based on selection
}
</script>

パターン 2：連動するドロップダウン

モデル：

public class Country
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int CountryId { get; set; }
}

コントローラー：

public IActionResult Index()
{
    var countries = new List<Country>
    {
        new Country { Id = 1, Name = "USA" },
        new Country { Id = 2, Name = "Canada" },
        new Country { Id = 3, Name = "Mexico" }
    };
    ViewBag.Countries = countries;
    return View();
}

[HttpGet("api/cities/{countryId}")]
public IActionResult GetCities(int countryId)
{
    var cities = new List<City>
    {
        new City { Id = 1, Name = "New York", CountryId = 1 },
        new City { Id = 2, Name = "Los Angeles", CountryId = 1 },
        new City { Id = 3, Name = "Toronto", CountryId = 2 },
        new City { Id = 4, Name = "Vancouver", CountryId = 2 }
    };
    
    var filtered = cities.Where(c => c.CountryId == countryId)
        .Select(c => new { c.Id, c.Name })
        .ToList();
    
    return Json(filtered);
}

ビュー：

@Html.EJ2().DropDownList()
    .Id("Country")
    .DataSource(ViewBag.Countries)
    .Fields(fields => fields.Text("Name").Value("Id"))
    .Change("onCountryChange")
    .Placeholder("Select country")
    .Render()


@Html.EJ2().DropDownList()
    .Id("City")
    .Placeholder("Select city")
    .Render()

<script>
function onCountryChange(args) {
    var cityDropdown = document.getElementById('City').ej2_instances[0];
    
    if (args.value) {
        // Fetch cities for selected country
        fetch('/home/GetCities/' + args.value)
            .then(response => response.json())
            .then(data => {
                cityDropdown.dataSource = data;
                cityDropdown.value = null;
            })
            .catch(error => console.error('Error:', error));
    } else {
        cityDropdown.dataSource = [];
    }
}
</script>

パターン 3：リモートデータを使用したフィルター付きリスト

モデル：

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

API コントローラー：

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult GetProducts()
    {
        var products = new List<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 999.99m },
            new Product { Id = 2, Name = "Mouse", Price = 25.50m },
            new Product { Id = 3, Name = "Keyboard", Price = 75.00m },
            new Product { Id = 4, Name = "Monitor", Price = 299.99m }
        };
        return Ok(products);
    }
}

ビュー：

@Html.EJ2().DropDownList()
    .Id("Products")
    .DataSource(d => d.Url("/api/products"))
    .Fields(fields => fields.Text("Name").Value("Id"))
    .AllowFiltering(true)
    .FilterType(FilterType.Contains)
    .Placeholder("Search products...")
    .Render()

主なプロパティと使用するタイミング

プロパティ	型	使用するタイミング
DataSource	Array/DataManager	項目を表示する場合は常に必要です
Fields	FieldSettings	複雑なデータオブジェクトをバインドする場合
Value	string/number	項目を事前選択する場合
AllowFiltering	bool	10 個以上の項目があるリストの場合
FilterType	FilterType	検索動作をカスタマイズする場合
GroupBy	string	項目に論理的なカテゴリがある場合
ItemTemplate	string	項目にリッチなコンテンツを表示する場合
Placeholder	string	UX のガイダンスを向上させる場合
ReadOnly	bool	ユーザーによる変更を防ぐ場合
Enabled	bool	条件に応じて有効化する場合

一般的な使用例

1. フォームの選択フィールド

カテゴリ、ステータス、またはタイプを選択するためのフォーム内のドロップダウン

2. 連動する選択肢

親の選択内容に応じて子の選択肢が変わる複数のドロップダウン

3. 検索可能なリスト

項目数の多いドロップダウンでフィルタリングを有効にする

4. グループ化された項目

カテゴリ別に項目を整理する（例：製品カテゴリ > サブカテゴリ）

5. 動的データ

ユーザーの操作に応じて、API またはデータベースから項目を読み込む

6. テンプレートのカスタマイズ

ドロップダウン項目にアイコン、画像、バッジなどのリッチなコンテンツを表示する

---

次のステップ

• 始めたばかりですか？ Getting Started をお読みください
• サーバーデータをバインドしますか？ Data Binding をお読みください
• フィルタリングが必要ですか？ Filtering and Grouping をお読みください
• 外観をカスタマイズしますか？ Templates and Styling をお読みください
• アクセシビリティが必要ですか？ Accessibility and Features をお読みください
• 高度なシナリオをお探しですか？ Advanced Scenarios をお読みください

---

親ライブラリの概要とその他のコンポーネントについては、Implementing Syncfusion ASP.NET Core Components を参照してください。