Syncfusion.AspNetCore.DropDowns 34.1.31

Syncfusion® ASP.NET Core Dropdown Components

A comprehensive suite of ASP.NET Core dropdown and selection components for building modern interactive user interfaces. Includes AutoComplete, ComboBox, DropDownList, MultiSelect DropDown, ListBox, DropDownTree, and Mention components.

Supported Components

This package includes the following components:

• AutoComplete
• ComboBox
• DropDownList
• MultiSelect DropDown
• ListBox
• DropDownTree
• Mention

ASP.NET Core AutoComplete Component

The ASP.NET Core AutoComplete Component provides suggestions as you type with filtering and highlighting capabilities.

Key Features:

• Auto Suggestions: Real-time suggestions while typing
• Filtering: Advanced filtering and search capabilities
• Custom Templates: Template support for custom rendering
• Grouping: Group suggestions by category
• Keyboard Navigation: Full keyboard accessibility
• Highlight Matching: Highlight search terms in results
• Remote Data: Support for remote data sources

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core ComboBox Component

The ASP.NET Core ComboBox Component allows custom value entry in addition to selection from a predefined list.

Key Features:

• Custom Entry: Allow custom values alongside predefined options
• Filtering: Real-time filtering and search
• Data Binding: Support for local and remote data
• Templates: Custom item templates
• Keyboard Navigation: Full keyboard support
• Readonly Mode: Optional readonly dropdown selection
• Cascading: Support for cascading combboxes

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core DropDownList Component

The ASP.NET Core DropDownList Component provides single-select dropdown functionality with advanced features.

Key Features:

• Single Selection: Simple single-item selection from list
• Filtering: Fast filtering and search capabilities
• Grouping: Group related items together
• Item Templates: Custom templates for complex layouts
• Virtualization: Handle large datasets efficiently
• Keyboard Navigation: Arrow key and keyboard support
• Cascading: Support for dependent dropdowns

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core MultiSelect DropDown Component

The ASP.NET Core MultiSelect DropDown Component allows selection of multiple values with multiple selection modes.

Key Features:

• Multiple Selection: Select multiple items from list
• Selection Modes: Checkbox, tag, and box modes
• Filtering: Filter items while selecting
• Grouping: Group items for organized selection
• Custom Templates: Customize dropdown appearance
• Show Selected: Display selected items as tags or custom format
• Delimiter Support: Custom delimiter for value separation

Documentation

• Getting Started
• API Reference
• Live Demos

ASP.NET Core ListBox Component

The ASP.NET Core ListBox Component displays list items for single or multiple selection with advanced features.

Key Features:

• Single/Multiple Selection: Flexible selection modes
• Drag and Drop: Reorder items with drag-and-drop
• Templates: Custom templates for complex items
• Grouping: Group items by category
• Keyboard Navigation: Full keyboard support
• Data Binding: Support for various data sources
• Sorting: Built-in sorting capabilities

Documentation

• Getting Started
• API Reference
• Live Demos

Syncfusion® ASP.NET Core Mention Component

The ASP.NET Core Mention Component enables @mention style tagging inside any editable content area — such as comment boxes, rich text editors, or chat inputs — by triggering a suggestion popup when the user types a configured trigger character.

Key Features:

• Trigger Character: Configurable mention character (default @, can be set to # or any symbol)
• Show Mention Char: Optionally display the trigger character inline with the selected value via showMentionChar
• Data Binding: Support for local string arrays, object lists, and remote data via DataManager
• Field Mapping: Map separate text and value fields from complex data objects
• Item Templates: Custom popup item rendering with HTML templates
• Display Templates: Custom format for how the tagged value appears in the editor
• Filtering: Real-time suggestion filtering as the user types after the trigger character
• Popup Sizing: Configurable popupHeight and popupWidth for the suggestion list
• Target Binding: Attach to any contenteditable div or text input via the target property
• Suffix Text: Append a custom character after the inserted mention value

Documentation

• Getting Started
• API Reference
• Live Demos

Common Setup

All Syncfusion ASP.NET Core controls share the same foundational setup steps:

1. Install NuGet Package

Install-Package Syncfusion.AspNetCore.DropDowns

2. Register Tag Helper

Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:

@addTagHelper *, Syncfusion.AspNetCore.DropDowns

3. Add Stylesheet & Script References

In your layout file (~/Pages/Shared/_Layout.cshtml):

<head>

<link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />




<script src="_content/Syncfusion.AspNetCore.DropDowns/scripts/sf-auto-complete.min.js"></script>


<script src="_content/Syncfusion.AspNetCore.DropDowns/scripts/sf-combo-box.min.js"></script>


<script src="_content/Syncfusion.AspNetCore.DropDowns/scripts/sf-drop-down-list.min.js"></script>


<script src="_content/Syncfusion.AspNetCore.DropDowns/scripts/sf-list-box.min.js"></script>


<script src="_content/Syncfusion.AspNetCore.DropDowns/scripts/sf-mention.min.js"></script>


<script src="_content/Syncfusion.AspNetCore.DropDowns/scripts/sf-multi-select.min.js"></script>
</head>

4. Register Script Manager

In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:

<ejs-scripts></ejs-scripts>

Quick Start

Step 1: Create a Model

using System.Collections.Generic;

public class DropDownDemoModel
{
    public string SelectedGame { get; set; }
    public List<string> Games { get; set; } = new List<string> 
    { 
        "Badminton", "Basketball", "Cricket", "Golf", "Tennis"
    };
}

Step 2: Create a PageModel

Create ~/Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

public class IndexModel : PageModel
{
    public DropDownDemoModel DropDownDemo { get; set; } = new DropDownDemoModel();

    public void OnGet()
    {
        DropDownDemo.SelectedGame = "Basketball";
    }

    public void OnPostSelectGame()
    {
        // Handle game selection
    }
}

Step 3: Create the View

Create ~/Pages/Index.cshtml:

@page
@model IndexModel

<div class="container mt-5">
    <h2>DropDown Components Demo</h2>

    
    <div class="mb-4">
        <h5>DropDownList</h5>
        <ejs-dropdownlist id="games" dataSource="@Model.DropDownDemo.Games" placeholder="Select a game"></ejs-dropdownlist>
    </div>

    
    <div class="mb-4">
        <h5>AutoComplete</h5>
        <ejs-autocomplete id="atcelement" dataSource="@Model.DropDownDemo.Games" placeholder="Find a sport"></ejs-autocomplete>
    </div>

    
    <div class="mb-4">
        <h5>ComboBox</h5>
        <ejs-combobox id="comboelement" dataSource="@Model.DropDownDemo.Games" placeholder="Select a game"></ejs-combobox>
    </div>

    
    @{
    var data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" };
    }
    <ejs-listbox id="listbox" dataSource="data"></ejs-listbox>

    
    <div class="mb-4">
        <h5>MultiSelect DropDown</h5>
        <ejs-multiselect id="multiselectelement" dataSource="@Model.DropDownDemo.Games" placeholder="Select games"></ejs-multiselect>
    </div>

    
    <div id="mentionElement" placeholder="Type @ to mention" contenteditable="true"></div>
    <ejs-mention id="localData" target="#mentionElement" dataSource="data"></ejs-mention>
</div>

Step 4: Run the Application

Press Ctrl+F5 to run the application in your browser.

Support

• Submit a support ticket

• Community forums

• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA

• Purchase a license

• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET