# ASP.NET Core DropDownList Overview

The Telerik UI DropDownList TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI DropDownList widget.

The DropDownList displays a list of values and allows for a single selection from the list. The user input is restricted within the predefined options.

* [Demo page for the DropDownList HtmlHelper](https://demos.telerik.com/aspnet-core/dropdownlist/index)

* [Demo page for the DropDownList TagHelper](https://demos.telerik.com/aspnet-core/dropdownlist/tag-helper)

## Initializing the DropDownList

The following example demonstrates how to define the DropDownList.

```Razor HtmlHelper
    @(Html.Kendo().DropDownList()
        .Name("dropdownlist")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("Products_Read", "DropDownList");
            });
        })
    )
```

```Razor TagHelper
    <kendo-dropdownlist name="dropdownlist"
                    datatextfield="ProductName"
                    datavaluefield="ProductID">
    <datasource>
        <transport>
            <read url="@Url.Action("Products_Read", "DropDownList")" />
        </transport>
    </datasource>
</kendo-dropdownlist>
```

```C# Controller

    public class DropDownListController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public JsonResult Products_Read()
        {
            var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
            {
                ProductID = i,
                ProductName = "Product " + i
            });

            return Json(result);
        }
    }
```

> Starting with the 2024 Q3 release, the HtmlHelper version of the component supports [declarative initialization](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/helper-basics/declarative-initialization).

## Basic Configuration

The DropDownList configuration options are passed as attributes.

```Razor HtmlHelper
    @(Html.Kendo().DropDownList()
        .Name("products")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .HtmlAttributes(new { style = "width:100%;" })
        .Filter(FilterType.Contains)
        .DataSource(source => source
            .Read(read => read.Action("GetProducts", "Home"))
        )
    )
```

```Razor TagHelper
    <kendo-dropdownlist name="products" filter="FilterType.Contains"
        placeholder="Select product"
        datatextfield="ProductName"
        datavaluefield="ProductID"
        style="width: 100%;">
        <datasource>
            <transport>
                <read url="@Url.Action("GetProducts", "Home")" />
            </transport>
        </datasource>
    </kendo-dropdownlist>
```

```C# Controller
    public JsonResult GetProducts(string text)
    {
        using (var northwind = GetContext())
        {
            var products = northwind.Products.Select(product => new ProductViewModel
            {
                ProductID = product.ProductID,
                ProductName = product.ProductName,
                UnitPrice = product.UnitPrice.Value,
                UnitsInStock = product.UnitsInStock.Value,
                UnitsOnOrder = product.UnitsOnOrder.Value,
                Discontinued = product.Discontinued
            });

            if (!string.IsNullOrEmpty(text))
            {
                products = products.Where(p => p.ProductName.Contains(text));
            }

            return Json(products.ToList());
        }
    }
```

## Functionality and Features

* [Binding](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdownlist/binding/ajax-binding)—The DropDownList supports multiple data binding approaches: server, model, custom, and ajax binding.
* [Grouping](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdownlist/grouping)—You can bind the DropDownList to grouped data sources.
* [Virtualization](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdownlist/virtualization)—The virtualization feature of the DropDownList allows you to display large datasets.
* [Templates](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdownlist/templates)—To control how the items, selected value, or a pop-up header are rendered, you can use the available templates.
* [Accessibility](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdownlist/accessibility/overview)—The DropDownList is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

> tip To learn more about the appearance, anatomy, and accessibility of the DropDownList, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/dropdownlist/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

## Next Steps

* [Getting Started with the DropDownList](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdownlist/getting-started)

* [ASP.NET Core demo](https://demos.telerik.com/aspnet-core/dropdownlist)

* [Basic Usage of the DropDownList TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/dropdownlist/tag-helper)

* [DropDownList in Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/dropdownlist/binding/razor-page)

## See Also

* [Using the API of the DropDownList for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/dropdownlist/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)