# ASP.NET Core ListBox Overview

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

The ListBox displays a list of data inside a box and allows single or multiple selections, reordering of selected items, deleting items, fast keyboard-only navigation through the component items, as well as dragging and dropping items. You can also connect the ListBox to other ListBoxes and customize its items with templates, toolbar positioning, placeholders, hints, and localization of its command buttons' messages.

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

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

## Initializing the ListBox

The following example demonstrates how to define the ListBox.

```Razor HtmlHelper
   @(Html.Kendo().ListBox()
        .Name("optional")
        .Toolbar(toolbar =>
        {
            toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .MoveUp()
                .MoveDown()
            );
        })
        .BindTo(ViewBag.Attendees)
    )
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    @{
        var tools = new string[] { "moveUp", "moveDown"};
    }
    
    <kendo-listbox name="optional" bind-to="ViewBag.Attendees">
        <toolbar position="ListBoxToolbarPosition.Right" tools="tools" />
    </kendo-listbox>

```

```C# Controller
    public ActionResult Index()
    {
        ViewBag.Attendees = new List<string>
        {
            "Steven White",
            "Nancy King",
            "Nancy Davolio",
            "Robert Davolio",
            "Michael Leverling",
            "Andrew Callahan",
            "Michael Suyama"
        };
        return View();
    }
```

## Basic Configuration

The following example demonstrates the basic configuration of two connected ListBox components.

```Razor HtmlHelper
    @(Html.Kendo().ListBox()
        .Name("listbox1")
        .DataValueField("ProductID")
        .DataTextField("ProductName")
        .DataSource(source => source
            .Read(read => read.Action("GetProducts", "ListBox"))
        )
        .ConnectWith("listbox2")
        .Toolbar(toolbar =>
        {
            toolbar.Position(ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .MoveUp()
                .MoveDown()
                .TransferTo()
                .TransferFrom()
                .TransferAllTo()
                .TransferAllFrom()
                .Remove());
        })
        .BindTo(new List<ProductViewModel>())
    )

    @(Html.Kendo().ListBox()
        .Name("listbox2")
        .DataValueField("ProductID")
        .DataTextField("ProductName")
        .ConnectWith("listbox1")
        .BindTo(new List<ProductViewModel>())
    )
```

```Razor TagHelper

    @addTagHelper *, Kendo.Mvc

    @{
        var products = new List<ProductViewModel>();
        var products2 = new List<ProductViewModel>();
        var tools = new string[] { "moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove" };
    }
    
    <kendo-listbox name="listbox1"
        datatextfield="ProductName"
        datavaluefield="ProductID"
        connect-with="listbox2"
        bind-to="products">
        <datasource>
            <transport>
                <read url="@Url.Action("GetProducts", "ListBox")"/>
            </transport>
        </datasource>
        <toolbar position="ListBoxToolbarPosition.Right" tools="tools"/>
    </kendo-listbox>

    <kendo-listbox name="listbox2"
        datatextfield="ProductName"
        datavaluefield="ProductID"
        connect-with="listbox1"
        bind-to="products2">
    </kendo-listbox>

```

```C# ListBoxController

    public IActionResult GetProducts()
    {
        var products = Enumerable.Empty<ProductViewModel>();

        using (var northwind = GetContext())
        {
            products = northwind.Products.Select(product => new ProductViewModel
            {
                ProductID = product.ProductID,
                ProductName = product.ProductName
            }).ToList();
        }
        return Json(products);
    }
```

## Functionality and Features

| Feature                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Data Binding](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/binding/overview)        | The ListBox can bind to local data collections or remote data.                                                                                                                                                                                                                                                                       |
| [Item templates](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/templates)             | You can use the component template option to customize the rendering of its items.                                                                                                                                                                                                                                                   |
| [Dragging and dropping](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/draganddrop)    | Enable the drag-and-drop feature of the ListBox items.                                                                                                                                                                                                                                                                               |
| [Selection](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/selection)                  | The component supports single and multiple selection modes.                                                                                                                                                                                                                                                                          |
| [Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/events)                        | The ListBox emits various events that you can handle and use to control what happens during the user interaction.                                                                                                                                                                                                                    |
| [Globalization](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/globalization/overview) | The ListBox provides globalization through the combination of [localization](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/globalization/localization) and [right-to-left support](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/globalization/rtl-support). |
| [Accessibility](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/accessibility/overview) | The ListBox is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/listbox/accessibility/keyboard-navigation) for faster navigation.                                                                            |

## Next Steps

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

* [Basic Usage of the ListBox HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/listbox/index)

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

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

## See Also

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