Blazor data-bind dynamically generated elements

Question

I want to dynamically create and bind some select elements from a list of "AdditionalFields" on my Blazor web page.

I need to bind each element to the CheckoutData variable.

But I don't know how I can create a variable / Array, or something like it, that is correctly updated via bind-value.

For more details you can view my attached (Image) and this source code:

@if (StoreData.StoreContainer?.AdditionalFields != null)
    @foreach (var additionalField in     StoreData.StoreContainer.AdditionalFields)
    {
        <div class="col-sm-6">
            <div class="page_input">
                <label> @additionalField.Caption </label>
                <InputSelect class="checkout-control pristine untouched" @bind-Value="@CheckoutData.OrderTimeType">
                    @foreach (var keyValue in additionalField.ValueList)
                    {
                        <option value="@keyValue.Sort" selected="@(keyValue == additionalField.ValueList[0] ? "selected" : "")">@keyValue.SelectionText</option>
                    }
                </InputSelect>
            </div>
        </div>
    }

Can you clarify what the problem is? Are you trying to say that CheckoutData.OrderTimeType isn't being updated to the currently selected value in the drop down list? — Kyle
No, that variable is wrong (was copy pasted) Just want to have variables in the checkout class, that will bei filled / bound to the List of additionalFields correctly and don't know how to do this right now and here... — baer999
AdditionalFields are List of simple class with Caption (string) and ValueList (List of ValueMembers for that AdditionalField with Sort and SelectionText). — baer999

Quango Quango · Accepted Answer · 2019-11-28T20:20:40

I've created a sample BlazorFiddle that shows how you can handle selection of the elements within a list of AdditionalFields, roughly as per your example in the question.

To show a selection I added a .Selected property to the AdditionalField class but you might be storing this elsewhere.

Key points to note:

    int count = additionalFields.Count;
    for (var i=0; i < count; i++)
    {
        int current = i; // don't use loop variable in binding
        var additionalField = additionalFields[current];

I used a for loop to iterate through the AdditionalFields and saved the current index within the loop - this is important to ensure you don't pass the loop variable in the @onchanged event handler. I didn't use bind here so it's easy to see what happens.

                <select class="checkout-control pristine untouched" @onchange="((e) => HandleSelect(e, current))" >

I used a HTML select instead of the InputSelect, and handle the @onchange event: this passes the event arguments e and the current index to the HandleSelect method

You'll probably need to adapt this approach but it shows one way you can dynamically bind in Blazor.

Important note: the code sets the Selected value of the second field to the second sort value to demonstrate the selected attribute is working correctly.

However, note that the first field shows "sort 1" as selected but does NOT fire an event - this is HTML auto-selecting the first element in the select list, so the first element's Selected property would still be null. Either ensure the Selected is set at the start, e.g. to the first value, or have a blank <option value="">[select a sort]</option> as the first item which will bind to the blank select.

Blazor data-bind dynamically generated elements

1 Answers

Key points to note: