Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@bind and @onchange on the same element doesn't work #16229

Closed
FredBlondel opened this issue Apr 9, 2018 · 14 comments
Closed

@bind and @onchange on the same element doesn't work #16229

FredBlondel opened this issue Apr 9, 2018 · 14 comments
Labels
area-blazor Includes: Blazor, Razor Components

Comments

@FredBlondel
Copy link

I've try to set both @Bind and @onchange but onchange is not thrown
Ex:

            @foreach (var todo in todoList)
            {
                <tr>
                    <td><input @bind(todo.Done) type="checkbox" @onchange(a => LastChecked(todo)) /> </td>
                    <td>@todo.Name</td>
                </tr>
            }

Separatly, evething works fine, ie:
<input type="checkbox" @onchange(a => LastChecked(todo)) />

Or

<input @bind(todo.Done) type="checkbox" />

@humbersoft
Copy link

humbersoft commented Apr 9, 2018

I think the current bind approach only allows one event handler for the Javascript onchange event. So one is replacing the other. The old @Bind syntax after transpiling to C# will attach an event handler to the Javascript onchange event.

The new syntax coming in the 0.2 release will allow you to attach to different events which may help you out, but I am unsure if it will allow more than one event handler like what you want to do here.

@SteveSandersonMS
Copy link
Member

As @humbersoft mentions, the @bind and @onchange syntaxes are about to be replaced.

With the new bind= and onchange= syntax, you'll still not be able to use bind and onchange together, but we'll document how you get to combine the effects of both if you want. And if this turns out to be problematic for people we'll find a way of letting them be used simultaneously.

@FredBlondel
Copy link
Author

Ok, thanks for your anwsers.

So, I think if iwant to bind an element to an item, and be notified by any changes, I have to bind the object, and make the bound object "observable". I'm I right ?

@SteveSandersonMS
Copy link
Member

@FredBlondel You do something like:

<input value=@MyProperty onchange=@(eventArgs => { MyProperty = eventArgs.NewValue; DoSomethingElse();  }) />

or

<input value=@MyProperty onchange=@HandleMyPropertyChange />

with

void HandleMyPropertyChange(UIChangeEventArgs evt)
{
    MyProperty = evt.NewValue;
    DoSomethingElse();
}

Note that I might be misremembering the precise method/property names, but this is the shape of it.

@FredBlondel
Copy link
Author

Ok, thanks !

@mashbrno
Copy link

mashbrno commented Apr 4, 2019

In preview3 there is Value property at UIChangeEventArgs instead of NewValue.

@baartho
Copy link

baartho commented Apr 30, 2019

This issue is still happening. Is there going to be a fix besides the workaround?

@bearlylegible
Copy link

Still experiencing this issue

@danroth27
Copy link
Member

@baartho @bearlylegible As @SteveSandersonMS mentioned above this is not considered a bug. If you want to set the value and hook onchange then you need to use the suggested syntax.

@bearlylegible
Copy link

@danroth27 my mistake I misunderstood the previous response.

@cedwards-telis
Copy link

I keep forgetting about this and running in to it again.

I'd say that if possible it would be a worthwhile enhancement to chain the events. I can see how it might causes difficulties however,

@mashbrno
Copy link

mashbrno commented Aug 22, 2019 via email

@DataJuggler
Copy link

Microsoft needs to rethink having bind and onchange. The suggested approach here doesn't in Rc1.

I need to know when the list changes, so I can perform save.

I can't figure out how to save To Do list items or if the list changes.

BindingList didn't work either, or at least my ListChanged event never fired.

@hfmm99
Copy link

hfmm99 commented Oct 16, 2019

Here there's a workaround for this:

HTML:
<input type="search" class="form-control" placeholder="Search..." @bind="SearchTerm" />

C#:

    private string searchTerm;
    public string SearchTerm
    {
        get { return searchTerm; }
        set { searchTerm = value; Search(); }
    }

@mkArtakMSFT mkArtakMSFT transferred this issue from dotnet/blazor Oct 27, 2019
@mkArtakMSFT mkArtakMSFT added the area-blazor Includes: Blazor, Razor Components label Oct 27, 2019
@ghost ghost locked as resolved and limited conversation to collaborators Dec 4, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-blazor Includes: Blazor, Razor Components
Projects
None yet
Development

No branches or pull requests