How do I create dual dropdown lists in Blazor C#?

Question

I have this code in Block 1 that populates phone numbers from a list. Block 2 is for the "Add Phone Number" button, and Block 3 is for the "Continue" button.

It's in VB using ASP.NET MVC, but it has to be rewritten in C# using Blazor. The LabelFor control is not available to me, and I do not understand what the Function code Function(m) m.PhoneNumbers, New With {.class = "pi-item-label"} is doing.

PhoneNumbers is List, and PhoneNumberModel is here:

Public Class PhoneNumberModel

    Public Property PhoneNumberID As Long

    Public Property PhoneTypeID As Integer

    Public PhoneTypeName As String

    Public Property PhoneTypeList As List(Of SelectListItem)

    <StringLength(25, ErrorMessage:=StringLengthMaxError),
    Display(Name:="Number"),
    CustomDataAnnotations.PhoneNumber(),
    Required(ErrorMessage:=RequiredError)>
    Public Property DialNumber As String

End Class

Whenever it renders, it creates two (2) dropdown lists: one for the phone type and one for the dial number.

How would I duplicate this in a C# Blazor page?

Update:

I'm still stuck on this. Nothing I try seems to work.

Here is the VB code in MVC with some highlights as landmarks for the C# code:

Here is the C# code in Blazor with the same highlighted areas:

Here is how my output looks with the C# code:

Are there any obvious things that I am doing wrong?

Solution:

Using the accepted solution below, I was able to get it to work. It took me some time to make it look nice, and below are my results:

This produced the current output:

I'm still working to figure out why the [Add] and [Continue] buttons are not on the same line, but that should not take too much longer.

Answer 1

Define the Model in C#

public class PhoneNumberModel
{
    public long PhoneNumberID { get; set; }
    public int PhoneTypeID { get; set; }
    public string PhoneTypeName { get; set; }

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

    [StringLength(25, ErrorMessage = "StringLengthMaxError")]
    [Display(Name = "Number")]
    [Required(ErrorMessage = "RequiredError")]
    public string DialNumber { get; set; }
}

In Blazor component you'll need to handle the dropdowns. Blazor does not use LabelFor or similar helpers as in MVC, but you can easily create labels and inputs manually.

 @code {
        private List<PhoneNumberModel> phoneNumbers = new List<PhoneNumberModel>();
        private List<SelectListItem> phoneTypeOptions = new List<SelectListItem>(); 
        protected override void OnInitialized()
        {
            // Initialize your PhoneNumbers and PhoneTypeOptions
        }
    
        private void AddPhoneNumber()
        {
            phoneNumbers.Add(new PhoneNumberModel());
        }
    
        private void Continue()
        {
            // Handle the continue action
        }
    }
    
    @foreach (var phoneNumber in phoneNumbers)
    {
        <div>
            <label>Phone Type</label>
            <select @bind="phoneNumber.PhoneTypeID">
                @foreach (var option in phoneTypeOptions)
                {
                    <option value="@option. Value">@option.Text</option>
                }
            </select>
        </div>
        <div>
            <label>Number</label>
            <input type="text" @bind="phoneNumber.DialNumber" />
        </div>
    }
    
    <button @onclick="AddPhoneNumber">Add Phone Number</button>
    <button @onclick="Continue">Continue</button>

Implement the SelectListItem Class

public class SelectListItem
{
    public string Text { get; set; }
    public string Value { get; set; }
}