BLAZOR PLAYGROUND SERIES PART 8- How to Create Listbox in Blazor

This article will learn how to create a Listbox in blazor in simple steps.

Complete Source Code on Github

If you are new to Blazor then you must see

PART 1 :- What is Blazor

PART 2 :- How to Create Blazor Server Application

PART 3 :- How to Create DropdownList in Blazor

PART 4 :- How to Create Radio Buttons in Blazor

PART 5 :- How to Create Checkbox in Blazor

PART 6 :- How to Create Cascading Dropdown List in Blazor

PART 7 :- How to Create CheckboxList In Blazor

Creating Application in simple steps

1. Open Visual Studio 2019
2. In the search bar of Visual Studio, we are going to enter text blazor to search. The first result which appears is Blazor App we are going to choose it.
3. Next step, we will configure the project name, the location where we want to store this project, and set the solution name.
4. Next, we are going to get two hosting models options from that. We are going to choose Blazor Server
5. Application is Created.

After creating the Application, First, Let’s understand what we are going to develop.

We will create two Listbox first will show all items, and another Listbox will only show selected items.

Onclick of First Listbox will add Items to Second Listbox, and onclick of Second Listbox will remove items from Second Listbox.

Now let’s start with adding the ViewModel folder to the project.

Adding ViewModel Folder

Adding ViewModel ListboxViewModel

After Adding ViewModel Folder next, we will add the class name ” ListboxViewModel“, which will have two List collections properties.

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace BlazorPlayGround1.ViewModel
{
    public class ListboxViewModel
    {
        public List<SelectListItem> ListofElectronicDevices { get; set; }
        public List<SelectListItem> ListofSelectedDevices { get; set; }
    }
}

In following, the step we are going to add a Component.

Adding Component

We are going to add a Component with the name ListboxComponent.razor.

Adding Base Class for ListboxComponentBase Component.

We will add a class with the name ListboxComponentBase, and then we will inherit it with ComponentBase.

Next, we will add the ListboxViewModel property in the ListboxComponentBase component along with that will Inject IJSRuntime property, which is used to show alert (JavaScript alert).

using BlazorPlayGround1.ViewModel;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorPlayGround1.Pages
{
    public class ListboxComponentBase : ComponentBase
    {
        [Inject] public IJSRuntime JsRuntime { get; set; }
        protected ListboxViewModel ListboxViewModel { get; set; } = new ListboxViewModel();
    }
}

Next step, we need to call the ListofElectronicDevices method inside the OnInitialized method to initialize the ListboxViewModel property.

Initializing ListofElectronicDevices property in OnInitialized event

Here we have initialized ListofElectronicDevices Property in OnInitialized Event of Component.

protected override void OnInitialized()
 {
     ListboxViewModel.ListofElectronicDevices = new List<SelectListItem>()
     {
         new SelectListItem()
         {
             Text = "Computer",
             Value = "1"
         },
         new SelectListItem()
         {
             Text = "Laptop",
             Value = "2"
         },
         new SelectListItem()
         {
             Text = "Fridge",
             Value = "3"
         },
         new SelectListItem()
         {
             Text = "Dishwasher",
             Value ="4"
         },
         new SelectListItem()
         {
             Text = "Television",
             Value = "5"
         },
         new SelectListItem()
         {
             Text = "Tablet",
             Value = "6"
         }
     };

     ListboxViewModel.ListofSelectedDevices = new List<SelectListItem>();
 }

After initializing ListofSelectedDevices next, we will add two Method one to Add ListboxAddItem to Collection.

Add Items on Click to ListofSelectedDevices Collection

With onclick of the option from the first Listbox, we will add value to the ListofSelectedDevices collection. If it is already existing, then we are going to show an alert.

protected void ListboxAddItem(string value, string text)
 {
     var result = ListboxViewModel.ListofSelectedDevices.Any(x => x.Value == value);
     if (result == true)
     {
         JsRuntime.InvokeVoidAsync("alert", "Item Already Selected");
     }
     else
     {
         ListboxViewModel.ListofSelectedDevices.Add(new SelectListItem()
         {
             Value = value,
             Text = text
         });
     }
 }

Remove Items on Click from ListofSelectedDevices Collection

Onclick of option from the second Listbox, we are going to remove value to ListofSelectedDevices collection.

protected void ListboxRemoveItem(string value, string text)
{
    var result = ListboxViewModel.ListofSelectedDevices.Any(x => x.Value == value);
    if (result == true)
    {
        var currentitem = ListboxViewModel.ListofSelectedDevices.Single(x => x.Value == value);
        ListboxViewModel.ListofSelectedDevices.Remove(currentitem);

        JsRuntime.InvokeVoidAsync("alert", "Selected Item Removed Successfully");
    }
}

Adding Method FormSubmitted called on Form Submit

Here we can read selected values and store them in the database.

protected void FormSubmitted()
{
    // Getting Selected Values on Submit
    foreach (var selectedDevice in ListboxViewModel.ListofSelectedDevices)
    {
        
    }
}

