В Blazor, Как @bind и затем запустить @onchange в динамической модели

Question

Модель:

 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; }
}

Бритва:

@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);
}

Как найти и установить соответствующее свойство Model для newCheckedBrand вМетод FilterChangedBrand.

Или используйте @bind = "@ item.Checked" в разметке флажка, а затем вызывайте событие, когда изменяется состояние флажка для одного из флажков?

Answer 1

Поскольку вы не можете использовать @bind и @onchange, вы должны вносить изменения только в коде. Самый простой способ сделать это - использовать лямбду для захвата 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);
}

Альтернативный и более сложный способ, которыйМожет помочь, если вы хотите повторно использовать свой пользовательский интерфейс, например, WPF должен поместить это событие в каскад в самой модели.

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;
}

, как вы видите, CheckBoxListWithTitle будет обрабатывать распространение требуемых событий. в Razor вы подписываетесь только на CheckBoxListWithTitle.ModelChanged