In Blazor, How to @bind and then fire @onchange in a dynamic model

Question

Model:

public class FiltersModel
{      
    public CheckBoxListWithTitle Brand { get; set; }
}

public class CheckBoxListWithTitle
{        
    public List<FilterCheckBox> CheckBoxes { get; set; }
}

public class FilterCheckBox
{        
    public string Value { get; set; }
    public bool Checked { get; set; }
}

Razor:

@foreach (var item in Model.Brand.CheckBoxes)
{
<label>
    @item.Value
    <input type="checkbox" @onchange="@FilterChangedBrand" />  
</label>
}

@code:

public FiltersModel Model { get; set; } // Initialized in OnParametersSet

private void FilterChangedBrand(UIChangeEventArgs e)
{
    string newCheckedBrand = e.Value.ToString();
    // Now How to Find and Set the relevant Model property to newCheckedBrand
    FiltersChanged?.Invoke(Model);
}

How to Find and Set the relevant Model property to newCheckedBrand in the FilterChangedBrand method.

Or Use @bind="@item.Checked" in the checkbox markup and then raise an event when the checked state for one of checkboxes changes?

score 6 · Accepted Answer · answered Oct 18 '19 at 14:48

Since there no way how you can use @bind and @onchange you have to make changes purely in the code. Simplest way for you to do that is to use lambda to capture item

Razor

@foreach (var item in Model.Brand.CheckBoxes)
{
    <label>
        @item.Value
        <input type="checkbox" @onchange="(e) => FilterChangedBrand(item, e)" />
    </label>
}

@code

public FiltersModel Model { get; set; } // Initialized in OnParametersSet

public event Action<FiltersModel> FiltersChanged;

private void FilterChangedBrand(FilterCheckBox item, ChangeEventArgs e)
{
    // here you do work of @bind
    item.Checked = !item.Checked;
    string newCheckedBrand = e.Value.ToString();
    // Now How to Find and Set the relevant Model property to newCheckedBrand
    FiltersChanged?.Invoke(Model);
}

Alternative and more complicated way, which may helps if you want reuse your UI with for example WPF is to place that event cascading in the model itself.

public class CheckBoxListWithTitle
{
    private List<FilterCheckBox> items = new List<FilterCheckBox>();
    public IReadOnlyList<FilterCheckBox> CheckBoxes => items.AsReadOnly();

    public event EventHandler ModelChanged;

    public void Add(FilterCheckBox item)
    {
        item.CheckedChanged += this.Item_CheckedChanged;
        this.items.Add(item);
    }

    private void Item_CheckedChanged(object sender, EventArgs e)
    {
        ModelChanged.Invoke(this, EventArgs.Empty);
    }
}

public class FilterCheckBox
{
    public string Value { get; set; }
    public bool Checked { get; set; }

    public event EventHandler CheckedChanged;
}

as you see CheckBoxListWithTitle will handle propagation of required events. in Razor you only subscribe to CheckBoxListWithTitle.ModelChanged

score 2 · Answer 2 · edited Sep 13 '21 at 14:41

another option is to use in your bound object the INotifyPropertyChanged interface.

public class RowToApprove : INotifyPropertyChanged
{
    private bool _approved;
  
    public string AddressLine { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
  
    public bool Approved
    {
        get => _approved;
        set
        {
            if (value == _approved) return;
            _approved = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

and then in your page, register to ItemOnPropertyChanged event.

  item.PropertyChanged += ItemOnPropertyChanged;

and do your work there:

private void ItemOnPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    //Do something
}

your item could look like this:

<input type="checkbox" @bind-value="@(context.Approved)" />

In Blazor, How to @bind and then fire @onchange in a dynamic model

2 Answers2

Linked