Syncfusion.AspNetMvc.DropDowns

Syncfusion ASP.NET MVC DropDowns components

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

Using this package with an AI coding agent

Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:

Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.

Platform reference: https://ai.syncfusion.com/aspnet-mvc/llms.txt

Supported components

This package includes the following components:

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

ASP.NET MVC AutoComplete component

The ASP.NET MVC 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 MVC ComboBox component

The ASP.NET MVC 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 ComboBox components

Documentation

• Getting started
• API reference
• Live demos

ASP.NET MVC DropDownList component

The ASP.NET MVC 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 MVC MultiSelect DropDown component

The ASP.NET MVC MultiSelect DropDown component allows selection of multiple values using different 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 MVC ListBox component

The ASP.NET MVC 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 MVC Mention component

The ASP.NET MVC 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

These setup steps are required only once for your application, regardless of which Syncfusion components you use.

1. Install NuGet package

Install-Package Syncfusion.AspNetMvc.DropDowns

2. Add namespace reference

Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:

<namespaces>
    <add namespace="Syncfusion.EJ2"/>
</namespaces>

3. Add stylesheet & script references

In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - Syncfusion Application</title>
    
    <!-- Syncfusion ASP.NET MVC controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/35.1.40/fluent2.css" />
    
    <!-- Syncfusion ASP.NET MVC controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/35.1.40/dist/ej2.min.js"></script>
</head>

4. Register script manager

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

<body>
    @RenderBody()
    
    <!-- Syncfusion ASP.NET MVC Script Manager -->
    @Html.EJS().ScriptManager()
</body>

Quick start

Step 1: Add ASP.NET MVC DropDowns control

Add the Syncfusion ASP.NET MVC DropDowns control to the ~/Views/Home/Index.cshtml page:

<!-- Basic DropDownList -->
@Html.EJS().DropDownList("dropdown")
    .DataSource(new string[] { "Badminton", "Baseball", "Basketball", "Cricket", "Football" })
    .Placeholder("Select Sport")
    .Render()

<!-- Basic ComboBox -->
@Html.EJS().ComboBox("combobox")
    .DataSource(new string[] { "JavaScript", "C#", "Python", "Java", "C++" })
    .Placeholder("Select Language")
    .Render()

<!-- Basic AutoComplete -->
@Html.EJS().AutoComplete("autocomplete")
    .DataSource(new string[] { "Apple", "Apricot", "Banana", "Blueberry", "Cherry", "Date" })
    .Placeholder("Search fruits")
    .Render()

<!-- Basic MultiSelect -->
@Html.EJS().MultiSelect("multiselect")
    .DataSource(new string[] { "Google", "Apple", "Amazon", "Microsoft", "Facebook" })
    .Placeholder("Select Companies")
    .Render()

<!-- Basic ListBox -->
@Html.EJS().ListBox("listbox")
    .DataSource(new string[] { "Option 1", "Option 2", "Option 3", "Option 4" })
    .Render()

<!-- Basic Mention -->
@Html.EJS().Mention("mention")
    .DataSource(new string[] { "John", "Jane", "Jack", "Jim", "Jill" })
    .Render()

Step 2: 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 1800+ 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

[email protected] | Toll Free: 1-888-9-DOTNET