CODEWITHSUNDEEP
c#asp.net.netblazorblazor-server-side
Daniel
Daniel

Reputation: 481

Why cant i bind value to my property through a dropdownlist in Blazor?

I would like to bind a value to a property that i would like to post later through my dropdownlist. My problem is that i cant use @Bind-Value="@name" inside a select with options. I Get this error message RZ9991 The attribute names could not be inferred from bind attribute 'bind-value'. Bind attributes should be of the form 'Bind' or 'Bind-Value' along with their corresponding optional parameters like 'bind-value:event', 'bind:format' etc I have tried to only set value but i seems that my value will bind. Anyone know anything else i can use? I can get it to work with @Bind-Value in input fields but not in dropdowns.

My dropdown list:

    <div class="row">
        <div class="mb-1">
            <label class="form-label col-5 col-md-4 text-end">Numbers:</label>
            <select class="mr-2">
                @foreach (var item in number_list)
                {
                    <option @bind-value="@Numbers" size="15">@item.Numbers</option>

                    Number = item.Number.ToString();
                }
            </select>
        </div>
    </div>

Myproperty i would like to bind to

 [Parameter] public string? Numbers{ get; set; }

Worth noting is that Number is a float value in my list that i loop through in my foreach number_list

Upvotes: 0

Views: 888

Answers (2)

Daniel Jablonski
Daniel Jablonski

Reputation: 46

Actually, Josh pretty much nailed it already.

The binding of the selected value must be in the "select" tag using the @bind attribute, while the value of the subsequent options is set with the "value" attribute in the "option" attribute.

Below is the entire code:

<div class="row">
    <span> Selected value: @Numbers</span>
</div>
<div class="row">
    <div class="mb-1">
        <select class="mr-2" @bind="@Numbers">
            @foreach (var number in _numberList)
            {
                <option value="@number">@number</option>
            }
            <option></option>
        </select>
    </div>
</div>

@code {
    private float[] _numberList = new[] { 1.2f, 2.3f, 3.4f, 4.5f };

    [Parameter]
    public string Numbers { get; set; }

}

Upvotes: 2

Josh
Josh

Reputation: 161

your select should look like this instead: when drop down index changes it will update @Numbers

<select class="mr-2" @bind="@Numbers">
            @foreach (var item in number_list)
            {
                <option value="@item" size="15">@item</option>                   
            }
</select>

im assuming this is what you wanted?

Upvotes: 1

Related Questions