CODEWITHSUNDEEP
htmlblazor-webassembly
Paul Stanley
Paul Stanley

Reputation: 2161

Blazor Select Element I Can Not Set The ChangeEvent

I can not see how to set the change event on select element when that element is bound to a field. When I select a name in the name chooser list the 2nd list reflects the change.

<div>
    <p>Name Chooser</p>
    <select @onchange="OnChange">
        @foreach (var name in Names)
        {
            <option>@name</option>
        }
    </select>
</div>


<select @bind="@chosenName"> 
    @foreach (var name in Names)
    {
        <option>@name</option>
    }
</select>



@code{
    string chosenName = "Peter";
    List<string> Names = new List<string>() { "Paul", "Peter", "Jane", "Jackie" };

    void OnChange(ChangeEventArgs e)
    {
        chosenName = e.Value.ToString();
    }
    void OnChange2(ChangeEventArgs e)
    {

    }

}

My question is how to detect the change event on list 2 when I select it with the mouse. This code throws a compiler error.

<select @bind="@chosenName" @onchange="OnChange2">

Upvotes: 0

Views: 187

Answers (2)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30046

Here's an alternative approach using getters and setters. It lets Blazor handle the control events.

@page "/select2"
<div>
    <p>Name Chooser</p>
    <select @bind="name">
        @foreach (var name in Names)
        {
            <option>@name</option>
        }
    </select>
</div>


<select @bind="@chosenName">
    @foreach (var name in Names)
    {
        <option>@name</option>
    }
</select>



@code{

    string name
    {
        get => _name;
        set
        {
            if (!value.Equals(_name))
            {
                _name = value;
                // do something or trigger an event;
                _chosenname = value;
            }
        }
    }

    string chosenName
    {
        get => _chosenname;
        set
        {
            if (!value.Equals(_chosenname))
            {
                _chosenname = value;
                // do something or trigger an event;
            }
        }
    }

    string _name = null;
    string _chosenname = "Peter";
    List<string> Names = new List<string>() { "Paul", "Peter", "Jane", "Jackie" };
}

Upvotes: 1

Bennyboy1973
Bennyboy1973

Reputation: 4208

You don't really need to bind anything, because the onchange event sends out all the information you will need for a dropdown. In many cases, you won't even need an event handler. You can just set a variable with a lambda method.

Maybe something like:

<div>
    <p>Name Chooser</p>
    <select @onchange="args => chosenName = args.Value.ToString()">
        @foreach (var name in Names)
        {
            <option selected>@name</option>
        }
    </select>
</div>

<select @onchange="OnChange2">
    @foreach (var name in Names)
    {
        if (name == chosenName)
        {
            <option selected>@name</option>
        }
        else
        {
            <option>@name</option>
        }
    }
</select>

@code{
    string chosenName = "Peter";
    List<string> Names = new List<string>() { "Paul", "Peter", "Jane", "Jackie" };

    void OnChange2(ChangeEventArgs e)
    {
    }
}

Upvotes: 1

Related Questions