How do I create dual dropdown lists in Blazor C#?
I have a page written for ASP.NET MVC using VB that is being rewritten for ASP.NET Core using Blazor C#.
I have this code in Block 1 that populates phone numbers from a list. The other blocks are for reference: Block 2 is for the "Add Phone Number" button, and Block 3 is for the "Continue" button.
The LabelFor control is not available in Blazor, and I do not understand what the Function code `Function(m) m.PhoneNumbers, New With {.class = "pi-item-label"}` is doing.
PhoneNumbers is a list List<PhoneNumberModel>, where PhoneNumberModel is:
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 the ASP.NET renders, it creates two (2) dropdown lists that are tied together: one for the phone type and one for the dial number. Reference image below where (1) is from Block 1 above and (2) and (3) are the references to the buttons listed earlier:
I know a little about Bootstrap: the class="row" below creates a new row from the <div> tag.
<div class="row">
<div class="col-md-2 col-md-offset-1">
@Html.LabelFor(Function(m) m.PhoneNumbers, New With {.class = "pi-item-label"})
</div>
</div>
<div id="PhoneNumberList">
@If Model.PhoneNumbers.Count > 0 Then
@Html.EditorFor(Function(m) m.PhoneNumbers)
End If
</div>
- How does the single "row" create two (2) dropdown lists?
- Then, there is the second <div> with id="PhoneNumberList". I can only guess that this somehow is tied to the row div, but I don't understand what it is doing.
How would I recreate this using Blazor C#?
Hi Joe,
Thank you for reaching out to us and we apologize for the delay in our response. Based on the information you provided, it seems like you're looking for a solution to create a form with multiple fields dynamically. We suggest using our DataForm component, which allows you to create forms with automatic field generation and layout customization.
To further assist you, we have created a simple sample demonstrating how to generate fields dynamically based on a button click. In this sample, you can toggle the visibility of the field using a toggle button. Please check out the sample at the following link:
Sample: https://blazorplayground.syncfusion.com/BNhJjhjvCcEKTwqP
Additionally, for more detailed information and examples on using the DataForm component, please refer to our documentation and demos:
Documentation: https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app
Demos: https://blazor.syncfusion.com/demos/data-form/default-functionalities?theme=fluent
Regards,
Yohapuja S
It took me a while, but I got it working.
Here is the code that I used:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<label class="pi-item-label" for="@_data.PhoneNumbers">Phone Numbers</label>
@foreach (var phone in _data.PhoneNumbers)
{
<div class="row w-100">
<div class="w-50">
<InputSelect class="form-select" @bind-Value="@phone.PhoneTypeId">
<option value="0"/>
@foreach (var option in _phoneTypes)
{
<option value="@option.Id">@option.Value</option>
}
</InputSelect>
</div>
<div class="w-50 input-group">
<button type="button" class="btn btn-light btn-outline-secondary">
<SVGIcon Icon="SVGIcon.SVGIconLookup.Phone" aria-hidden="true"/>
</button>
<input type="text" aria-label="Phone Dial Number" class="form-control" @bind="@phone.DialNumber">
<button type="button" @onclick="@(() => DeletePhoneNumber(phone.PhoneNumberId))" class="btn btn-danger">
<SVGIcon Icon="SVGIcon.SVGIconLookup.Times" Title="@($"Delete {@phone.DialNumber}")"/>
</button>
</div>
</div>
}
</div>
</div>
Here is how it looks:
