Aspnetcore: @bind and @onchange on the same element doesn't work

Created on 9 Apr 2018  ·  14Comments  ·  Source: dotnet/aspnetcore

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" />

area-blazor

Most helpful comment

@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.

All 14 comments

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.

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.

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 ?

@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.

Ok, thanks !

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

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

Still experiencing this issue

@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.

@danroth27 my mistake I misunderstood the previous response.

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,

Or to cause a compile error when used both.

Dne čt 22. 8. 2019 18:05 uživatel cedwards-telis notifications@github.com
napsal:

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,


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/aspnet/Blazor/issues/524?email_source=notifications&email_token=AB4B7OUYSIBLT7LQ5FXKUO3QF22L5A5CNFSM4EZTWHP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD45SLVA#issuecomment-523970004,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB4B7OXMAWWWTLGMWWZVB5TQF22L5ANCNFSM4EZTWHPQ
.

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.

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(); }
    }
Was this page helpful?
0 / 5 - 0 ratings