Complete ListboxComponentBase.cs code behind code

using System.Collections.Generic;
using System.Linq;
using BlazorPlayGround1.ViewModel;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.JSInterop;

namespace BlazorPlayGround1.Pages
{
    public class ListboxComponentBase : ComponentBase
    {
        [Inject] public IJSRuntime JsRuntime { get; set; }
        protected ListboxViewModel ListboxViewModel { get; set; } = new ListboxViewModel();

        protected override void OnInitialized()
        {
            ListboxViewModel.ListofElectronicDevices = new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Text = "Computer",
                    Value = "1"
                },
                new SelectListItem()
                {
                    Text = "Laptop",
                    Value = "2"
                },
                new SelectListItem()
                {
                    Text = "Fridge",
                    Value = "3"
                },
                new SelectListItem()
                {
                    Text = "Dishwasher",
                    Value ="4"
                },
                new SelectListItem()
                {
                    Text = "Television",
                    Value = "5"
                },
                new SelectListItem()
                {
                    Text = "Tablet",
                    Value = "6"
                }
            };

            ListboxViewModel.ListofSelectedDevices = new List<SelectListItem>();
        }
        protected void ListboxAddItem(string value, string text)
        {
            var result = ListboxViewModel.ListofSelectedDevices.Any(x => x.Value == value);
            if (result == true)
            {
                JsRuntime.InvokeVoidAsync("alert", "Item Already Selected");
            }
            else
            {
                ListboxViewModel.ListofSelectedDevices.Add(new SelectListItem()
                {
                    Value = value,
                    Text = text
                });
            }
        }
        protected void ListboxRemoveItem(string value, string text)
        {
            var result = ListboxViewModel.ListofSelectedDevices.Any(x => x.Value == value);
            if (result == true)
            {
                var currentitem = ListboxViewModel.ListofSelectedDevices.Single(x => x.Value == value);
                ListboxViewModel.ListofSelectedDevices.Remove(currentitem);

                JsRuntime.InvokeVoidAsync("alert", "Selected Item Removed Successfully");
            }
        }

        protected async void FormSubmitted()
        {
            // Getting Selected Values on Submit
            foreach (var selectedDevice in ListboxViewModel.ListofSelectedDevices)
            {
                
            }
        }
    }
}

Next, we will work on ListboxComponent.razor page, which we have added earlier.

ListboxComponent.razor page

• Going to add the @page Razor directive and specify the route for Component (Listbox)
• Adding @inherits directive and set base class for component (ListboxComponentBase)

First List box

Using the Foreach loop, we will add multiple options to the Select element, assign an onclick event (ListboxAddItem), and pass arguments Value and Text.

 <div class="form-group col-md-4">
     <label>Item to Select</label>
     <select class="form-control" name="drop1" size="10" id="Select1">
         @foreach (var data in ListboxViewModel.ListofElectronicDevices)
         {
             <option @onclick="@(() => ListboxAddItem(data.Value, @data.Text))" value="@data.Value">@data.Text</option>
         }
     </select>
 </div>

Second List box

Similar to First Listbox, we will use the Foreach loop to bind the second List box.

But here, we will use the ListofSelectedDevices collection, which has only selected items and an onclick event we will call (ListboxRemoveItem), which takes 2 arguments Value and Text.

<div class="form-group col-md-4">
    <label>Selected Item</label>
    @if (ListboxViewModel.ListofSelectedDevices.Any())
    {
        <select class="form-control" name="drop1" size="10" id="Select1">
            @foreach (var data in ListboxViewModel.ListofSelectedDevices)
            {
                <option @onclick="@(() => ListboxRemoveItem(data.Value, @data.Text))" value="@data.Value">@data.Text</option>
            }
        </select>
    }
</div>

Now let’s see the complete source code of the ListboxComponent.razor page.

Complete Source Code of the ListboxComponent.razor Page

@page "/Listbox"

@inherits ListboxComponentBase

<EditForm Model="@ListboxViewModel" OnValidSubmit="@FormSubmitted">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Listbox</h5>
        </div>
        <div class="card-body">
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label>Item to Select</label>
                    <select class="form-control" name="drop1" size="10" id="Select1">
                        @foreach (var data in ListboxViewModel.ListofElectronicDevices)
                        {
                            <option @onclick="@(() => ListboxAddItem(data.Value, @data.Text))" value="@data.Value">@data.Text</option>
                        }
                    </select>
                </div>
                <div class="form-group col-md-4">
                    <label>Selected Item</label>
                    @if (ListboxViewModel.ListofSelectedDevices.Any())
                    {
                        <select class="form-control" name="drop1" size="10" id="Select1">
                            @foreach (var data in ListboxViewModel.ListofSelectedDevices)
                            {
                                <option @onclick="@(() => ListboxRemoveItem(data.Value, @data.Text))" value="@data.Value">@data.Text</option>
                            }
                        </select>
                    }
                </div>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
    </div>
</EditForm>

In the Next Step, Let Press F5 to run the project, and you will see the output.

Blazor https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor