BLAZOR PLAYGROUND SERIES PART 3-HOW TO CREATE A DROPDOWN LIST IN BLAZOR

In part, we are going to learn how to bind a dropdown list with a blazor.

If you are new to Blazor, then you must see

• PART 1 :- What is Blazor
• PART 2 :- How To Create Blazor Server Application

Here we have Already Created an application in Blazor Part 1.

Complete Source Code on Github

Below is a Snapshot of the Application that we have created.

Adding ViewModel Folder

Adding the ViewModel folder to the project.

Adding ViewModel

Adding ViewModel with the name DropdownViewModel, which will have string and collection property in it.

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

namespace BlazorPlayGround1.ViewModel
{
    public class DropdownViewModel
    {
        [Required(ErrorMessage = "Select Device")]
        public string SelectedValue { get; set; }

        public List<SelectListItem> ListofDevices { get; set; }
    }
}

Next, the step we are going to add Component.

Adding Component

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

Adding Base Class for DropdownListComponent Component

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

Next, we are going to add DropdownViewModel property in DropdownListComponentBase component.

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

namespace BlazorPlayGround1.Pages
{
    public class DropdownListComponentBase : ComponentBase
    {
        public DropdownViewModel DropdownViewModel { get; set; } = new DropdownViewModel();
    }
}

Next step, we need to call the ListofDevices method inside the OnInitialized method to initialize the DropdownViewModel property.

Initializing DropDownList in OnInitialized Method

protected override void OnInitialized()
{
            DropdownViewModel.ListofDevices = new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Text = "--Select--",
                    Value = ""
                },
                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"
                }
            };
}

After initializing next, we are going to add another method to DropdownListComponentBase class.

This method will be called on form submit, which will tell which value of dropdown is selected.

protected async void FormSubmitted()
{
  var selectedvalue = DropdownViewModel.SelectedValue;
}   

Complete DropdownListComponent.cs code behind code

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

namespace BlazorPlayGround1.Pages
{
    public class DropdownListComponentBase : ComponentBase
    {
        protected DropdownViewModel DropdownViewModel { get; set; } = new DropdownViewModel();

        protected override void OnInitialized()
        {
            DropdownViewModel.ListofDevices = new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Text = "--Select--",
                    Value = ""
                },
                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"
                }
            };
        }

        protected async void FormSubmitted()
        {
            var selectedvalue = DropdownViewModel.SelectedValue;
        }
    }
}

In the next part, we will work on DropdownListComponent.razor Page which we have added earlier.

Setting up DropdownListComponent.razor Page

• Going to add the @page Razor directive and specify the route for Component (DropdownList)
• Adding @inherits directive and set base class for component (DropdownListComponentBase).
• Adding Edit form which Renders a form element and set Model and OnValidSubmit Properties of it.
• Adding InputSelect and setting @bind-Value=”DropdownViewModel.SelectedValue” and adding option by iterating foreach loop.
• At last, we are adding we are displaying the value of selected dropdown @DropdownViewModel.SelectedValue

@page "/DropdownList"
@inherits DropdownListComponentBase

<div class="col-md-12">
    <EditForm Model="@DropdownViewModel" OnValidSubmit="@FormSubmitted">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Dropdown</h5>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="Devices">Devices</label>
                        <InputSelect id="Devices" class="form-control" @bind-Value="DropdownViewModel.SelectedValue">

                            @foreach (var state in DropdownViewModel.ListofDevices)
                            {
                                <option value="@state.Value">@state.Text</option>
                            }
                        </InputSelect>
                        <ValidationMessage For="@(() => DropdownViewModel.SelectedValue)" />
                    </div>

                </div>
            </div>
            <div class="card-footer">
                @if (!string.IsNullOrEmpty(@DropdownViewModel.SelectedValue))
                {
                    <label> Selected Value :- </label> @DropdownViewModel.SelectedValue
                }

            </div>
        </div>
    </EditForm>
</div>

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