HelpBot Assistant

How can I help you?

Getting Started with Blazor DropDown List Component

12 Feb 202611 minutes to read

This section explains how to include the Blazor DropDownList component in a Blazor Server app using Visual Studio, Visual Studio Code, and the .NET CLI.

To get started quickly with the Blazor DropDownList, review this GitHub sample:

Prerequisites

Create a new Blazor App in Visual Studio

Create a Blazor Server App using Blazor Web App template in Visual Studio via Microsoft templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to this Blazor Server App Getting Started documentation.

Blazor Server App Creation Template

Configure the appropriate Interactive render mode and Interactivity location when creating a Blazor Server App.

Blazor Server App with Interactive Mode

Install Syncfusion® Blazor DropDowns and Themes NuGet in the App

To add the Blazor DropDownList component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.DropDowns and Syncfusion.Blazor.Themes. Alternatively, you can use the following package manager commands.

Install-Package Syncfusion.Blazor.DropDowns -Version 33.1.44
Install-Package Syncfusion.Blazor.Themes -Version 33.1.44

NOTE

Syncfusion® Blazor components are available on nuget.org. See the NuGet packages page for the complete list of packages and component details.

Prerequisites

Create a new Blazor App in Visual Studio Code

Create a Blazor Server App using Visual Studio Code via Microsoft templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to this Blazor Server App Getting Started documentation.

Alternatively, create a server application using the following command in the integrated terminal (Ctrl+`).

dotnet new blazor -o BlazorApp -int Server
cd BlazorApp

Install Syncfusion® Blazor DropDowns and Themes NuGet in the App

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure the terminal path is the project root directory where the .csproj file is located.
  • Run the following commands to install Syncfusion.Blazor.DropDowns and Syncfusion.Blazor.Themes, and restore dependencies.
dotnet add package Syncfusion.Blazor.DropDowns -v 33.1.44
dotnet add package Syncfusion.Blazor.Themes -v 33.1.44
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. See the NuGet packages page for the complete list of packages and component details.

Prerequisites

Install the latest version of the .NET SDK. If the SDK is already installed, determine the version by running the following command in a command prompt (Windows), terminal (macOS), or shell (Linux).

dotnet --version

Create a Blazor Server App using .NET CLI

Run the dotnet new command to create a new Blazor Server app in a command prompt (Windows), terminal (macOS), or shell (Linux).

dotnet new blazor -o BlazorApp -int Server
cd BlazorApp

This command creates a new Blazor Server app and places it in a directory named BlazorApp under the current location. For more details, see the Create Blazor app and dotnet new documentation.

Install Syncfusion® Blazor DropDowns and Themes NuGet in the App

Use the following commands to add the Blazor DropDownList component to the application by installing Syncfusion.Blazor.DropDowns and Syncfusion.Blazor.Themes. For more information, see Install and manage packages using the dotnet CLI.

dotnet add package Syncfusion.Blazor.DropDowns -Version 33.1.44
dotnet add package Syncfusion.Blazor.Themes -Version 33.1.44
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. See the NuGet packages page for the complete list of packages and component details.

Add Import Namespaces

Open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.DropDowns namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.DropDowns

Register Syncfusion® Blazor Service

Register the Syncfusion® Blazor service in the ~/Program.cs file of your Blazor Server app. Ensure the Syncfusion license is registered in application startup before using any Syncfusion components.

....
....
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
....
....
builder.Services.AddSyncfusionBlazor();

....

Add stylesheet and script resources

The theme stylesheet and script are provided via Static Web Assets. Include the theme stylesheet in the <head> and the script reference at the end of the <body> in the App.razor layout as shown below.

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    ....
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

    //Blazor DropDown List Component script reference.
    <!-- <script src="_content/Syncfusion.Blazor.DropDowns/scripts/sf-dropdownlist.min.js" type="text/javascript"></script> -->
    
</body>

NOTE

See the Blazor Themes topic for available theme reference methods (Static Web Assets, CDN, and CRG). For script references, see Adding script references.

Add Blazor DropDown List component

Add the Syncfusion® Blazor DropDown List component in the ~/Components/Pages/Home.razor file. If an interactivity location is set to per page/component, define a render mode at the top of the Home.razor page.

NOTE

If the Interactivity Location is set to Global and the Render Mode is set to Server, the render mode is configured in the App.razor file by default.

@* desired render mode define here *@
@rendermode InteractiveServer

<SfDropDownList TValue="string" TItem="string" Placeholder="Select a game"></SfDropDownList>
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DropDownList component will render in the default web browser.
Blazor DropDownList Component

Binding data source

After initialization, populate the DropDownList with data using the DataSource property.

<SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
  <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>

@code {
  public class Games
  {
    public string ID { get; set; }
    public string Text { get; set; }
  }
  List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
  };
}
Data Binding in Blazor DropDownList

Configure the popup list

By default, the popup list width adjusts to match the DropDownList input width, and the popup list height is 350px. Customize the popup height and width using the PopupHeight and PopupWidth properties.

<SfDropDownList TValue="string" TItem="Games" PopupHeight="350px" PopupWidth="350px" Placeholder="Select a game" DataSource="@LocalData">
  <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>

@code{
  public class Games
  {
    public string ID { get; set; }
    public string Text { get; set; }
  }
  List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
  };
}
Changing Popup List Height in Blazor DropDownList

Get selected value

Get the selected value of the DropDownList component in the ValueChange event using the ChangeEventArgs.Value property.

  • CSHTML
    • @using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
  <DropDownListFieldSettings Value="Text" Text="Text"></DropDownListFieldSettings>
  <DropDownListEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></DropDownListEvents>
</SfDropDownList>

@code {
    public class Games
    {  
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
  };
    public void OnValueChange(ChangeEventArgs<string, Games> args)
    {
        Console.WriteLine($"The DropDownList Value is: {args.Value}");
    }
}

    Get the complete object for the selected item in the ValueChange event using the ChangeEventArgs.ItemData property.

  • CSHTML
    • @using Syncfusion.Blazor.DropDowns

<SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
  <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
  <DropDownListEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></DropDownListEvents>
</SfDropDownList>

@code {
    public class Games
    {  
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Text= "American Football" },
    new Games() { ID= "Game2", Text= "Badminton" },
    new Games() { ID= "Game3", Text= "Basketball" },
    new Games() { ID= "Game4", Text= "Cricket" },
    new Games() { ID= "Game5", Text= "Football" },
    new Games() { ID= "Game6", Text= "Golf" },
    new Games() { ID= "Game7", Text= "Hockey" },
    new Games() { ID= "Game8", Text= "Rugby"},
    new Games() { ID= "Game9", Text= "Snooker" },
    new Games() { ID= "Game10", Text= "Tennis"},
  };
    public void OnValueChange(ChangeEventArgs<string, Games> args)
    {
        Console.WriteLine($"Selected - ID: {args.ItemData.ID}, Game: {args.ItemData.Text}");
    }
}

    NOTE

    View the sample in GitHub.

    See also

    1. Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI
    2. Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI