ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains about how to include a simple ListBox in your ASP.NET Core Razor application. You can refer ASP.NET Core Razor Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Adding ListBox component to the application

Now, add the Syncfusion Essential JS 2 ListBox component in any web page cshtml in the Pages folder. For example, the ListBox component is added in the ~/Pages/Index.cshtml page.

<EjsListBox ID="listbox"></EjsListBox>

Binding data source

After initializing, populate the ListBox with data using the DataSource property. Here, an array of object values is passed to the ListBox component.

The following example illustrates the output in your browser.

     <EjsListBox ID="listbox" DataSource="@data"></EjsListBox>

     @functions{
        List<object> data = new List<object>
        {
            new { text = "Hennessey Venom", id = "list-01" },
            new { text = "Bugatti Chiron", id = "list-02" },
            new { text = "Bugatti Veyron Super Sport", id = "list-03" },
            new { text = "SSC Ultimate Aero", id = "list-04" },
            new { text = "Koenigsegg CCR", id = "list-05" },
            new { text = "McLaren F1", id = "list-06" },
            new { text = "Aston Martin One- 77", id = "list-07" },
            new { text = "Jaguar XJ220", id = "list-08" },
            new { text = "McLaren P1", id = "list-09" },
            new { text = "Ferrari LaFerrari", id = "list-10" }
        };
    }

Output be like the below.

ListBox