在Blazor中，如何在动态模型中进行@bind然后触发@onchange [英] In Blazor, How to @bind and then fire @onchange in a dynamic 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; }
}

剃刀:

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

@代码:

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

如何在FilterChangedBrand方法中查找相关模型属性并将其设置为newCheckedBrand.

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

还是在复选框标记中使用@bind ="@ item.Checked"，然后在其中一个复选框的选中状态更改时引发事件?

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

推荐答案

由于无法使用@bind和@onchange，因此您只能在代码中进行更改.最简单的方法是使用lambda捕获 item

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

剃刀

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

另一种更复杂的方式，如果您想将UI与WPF一起使用，则可能会有所帮助，例如将事件级联放置在模型本身中.

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

如您所见，

CheckBoxListWithTitle 将处理必需事件的传播.在Razor中，您仅订阅 CheckBoxListWithTitle.ModelChanged

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

这篇关于在Blazor中，如何在动态模型中进行@bind然后触发@onchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！