| layout | post |
|---|---|
| title | Getting Started with Server App in Blazor ComboBox | Syncfusion |
| description | Checkout and learn here all about the documentation for getting started with Blazor ComboBox component in Blazor Server App. |
| platform | Blazor |
| component | ComboBox |
| documentation | ug |
This section briefly explains about how to include Syncfusion® Blazor ComboBox component in a Blazor Server App using Visual Studio, Visual Studio Code, and the .NET CLI.
{% tabcontents %}
{% tabcontent Visual Studio %}
Create a Blazor Server App by using the Blazor Web App template in Visual Studio via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor Server App Getting Started documentation.
{% endtabcontent %}
{% tabcontent 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 the Blazor Server App Getting Started documentation.
Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`).
{% tabs %}
{% highlight c# tabtitle="Blazor Server App" %}
dotnet new blazor -o BlazorApp -int Server cd BlazorApp
{% endhighlight %}
{% endtabs %}
{% endtabcontent %}
{% tabcontent .NET CLI %}
Install the latest version of .NET SDK. If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
{% tabs %} {% highlight c# tabtitle=".NET CLI" %}
dotnet --version
{% endhighlight %} {% endtabs %}
Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the Blazor Server App Getting Started documentation.
{% tabs %} {% highlight c# tabtitle=".NET CLI" %}
dotnet new blazor -o BlazorApp -int Server cd BlazorApp
{% endhighlight %} {% endtabs %}
{% endtabcontent %}
{% endtabcontents %}
N> Configure the appropriate Interactive render mode and Interactivity location while creating a Blazor Server App. For detailed information, refer to the interactive render mode documentation.
Install Syncfusion.Blazor.DropDowns and Syncfusion.Blazor.Themes NuGet packages in your project using the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), or the integrated terminal in Visual Studio Code (dotnet add package), or the .NET CLI.
Alternatively, run the following commands in the Package Manager Console to achieve the same.
{% tabs %} {% highlight C# tabtitle="Package Manager" %}
Install-Package Syncfusion.Blazor.DropDowns -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %} {% endtabs %}
N> All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.
After the packages are installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.DropDowns namespaces.
{% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %}
@using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns
{% endhighlight %} {% endtabs %}
Register the Syncfusion® Blazor service in the Program.cs file of your Blazor Server App.
{% tabs %} {% highlight C# tabtitle="Program.cs" %}
.... using Syncfusion.Blazor; .... builder.Services.AddSyncfusionBlazor(); ....
{% endhighlight %} {% endtabs %}
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the ~/Components/App.razor file.
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>N> Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in Blazor application.
Add the Syncfusion® Blazor ComboBox component in the ~/Components/Pages/Home.razor file. If the interactivity location is set to Per page/component, define a render mode at the top of the ~Pages/Home.razor file.
N> If the Interactivity Location is set to Global, the render mode is automatically configured in the App.razor file by default.
{% tabs %} {% highlight razor %}
@* desired render mode define here *@ @rendermode InteractiveServer
{% endhighlight %} {% endtabs %}
{% tabs %} {% highlight razor tabtitle="Home.razor" %}
{% endhighlight %} {% endtabs %}
- Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ComboBox component in the default web browser.
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBpNiBuBWhiNjHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "Blazor ComboBox Component" %}
After initializing, populate the ComboBox with data using the DataSource property. Here, an array of string values is passed to the ComboBox component.
{% tabs %} {% highlight razor tabtitle="Home.razor" %}
@using Syncfusion.Blazor.DropDowns
@code { public class Games { public string ID { get; set; } public string Text { get; set; } } List LocalData = new List { 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"}, }; }
{% endhighlight %} {% endtabs %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBpjsLOhCBHPRgS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "Blazor ComboBox with Data Binding" %}
The ComboBox allows users to input custom values that are not present in the predefined list. This support is enabled by the AllowCustom property. In this case, the text and value are treated the same, and the custom value is posted with the form on submit.
{% tabs %} {% highlight razor tabtitle="Home.razor" %}
{% endhighlight %} {% endtabs %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVzXMVOrszHZiMo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "Blazor ComboBox with Custom Values" %}
By default, the popup list width automatically matches the ComboBox input width, and the popup height is 350px. The height and width can be customized using the PopupHeight and PopupWidth properties, respectively.
{% tabs %} {% highlight razor tabtitle="Home.razor" %}
<SfComboBox TValue="string" TItem="Games"PopupHeight="350px" PopupWidth="350px" Placeholder="Select a game" DataSource="@LocalData">
{% endhighlight %} {% endtabs %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpXirahMIhXWui?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "Customizing Popup Height and Width in Blazor ComboBox" %}
